JavaScript Required
We’re sorry, but Coda doesn’t work properly without JavaScript enabled.
Skip to content
Diagrams and visualizations using Mermaid
Diagrams and visualizations using Mermaid
More
Share
Explore
Diagrams and visualizations using Mermaid
Mermaid pack lets you create diagrams and visualizations using text. This template demonstrates what is possible with different examples.
LZ
Leandro Zubrezki
Diagram Types
Flowcharts
A
-->
B
A
-->
C
B
-->
D
C
-->
D
Morning routine
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
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
Useful Links
Mermaid documentation
The Official Guide to Mermaid.js Book
Related Docs
Two-way writeups: Coda’s secret to shipping fast
Lane Shackleton
An inside look at how Figma ships product
Yuhki Yamashita
Gokul's S.P.A.D.E. Toolkit
Gokul Rajaram
Epics & OKRs Tracking Quick Start
Al Chen
The Notion User's Guide to Coda (2022 Edition)
Ben Parker
Four Myths of Bundling
Shishir Mehrotra
Figma's approach to modern PRDs
Yuhki Yamashita
Rituals for hypergrowth: An inside look at how YouTube scaled
Shishir Mehrotra
Coda's ritual of innovation: How we created (almost) 100 Packs in one day
Oliver Heckmann
How to build tasks dependencies with durations in Google Sheets, ClickUp, Monday, Wrike, SmartSheet, Notion, and Coda
Al Chen
Executive Onboarding: Shishir's Tips & Best Practices
Shishir Mehrotra
Team Retrospective
Glenn Jaume
Related Categories
Project management
Product design
Engineering
Enterprise
Project proposals
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
Ctrl
P
) instead.