Skip to main content
Mermaid 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.
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

​
actions
boolean
Show or hide the interactive controls. When set, this overrides the default behavior (controls shown when diagram height exceeds 120px).
​
placement
string
default:"bottom-right"
Position of the interactive controls. Options: top-left, top-right, bottom-left, bottom-right.

​
Examples

Hide controls on a diagram: 
```mermaid actions={false}
flowchart LR
    A --> B
```
Show controls in the top-left corner: 
```mermaid placement="top-left"
flowchart LR
    A --> B
```
Combine both properties: 
```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. 
```mermaid
// Your mermaid diagram code here
```