Skip to main content

Diagram Examples

Sequence Diagram​

AliceBobJohnloop[Health check]Rational thoughts prevail!Hello John, how are you?Fight against hypochondriaGreat!How about you?Jolly good!AliceBobJohn

Sequence Diagram (forest theme directive)​

It is possible to override default config locally with Mermaid text directives such as:

%%{init: { "theme": "forest" } }%%
AliceBobJohnloop[Health check]Rational thoughts prevail!Hello John, how are you?Fight against hypochondriaGreat!How about you?Jolly good!AliceBobJohn

Gantt Chart​

Adding GANTT diagram to mermaid2014-01-072014-01-092014-01-112014-01-132014-01-152014-01-172014-01-192014-01-212014-01-23Completed task Active task Future task Future task2 A sectionAdding GANTT diagram to mermaid

Flow Chart​

Yes
No
Start
Is it?
OK
Rethink
End

Class Diagram​

Animal
+int age
+String gender
+isMammal()
+mate()
Duck
+String beakColor
+swim()
+quack()
Fish
-int sizeInFeet
-canEat()
Zebra
+bool is_wild
+run()

State Diagram​

Active
EvNumLockPressed
EvNumLockPressed
NumLockOff
NumLockOn
EvCapsLockPressed
EvCapsLockPressed
CapsLockOff
CapsLockOn
EvScrollLockPressed
EvScrollLockPressed
ScrollLockOff
ScrollLockOn

Entity Relationship Diagram​

CARstringregistrationNumberstringmakestringmodelNAMED-DRIVERPERSONstringfirstNamestringlastNameintageallowsis

User Journey​

My working dayCatMe
Go to work
Go to workMe
Make tea
Make teaMe
Go upstairs
Go upstairsMeCat
Do work
Do work
Go home
Go homeMe
Go downstairs
Go downstairsMe
Sit down
Sit downMy working day
note

If there's too much space above it's due to a Mermaid bug

Pie Chart​

Key elements in Product X40%46%9%5%Key elements in Product XCalcium [42.96]Potassium [50.05]Magnesium [10.01]Iron [5]

Requirement Diagram​

<<Requirement>>test_reqId: 1Text: the test text.Risk: HighVerification: Test<<Functional Requirement>>test_req2Id: 1.1Text: the second test text.Risk: LowVerification: Inspection<<Performance Requirement>>test_req3Id: 1.2Text: the third test text.Risk: MediumVerification: Demonstration<<Interface Requirement>>test_req4Id: 1.2.1Text: the fourth test text.Risk: MediumVerification: Analysis<<Physical Requirement>>test_req5Id: 1.2.2Text: the fifth test text.Risk: MediumVerification: Analysis<<Design Constraint>>test_req6Id: 1.2.3Text: the sixth test text.Risk: MediumVerification: Analysis<<Element>>test_entityType: simulationDoc Ref: None<<Element>>test_entity2Type: word docDoc Ref: reqs/test_entity<<Element>>test_entity3Type: test suiteDoc Ref: github.com/all_the_tests<<satisfies>><<traces>><<contains>><<contains>><<derives>><<refines>><<verifies>><<copies>>

Gitgraph (Git) Diagram​

mainhotfixdevelopfeatureBfeatureArelease0-ed8d1041-a9f1a5cashabc3-3d147754-a2adba15-6bbf7dd6-bf7309b8-faeaf269-2a926b711-838df2412-1eeb1b114-4dce2ad15-1c63dfc

Mermaid in tabs​

The following mermaid diagram is shown:

a
10
b