Skip to content
Diagrams and visualizations using Mermaid

icon picker
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 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 ⤵️

Morning routine
Wake up
Drink coffee
Kids to school
There are no rows in this table
participant Aliceparticipant BobAlice->>John: Hello John, how are you?loop Healthcheck John->>John: Fight against hypochondriaendNote right of John: Rational thoughts <br/>prevail!John-->>Alice: Great!John->>Bob: How about you?Bob-->>John: Jolly good!

Class01 <|-- AveryLongClass : CoolClass03 *-- Class04Class05 o-- Class06Class07 .. Class08Class09 --> C2 : Where am i?Class09 --* C3Class09 --|> Class07Class07 : equals()Class07 : Object[] elementDataClass01 : size()Class01 : int chimpClass01 : int gorillaClass08 <--> C2: Cool label
[*] --> StillStill --> [*]Still --> MovingMoving --> StillMoving --> CrashCrash --> [*]
CUSTOMER ||--o{ ORDER : placesORDER ||--|{ LINE-ITEM : containsCUSTOMER }|..|{ DELIVERY-ADDRESS : uses
title My working daysection Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Catsection Go home Go downstairs: 5: Me Sit down: 5: Me
dateFormat YYYY-MM-DDtitle Adding GANTT diagram to mermaidexcludes weekdays 2014-01-10
section A sectionCompleted task :done, des1, 2014-01-06,2014-01-08Active task :active, des2, 2014-01-09, 3dFuture task : des3, after des2, 5dFuture 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
commitcommitbranch developcheckout developcommitcommitcheckout mainmerge developcommitcommit
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 (
) instead.