Diagrams and visualizations using Mermaid

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.

Leandro Zubrezki

⁠

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.

⁠

Install the Pack

⁠

Copy this doc

⁠

Mermaid documentation

⁠

Explore Diagram Types ⤵️

⁠

Flowcharts⁠

⁠

A-->B

A-->C

B-->D

C-->D

⁠

Morning routine

Morning routine

Wake up

Drink coffee

Meditate

Kids to school

There are no rows in this table

⁠

Sequence Diagram⁠

⁠

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!

⁠

Class Diagram⁠

⁠

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

⁠

State Diagram⁠

⁠

[*] --> Still

Still --> [*]

Still --> Moving

Moving --> Still

Moving --> Crash

Crash --> [*]

⁠

Entity Relationship⁠

⁠

CUSTOMER ||--o{ ORDER : places

ORDER ||--|{ LINE-ITEM : contains

CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

⁠

User 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

⁠

Gantt Chart⁠

⁠

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

⁠

Pie Chart⁠

⁠

title Pets adopted by volunteers

'Dogs' : 386

'Cats' : 85

'Rats' : 15

⁠

Requirement Diagram⁠

⁠

requirement test_req {

id: 1

text: the test text.

risk: high

verifymethod: test

}

element test_entity {

type: simulation

}

test_entity - satisfies -> test_req

⁠

Git Graph⁠

commit

branch develop

checkout develop

commit

checkout main

merge develop

commit

⁠

C4 Diagram⁠

C4Context

title System Context diagram for Internet Banking System

Enterprise_Boundary(b0, "BankBoundary0") {

Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")

Person(customerB, "Banking Customer B")

Person_Ext(customerC, "Banking Customer C", "desc")

Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")

System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")

Enterprise_Boundary(b1, "BankBoundary") {

SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")

System_Boundary(b2, "BankBoundary2") {

System(SystemA, "Banking System A")

System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")

}

System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")

SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")

Boundary(b3, "BankBoundary3", "boundary") {

SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")

SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")

}

BiRel(customerA, SystemAA, "Uses")

BiRel(SystemAA, SystemE, "Uses")

Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")

Rel(SystemC, customerA, "Sends e-mails to")

UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")

UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")

UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")

UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")

UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")

UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")

⁠

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.