mermaid-flowchart.md

🧜 Mermaid-Flowchart

Cheat Sheet for Mermaid.

1. Flowcharts

A flowchart is a type of diagram that represents an algorithm, workflow or process. The flowchart shows the steps as boxes of various kinds, and their order by connecting the boxes with arrows. This diagrammatic representation illustrates a solution model to a given problem.

1.1 Graph

Possible directions are:

• TB - top bottom
• BT - bottom top
• RL - right left
• LR - left right
• TD - same as TB

Direction	Diagram	Definition
TB		graph TB; A-->B;
BT		graph BT; A-->B;
RL		graph RL; A-->B;
LR		graph LR; A-->B;
TD		graph TD; A-->B;

1.2 Nodes & shapes

Feature	Diagram	Definition
Node(Default)		8a37b9ee03f84af584d9b57b1aac8f69
Node with Text		graph LR; id1[This is the text in the box]
Node with Round Edges		graph LR; id1(This is the text in the box)
Node in Circle Form		graph LR; id1((This is the text in the circle))
Node in Asymmetric Shape		graph LR; id1>This is the text in the box]
Node in Rhombus Form		graph LR; id1{This is the text in the box}

1.3 Links Between Nodes

Feature	Diagram	Definition
Link with Arrow Head	graph LR;A-->B	graph LR;

A-->B

| | Open Link | graph LR;A---B |

graph LR;
A---B

| | Text on Links(1) | graph LR;A-- This is the text ---B |

graph LR;
A-- This is the text ---B

| | Text on Links(2) | graph LR;A---|This is the text|B |

graph LR;
A---|This is the text|B

| | Link with Arrow Head and Text(1) | graph LR;A-->|text|B |

graph LR;
A-->|text|B

| | Link with Arrow Head and Text(2) | graph LR;A-- text -->B |

graph LR;
A-- text -->B

| | Dotted Link | graph LR;A-.->B; |

graph LR;
A-.->B;

| | Dotted Link with Text | graph LR;A-. text .-> B |

graph LR;
A-. text .-> B

| | Thick Link | graph LR;A ==> B |

graph LR;
A ==> B

| | Thick link with text | graph LR;A == text ==> B |

graph LR;
A == text ==> B

|

1.4 Subgraphs

Syntax:

subgraph title
    graph definition
end

Example:

graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

Loading

4. Demos

4.1 Basic Flowchart

---
title: Basic Flowchart
---
graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D

---

4.2 Flowchart with Decision

graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

Loading

---

4.3 Larger Flowchart with Some Styling

graph TB
    sq[Square shape] --> ci((Circle shape))

    subgraph A
        od>Odd shape]-- Two line<br/>edge comment --> ro
        di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
        di==>ro2(Rounded square shape)
    end

    %% Notice that no text in shape are added here instead that is appended further down
    e --> od3>Really long text with linebreak<br>in an Odd shape]

    %% Comments after double percent signs
    e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)

    cyr[Cyrillic]-->cyr2((Circle shape Начало));

     classDef green fill:#9f6,stroke:#333,stroke-width:2px
     classDef orange fill:#f96,stroke:#333,stroke-width:4px
     class sq,e green
     class di orange

graph TB
    sq[Square shape] --> ci((Circle shape))

    subgraph A
        od>Odd shape]-- Two line<br/>edge comment --> ro
        di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
        di==>ro2(Rounded square shape)
    end

    %% Notice that no text in shape are added here instead that is appended further down
    e --> od3>Really long text with linebreak<br>in an Odd shape]

    %% Comments after double percent signs
    e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-\*ز)

    cyr[Cyrillic]-->cyr2((Circle shape Начало));

     classDef green fill:#9f6,stroke:#333,stroke-width:2px
     classDef orange fill:#f96,stroke:#333,stroke-width:4px
     class sq,e green
     class di orange

Loading

5. References

• Mermaid Flowcharts - Basic Syntax
• Mermaid Sequence diagrams
• Mermaid Gant diagrams