Mermaid

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
```

ELK layout support

Mintlify supports the ELK (Eclipse Layout Kernel) layout engine for Mermaid diagrams. ELK optimizes arrangement to reduce overlapping and improve readability, which is useful for large or complex diagrams. To use ELK layout in your Mermaid diagrams, add the %%{init: {'flowchart': {'defaultRenderer': 'elk'}}}%% directive at the beginning of your diagram:

ELK layout example

```mermaid
%%{init: {'flowchart': {'defaultRenderer': 'elk'}}}%%
flowchart LR
    A[Start] --> B[Process 1]
    B --> C[Process 2]
    B --> D[Process 3]
    C --> E[End]
    D --> E
```

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.

Edit diagrams in the editor

In the web editor, each Mermaid diagram has a toolbar to zoom, reset the view, show or hide the diagram code, and set the actions and placement properties. To edit a large diagram, click Open fullscreen in the diagram toolbar. The full-screen view shows the diagram code beside a live preview, so you can edit the code and see the result as you type. Zoom with the toolbar buttons, the scroll wheel, or the + and - keys. Press 0 to reset the view, and press Esc to close the full-screen view.

Properties

boolean

Show or hide the interactive controls. When set, this overrides the default behavior (controls shown when diagram height exceeds 120px).

string

default:"bottom-right"

Position of the interactive controls. Options: top-left, top-right, bottom-left, bottom-right.

string

Additional CSS classes to apply to the diagram container.

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
```

Get started

Create content

Manage your site

Agent

Assistant

Agent-ready content

Search and SEO

Document APIs

Integrations

Reference

ELK layout support

Interactive controls

Edit diagrams in the editor

Properties

Examples

Syntax

​ELK layout support

​Interactive controls

​Edit diagrams in the editor

​Properties

​Examples

​Syntax

ELK layout support

Interactive controls

Edit diagrams in the editor

Properties

Examples

Syntax