featured image
informationcategory

Mermaid Diagrams

Generate mermaid diagrams in blog posts.

Chris Tham Chris Tham Sat Aug 20 2022 00:00:00 GMT+0000 (Coordinated Universal Time) 1 min read
#mermaid #diagram #flowchart #sequence #class #ER

Simple Example

Start
Stop

flowchart

Link text
One
Two
Hard edge
Round edge
Decision
Result one
Result two

Sequence Diagram

JohnBobAliceJohnBobAliceloop[Healthcheck]Rational thoughts prevail!Hello John, how are you?Fight against hypochondriaGreat!How about you?Jolly good!

Class Diagram

Cool
Where am i?
Cool label
Class01
int chimp
int gorilla
size()
AveryLongClass
Class03
Class04
Class05
Class06
Class07
Object[] elementData
equals()
Class08
Class09
C2
C3

Entity Relationship Diagram

CUSTOMERORDERLINE-ITEMDELIVERY-ADDRESSplacescontainsuses

State Diagram

Still
Moving
Crash

Gantt Chart

2014-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
Prev
Sample Gallery post (MDX)
Next
Sample Carousel