# 9724. Mermaid Cheat SheetMermaid

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;
graph TB;    A-->B;
BT
graph BT;A-->B;
graph BT;    A-->B;
RL
graph RL;A-->B;
graph RL;    A-->B;
LR
graph LR;A-->B;
graph LR;    A-->B;
TD
graph TD;A-->B;
graph TD;    A-->B;

### 1.2 Nodes & shapes

Feature Diagram Definition
Node(Default)
graph LR;id;
graph LR;    id;
Node with Text
graph LR;id1[This is the text in the box]
graph LR;    id1[This is the text in the box]
Node with Round Edges
graph LR;id1(This is the text in the box)
graph LR;    id1(This is the text in the box)
Node in Circle Form
graph LR;id1((This is the text in the circle))
graph LR;    id1((This is the text in the circle))
Node in Asymmetric Shape
graph LR;id1>This is the text in the box]
graph LR;    id1>This is the text in the box]
Node in Rhombus Form
graph LR;id1{This is the text in the box}
graph LR;    id1{This is the text in the box}
Feature Diagram Definition
graph LR;A-->B
graph LR;    A-->B
graph LR;A---B
graph LR;    A---B
graph LR;A-- This is the text ---B
graph LR;    A-- This is the text ---B
graph LR;A---|This is the text|B
graph LR;    A---|This is the text|B
graph LR;A-->|text|B
graph LR;    A-->|text|B
graph LR;A-- text -->B
graph LR;    A-- text -->B
graph LR;A-.->B;
graph LR;    A-.->B;
graph LR;A-. text .-> B
graph LR;    A-. text .-> B
graph LR;A ==> B
graph LR;    A ==> B
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

## 2. Sequence Diagrams

A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.

### 2.1 Participants

The participants or actors are rendered in order of appearance in the diagram source text.

sequenceDiagram
participant Alice
participant John
Alice->>John: Hello John, how are you?
John-->>Alice: Great!

sequenceDiagram participant Alice participant John Alice->>John: Hello John, how are you? John-->>Alice: Great!

You can specify the actor’s order of appearance to show the participants in a different order.

sequenceDiagram
participant John
participant Alice
Alice->>John: Hello John, how are you?
John-->>Alice: Great!

sequenceDiagram participant John participant Alice Alice->>John: Hello John, how are you? John-->>Alice: Great!

The participants can be defined implicitly without specifying them with the participant keyword.

sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!

sequenceDiagram Alice->>John: Hello John, how are you? John-->>Alice: Great!

### 2.2 Aliases

The participant can have a convenient identifier and a descriptive label.

sequenceDiagram
participant A as Alice
participant J as John
A->>J: Hello John, how are you?
J-->>A: Great!

sequenceDiagram participant A as Alice participant J as John A->>J: Hello John, how are you? J-->>A: Great!

### 2.3 Messages

Messages can be of two displayed either solid or with a dotted line.

[Actor][Arrow][Actor]:Message text


There are six types of arrows currently supported:

Arrow Type Description
-> Solid line without arrow
–> Dotted line without arrow
-x Solid line with a cross at the end (async)
–x Dotted line with a cross at the end (async)

### 2.4 Activations

Activate and deactivate an actor.

sequenceDiagram
Alice->>John: Hello John, how are you?
activate John
John-->>Alice: Great!
deactivate John

sequenceDiagram Alice->>John: Hello John, how are you? activate John John-->>Alice: Great! deactivate John

Shortcut notation by appending +/- suffix to the message arrow.

sequenceDiagram
Alice->>+John: Hello John, how are you?
John-->>-Alice: Great!

sequenceDiagram Alice->>+John: Hello John, how are you? John-->>-Alice: Great!

Activations can be stacked for same actor:

sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!

sequenceDiagram Alice->>+John: Hello John, how are you? Alice->>+John: John, can you hear me? John-->>-Alice: Hi Alice, I can hear you! John-->>-Alice: I feel great!

### 2.5 Notes

Add notes to a sequence diagram by the notation Note.

Note [ right of | left of | over ] [Actor]: Text in note content


1) Right Side

sequenceDiagram
participant John
Note right of John: Text in note

sequenceDiagram participant John Note right of John: Text in note

2) Left Side

sequenceDiagram
participant John
Note left of John: Text in note

sequenceDiagram participant John Note left of John: Text in note

3) Over

sequenceDiagram
participant John
Note over John: Text in note

sequenceDiagram participant John Note over John: Text in note

4) Create notes spanning two participants

sequenceDiagram
Alice->>John: Hello John, how are you?
Note over Alice,John: A typical interaction

sequenceDiagram Alice->>John: Hello John, how are you? Note over Alice,John: A typical interaction

### 2.6 Loops

Express loops in a sequence diagram by the notation loop.

loop Loop text
... statements ...
end

sequenceDiagram
Alice->John: Hello John, how are you?
loop Every minute
John-->Alice: Great!
end

sequenceDiagram Alice->John: Hello John, how are you? loop Every minute John-->Alice: Great! end

### 2.7 Alt

Express alternative paths in a sequence diagram by the notation alt.

alt Describing text
... statements ...
else
... statements ...
end


Or, if there is sequence that is optional (if without else).

opt Describing text
... statements ...
end


Example:

sequenceDiagram
Alice->>John: Hello John, how are you?
alt is sick
John->>Alice: Not so good :(
else is well
John->>Alice: Feeling fresh like a daisy
end
opt Extra response
end

sequenceDiagram Alice->>John: Hello John, how are you? alt is sick John->>Alice: Not so good :( else is well John->>Alice: Feeling fresh like a daisy end opt Extra response John->>Alice: Thanks for asking end

## 3. Gant Diagrams

A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule. Gantt charts illustrate the start and finish dates of the terminal elements and summary elements of a project.

gantt
title A Gantt Diagram
dateFormat  YYYY-MM-DD
section Section
section Another

gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section First Task :a1, 2018-07-01, 30d Another Task :after a1, 20d section Another Second Task :2018-07-12, 12d Third Task : 24d
gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid

section A section
Active task               :active,  des2, 2018-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2              :         des4, after des3, 5d

Completed task in the critical line :crit, done, 2018-01-06,24h
Implement parser and jison          :crit, done, after des1, 2d
Create tests for parser             :crit, active, 3d
Future task in critical line        :crit, 5d
Create tests for renderer           :2d

section Documentation
Describe gantt syntax               :active, a1, after des1, 3d
Add gantt diagram to demo page      :after a1  , 20h
Add another diagram to demo page    :doc1, after a1  , 48h

section Last section
Describe gantt syntax               :after doc1, 3d
Add gantt diagram to demo page      :20h
Add another diagram to demo page    :48h


## 4. Demos

### 4.1 Basic Flowchart

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

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]

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

### 4.4 Basic Sequence Diagram

sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?

sequenceDiagram Alice ->> Bob: Hello Bob, how are you? Bob-->>John: How about you John? Bob--x Alice: I am good thanks! Bob-x John: I am good thanks! Note right of John: Bob thinks a long
long time, so long
that the text does
not fit on a row. Bob-->Alice: Checking with John... Alice->John: Yes... John, how are you?

### 4.5 Message to Self in Loop

sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts<br/>prevail...
John-->>Alice: Great!