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]
```
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]
```
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 the Mermaid docs
```mermaid
graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D
```
Sequence diagram More details in the 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 the 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
```
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 the 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
```
Entity Relationship More details in the Mermaid docs
```mermaid
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
User Journey More details in the 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
```
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
Kanban diagram More details in the Mermaid docs
kanban
Todo
[Create Documentation]
docs[Create Blog about the new diagram]
[In progress]
id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
id9[Ready for deploy]
id8[Design grammar]@{ assigned: 'knsv' }
id10[Ready for test]
id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
id11[Done]
id5[define getData]
id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }
id12[Can't reproduce]
id3[Weird flickering in Firefox]
Create Blog about the new diagram
Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.
Title of diagram is more than 100 chars when user duplicates diagram with 100 char
Weird flickering in Firefox
Sankey diagram More details in the Mermaid docs
```mermaid
sankey-beta
%% source,target,value
Electricity grid,Over generation / exports,104.453
Electricity grid,Heating and cooling - homes,113.726
Electricity grid,H2 conversion,27.14
```
Electricity grid
245.32 Over generation / exports
104.45 Heating and cooling - homes
113.73 H2 conversion
27.14
Architecture diagram More details in the Mermaid docs
architecture-beta
group api(cloud)[API]
service db(database)[Database] in api
service disk1(disk)[Storage] in api
service disk2(disk)[Storage] in api
service server(server)[Server] in api
db:L -- R:server
disk1:T -- B:server
disk2:T -- B:db
Database Storage Storage Server API
XY Chart More details in the Mermaid docs
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
Sales Revenue jan feb mar apr may jun jul aug sep oct nov dec 11000 10500 10000 9500 9000 8500 8000 7500 7000 6500 6000 5500 5000 4500 4000 Revenue (in $)
Sequence diagram More details in the Mermaid docs
John Bob Alice John Bob Alice Bob thinks a long long time, so long that the text does not fit on a row. Hello Bob, how are you? How about you John? I am good thanks! I am good thanks! Checking with John... Yes... John, how are you?
https://mermaid-js.github.io/mermaid/
