mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
f862302d0e
* Update components/mermaid-diagrams.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> * Apply suggestions from code review * Apply suggestion from @ethanpalm * mermaid nits --------- Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> Co-authored-by: dmytro <pqoqubbw@gmail.com>
109 lines
2.8 KiB
Plaintext
109 lines
2.8 KiB
Plaintext
---
|
|
title: "Mermaid"
|
|
description: "Create flowcharts, diagrams, and visualizations with Mermaid syntax."
|
|
keywords: ["Mermaid", "flowcharts", "diagrams"]
|
|
---
|
|
|
|
[Mermaid](https://mermaid.js.org/) lets you build flowcharts, sequence diagrams, Gantt charts, and other diagrams using text and code.
|
|
|
|
For a complete list of supported diagram types and syntax, see the [Mermaid documentation](https://mermaid.js.org/intro/).
|
|
|
|
```mermaid placement="top-right"
|
|
flowchart LR
|
|
subgraph subgraph1
|
|
direction TB
|
|
top1[top] --> bottom1[bottom]
|
|
end
|
|
subgraph subgraph2
|
|
direction TB
|
|
top2[top] --> bottom2[bottom]
|
|
end
|
|
%% ^ These subgraphs are identical, except for the links to them:
|
|
|
|
%% Link *to* subgraph1: subgraph1 direction is maintained
|
|
outside --> subgraph1
|
|
%% Link *within* subgraph2:
|
|
%% subgraph2 inherits the direction of the top-level graph (LR)
|
|
outside ---> top2
|
|
```
|
|
|
|
````mdx Mermaid flowchart example
|
|
```mermaid placement="top-right"
|
|
flowchart LR
|
|
subgraph subgraph1
|
|
direction TB
|
|
top1[top] --> bottom1[bottom]
|
|
end
|
|
subgraph subgraph2
|
|
direction TB
|
|
top2[top] --> bottom2[bottom]
|
|
end
|
|
%% ^ These subgraphs are identical, except for the links to them:
|
|
|
|
%% Link *to* subgraph1: subgraph1 direction is maintained
|
|
outside --> subgraph1
|
|
%% Link *within* subgraph2:
|
|
%% subgraph2 inherits the direction of the top-level graph (LR)
|
|
outside ---> top2
|
|
```
|
|
````
|
|
|
|
## Interactive controls
|
|
|
|
All Mermaid diagrams include interactive zoom and pan controls. By default, controls appear when the diagram height exceeds 120px.
|
|
|
|
- **Zoom in/out**: Use the zoom buttons to increase or decrease the diagram scale.
|
|
- **Pan**: Use the directional arrows to move around the diagram.
|
|
- **Reset view**: Click the reset button to return to the original view.
|
|
|
|
The controls are especially useful for large or complex diagrams that don't fit entirely in the viewport.
|
|
|
|
## Properties
|
|
|
|
<ResponseField name="actions" type="boolean">
|
|
Show or hide the interactive controls. When set, this overrides the default behavior (controls shown when diagram height exceeds 120px).
|
|
</ResponseField>
|
|
|
|
<ResponseField name="placement" type="string" default="bottom-right">
|
|
Position of the interactive controls. Options: `top-left`, `top-right`, `bottom-left`, `bottom-right`.
|
|
</ResponseField>
|
|
|
|
### Examples
|
|
|
|
Hide controls on a diagram:
|
|
|
|
````mdx
|
|
```mermaid actions={false}
|
|
flowchart LR
|
|
A --> B
|
|
```
|
|
````
|
|
|
|
Show controls in the top-left corner:
|
|
|
|
````mdx
|
|
```mermaid placement="top-left"
|
|
flowchart LR
|
|
A --> B
|
|
```
|
|
````
|
|
|
|
Combine both properties:
|
|
|
|
````mdx
|
|
```mermaid placement="top-left" actions={true}
|
|
flowchart LR
|
|
A --> B
|
|
```
|
|
````
|
|
|
|
## Syntax
|
|
|
|
To create a Mermaid diagram, write your diagram definition inside a Mermaid code block.
|
|
|
|
````mdx
|
|
```mermaid
|
|
// Your mermaid diagram code here
|
|
```
|
|
````
|