Markdown Mermaid diagrams

Learn how to create diagrams in Markdown using Mermaid.

2분이면 읽을 수 있어요.
목차

Flowcharts

Yes
No
Start
Is it?
OK
Rethink
End

Sequence diagrams

BobJohnAliceBobJohnAliceloop[HealthCheck]Rational thoughts!Hello John, how are you?1Fight against hypochondria2Great!3How about you?4Jolly good!5

Class diagrams

Animal
+int age
+String gender
+isMammal()
+mate()
Duck
+String beakColor
+swim()
+quack()
Fish
-int sizeInFeet
-canEat()
Zebra
+bool is_wild
+run()
From Duck till Zebra
can fly
can swim
can dive
can help in debugging
Animal example

State diagrams

Still
Moving
Crash
Simple sample

Entity Relationship Diagrams

CUSTOMERORDERLINE-ITEMDELIVERY-ADDRESSplacescontainsusesOrder example

User Journey Diagrams

CatMe
Go to work
Go to work
Me
Make tea
Make tea
Me
Go upstairs
Go upstairs
MeCat
Do work
Do work
Go home
Go home
Me
Go downstairs
Go downstairs
Me
Sit down
Sit down
My working day

Gantt charts

2014-01-052014-01-122014-01-192014-01-262014-02-022014-02-092014-02-16A task Task in Another another task Another task SectionAnotherA Gantt Diagram

Pie charts

79%17%3%Pets adopted by volunteersDogsCatsRats

Mind maps

mindmapOriginsLong history
PopularisationBritish popular psychologyauthor Tony BuzanResearchOn effectivenessand featuresOn Automatic creationUsesCreative techniquesStrategic planningArgument mappingToolsPen and paperMermaid