Mermaid Git diagram example

Light

A tiny example site showing a gitGraph rendered by Mermaid.

stateDiagram direction TB accTitle: This is the accessible title accDescr: This is an accessible description classDef notMoving fill:white classDef movement font-style:italic; classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow [*] --> Still:::notMoving Still --> [*] Still --> Moving:::movement Moving --> Still Moving --> Crash:::movement Crash:::badBadEvent --> [*]
How this works
  1. Mermaid is loaded from the CDN.
  2. The page initializes Mermaid and asks it to render any elements with .mermaid.
  3. Edit the code inside the .mermaid block and reload to see changes.