# 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
DirectionDiagramDefinition
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
FeatureDiagramDefinition
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
FeatureDiagramDefinition
Link with Arrow Headgraph LR;A-->B
graph LR;
    A-->B
Open Linkgraph 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 Linkgraph LR;A-.->B;
graph LR;
    A-.->B;
Dotted Link with Textgraph LR;A-. text .-> B
graph LR;
    A-. text .-> B
Thick Linkgraph LR;A ==> B
graph LR;
    A ==> B
Thick link with textgraph LR;A == text ==> B
graph LR;
    A == text ==> B
### 1.4 Subgraphs Syntax: ```markdown subgraph title graph definition end ``` Example: ```markdown graph TB c1-->a2 subgraph one a1-->a2 end subgraph two b1-->b2 end subgraph three c1-->c2 end ``` ```mermaid graph TB c1-->a2 subgraph one a1-->a2 end subgraph two b1-->b2 end subgraph three c1-->c2 end ``` ## 4. Demos ### 4.1 Basic Flowchart ```mermaid-example --- 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 ```raw 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] ``` ```mermaid 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] ``` *** ### 4.3 Larger Flowchart with Some Styling ```markdown graph TB sq[Square shape] --> ci((Circle shape)) subgraph A od>Odd shape]-- Two line
edge comment --> ro di{Diamond with
line break} -.-> ro(Rounded
square
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
in an Odd shape] %% Comments after double percent signs e((Inner / circle
and some odd
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 ``` ```mermaid graph TB sq[Square shape] --> ci((Circle shape)) subgraph A od>Odd shape]-- Two line
edge comment --> ro di{Diamond with
line break} -.-> ro(Rounded
square
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
in an Odd shape] %% Comments after double percent signs e((Inner / circle
and some odd
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 ``` ## 5. References * [Mermaid Flowcharts - Basic Syntax](https://mermaidjs.github.io/#/flowchart) * [Mermaid Sequence diagrams](https://mermaidjs.github.io/#/sequenceDiagram) * [Mermaid Gant diagrams](https://mermaidjs.github.io/#/gantt)