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 Images post
Next
Markdown Cheat Sheet