< Back to Posts

Getting started with Mermaid

About Mermaid

Mermaid lets you create diagrams and visualizations using text and code.
It is a JavaScript-based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
Mermaid is a JavaScript-based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development.

https://mermaid.js.org/intro/https://mermaid.js.org/intro/

Syntax

Mermaid offers many diagram syntaxes, but the most commonly used ones (or the general ones) are flowcharts.

https://mermaid.js.org/syntax/flowchart.htmlhttps://mermaid.js.org/syntax/flowchart.html

Simple Example

flowchart TD
    A[Start] --> B[Process 1]
    B --> C{Condition met?}
    C -->|Yes| D[Success Process]
    C -->|No| E[Error Process]

You can represent connections between nodes like this.

flowchart TD
    A[Start] --> B[Process 1]
    B --> C{Condition met?}
    C -->|Yes| D[Success Process]
    C -->|No| E[Error Process]

If you want to represent a loop

flowchart TD
    A[Start] --> B[Process 1]
    B --> C{Condition met?}
    C -->|Yes| D[Next Process]
    C -->|No| B
    D --> E[End]

If you want to represent a loop, you can connect it to the node you already defined.

flowchart TD
    A[Start] --> B[Process 1]
    B --> C{Condition met?}
    C -->|Yes| D[Next Process]
    C -->|No| B
    D --> E[End]

If you want to include a comment

Use the <br/> tag to include a comment in the node text

flowchart TD
    A[Start
flowchart TD
    A[Start<br/>（This is the starting point of this process）] --> B[Process 1<br/>（Validates input）]
    B --> C{Condition met?<br/>（Threshold is 10）}
    C -->|Yes| D[Process 2<br/>（Success process）]
    C -->|No| E[Process 3<br/>（Error process）]

Use the subgraph tag to leave a note in the flowchart

flowchart TD
    subgraph Note
        note1[Note: This process consumes many resources]
    end

    A[Start] --> B[Process 1]
    B --> C{Condition met?}
    C -->|Yes| D[Success Process]
    C -->|No| E[Error Process]
flowchart TD
    subgraph Note
        note1[Note: This process consumes many resources]
    end

    A[Start] --> B[Process 1]
    B --> C{Condition met?}
    C -->|Yes| D[Success Process]
    C -->|No| E[Error Process]

Resources

If you want to try Mermaid, you can use the following website, Mermaid Live Editor.
https://mermaid.live/edithttps://mermaid.live/edit