Components Mermaid
Mermaid Mermaid
Component syntax With a similar syntax to code blocks, creating a Mermaid diagram requires a ``` code fence with the inclusion of the mermaid specifier.
Sample Mermaid diagram
```mermaid
graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
```
Link text
One
Two
Hard edge
Round edge
Decision
Result one
Result two
Directives Mermaid directives %%{init: { }}%% syntax as the first line just inside the ```mermaid block.
From the Mermaid docs:
Directives gives a diagram author the capability to alter the appearance of a diagram before rendering by changing the applied configuration.
All Mermaid directives are supported by Retype.
The following sample demonstrates applying a theme to the diagram:
```mermaid
%%{init: { 'theme': 'forest' }}%%
graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
```
Link text
One
Two
Hard edge
Round edge
Decision
Result one
Result two
Syntax highlighting block In order to draw a mermaid code block with syntax highlighting instead of rendering the contents, please use the mermaid-js block syntax specifier.
```mermaid-js
%%{init: { 'theme': 'forest' }}%%
graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
```
graph LR
A[Hard edge] --> |Link text| B(Round edge)
B --> C{Decision}
C --> |One| D[Result one]
C --> |Two| E[Result two]
Diagram types
Flowchart More details in Mermaid docs
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
Sequence diagram More details in Mermaid docs
```mermaid
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!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```
John Bob Alice John Bob Alice loop [Healthcheck] Rational thoughts prevail! Hello John, how are you? Fight against hypochondria Great! How about you? Jolly good!
Gantt diagram More details in Mermaid docs
```mermaid
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
```
Adding GANTT diagram to mermaid 2014-01-07 2014-01-09 2014-01-11 2014-01-13 2014-01-15 2014-01-17 2014-01-19 2014-01-21 2014-01-23 Completed task Active task Future task Future task2 A section Adding GANTT diagram to mermaid
Class diagram More details in Mermaid docs
```mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
```
Cool
Where am i?
Cool label
Class01
int chimp
int gorilla
size()
AveryLongClass
Class03
Class04
Class05
Class06
Class07
Object[] elementData
equals()
Class08
Class09
C2
C3
Entity Relationship More details in Mermaid docs
```mermaid
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
CUSTOMER ORDER LINE-ITEM DELIVERY-ADDRESS places contains uses
User Journey More details in Mermaid docs
```mermaid
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
```
My working day Cat Me Go to work Me Make tea Me Go upstairs Me Cat Do work Go home Me Go downstairs Me Sit down My working day
https://mermaid-js.github.io/mermaid/
