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.
⁠
mermaid.gif
⁠
⁠

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

⁠
⁠
⁠
Useful Links
⁠
⁠
⁠
⁠
⁠
⁠
Related Docs
Three simple tips to ensure you're driving results from written documents.
Two-way writeups: Coda’s secret to shipping fast
Lane Shackleton
Designing the fastest way to keep an entire company up-to-date on our roadmap using a Coda doc and a bit of social engineering.
An inside look at how Figma ships product
Yuhki Yamashita
A technique for making difficult decisions—formed in my time as a Google and Facebook exec, and widely deployed at Square.
Gokul's S.P.A.D.E. Toolkit
Gokul Rajaram
Integrate your Objectives and Key Results (OKRs) with your epics (agile). This template allows you to see how the whole company is tracking to company-wide goals.
Epics & OKRs Tracking Quick Start
Al Chen
The Notion User's Guide to Coda (2022 Edition)
Ben Parker
Four Myths of Bundling
Shishir Mehrotra
A brief intro to our Product Requirements Doc template
Figma's approach to modern PRDs
Yuhki Yamashita
A peek inside how YouTube tackled the 2008 to 2014 hypergrowth years with a unique set of rituals for everything from strategic planning to effective meetings.
Rituals for hypergrowth: An inside look at how YouTube scaled
Shishir Mehrotra
The story behind our Coda Packathon.
Coda's ritual of innovation: How we created (almost) 100 Packs in one day
Oliver Heckmann
This tutorial shows how Google Sheets, ClickUp, Monday.com, Wrike, Smartsheet, Notion, and Coda handle task dependencies for a project.
How to build tasks dependencies with durations in Google Sheets, ClickUp, Monday, Wrike, SmartSheet, Notion, and Coda
Al Chen
An 8-week learning plan.
Executive Onboarding: Shishir's Tips & Best Practices
Shishir Mehrotra
Run a Team Retrospective to improve your processes
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 (
CtrlP
) instead.