Diagram as Code

mermaid

Generate diagrams, charts, graphs or flows from markdown-like text via javascript.

You can design different kind of diagram with mermaid:

• Flowchart
• Sequence diagram
• Class diagram
• State diagram
• Gant chart
• Pie chart

Check the mermaid documentation for details on the syntax.

Define a chart

On your markdown document, you can include a diagram like this:

    ``` mermaid
          graph LR
              A --- B
              B-->C[fa:fa-ban forbidden]
              B-->D(fa:fa-spinner);
    ```

It will be replaced automatically with this:

  graph LR
      A --- B
      B-->C[fa:fa-ban forbidden]
      B-->D(fa:fa-spinner);

Create a diagram

Visual Studio Code

Use Markdown Preview Mermaid Support extension to be able to preview your chart on VS Code builtin markdown preview.

Live Editor

You can design your chart online with the Mermaid Live Editor.