Skip to content
Diagrams and visualizations using Mermaid
Diagrams and visualizations using Mermaid
More
Share
Explore

Diagrams and visualizations using Mermaid

The Mermaid Pack lets you create diagrams and visualizations using text. This doc demonstrates what is possible with different examples.
⁠
mermaid.gif
⁠
⁠
Mermaid is a JavaScript based diagramming and charting tool that takes Markdown-inspired text definitions and creates diagrams dynamically. With the Mermaid Pack you can draw different charts and diagrams using simple Coda formulas and render them as images.
⁠
⁠
⁠
⁠
Copy this doc
⁠
⁠
⁠
⁠
⁠
Explore Diagram Types ⤵️
⁠
⁠
⁠
A-->B
A-->C
B-->D
C-->D
⁠
⁠
⁠
Morning routine
0
1
1
Wake up
2
2
Drink coffee
3
3
Meditate
4
4
Kids to school
There are no rows in this table
⁠
⁠
⁠
⁠
⁠
⁠
⁠
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!

⁠
⁠
⁠
⁠
⁠
⁠
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
⁠
⁠
⁠
⁠
⁠
⁠
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
⁠
⁠
⁠
⁠
⁠
⁠
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
⁠
⁠
⁠
⁠
⁠
⁠
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
⁠
⁠
⁠
⁠
⁠
⁠
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
⁠
⁠
⁠
⁠
⁠
⁠
title Pets adopted by volunteers
'Dogs' : 386
'Cats' : 85
'Rats' : 15
⁠
⁠
⁠
⁠
⁠
⁠
requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}

element test_entity {
type: simulation
}

test_entity - satisfies -> test_req
⁠
⁠
⁠
⁠
⁠
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
⁠
⁠
⁠

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.