Diagrams / Math
Mermaid Playground
Render flowcharts, sequence, state, class, ER and gantt diagrams from text.
Runtime: mermaid.js
Mermaid source
Try: flowchart, sequenceDiagram, classDiagram, erDiagram, gantt, stateDiagram-v2
Diagram
About this playground
Mermaid playground using the official mermaid.js library - the same renderer GitHub embeds for ```mermaid code blocks. Edit text on the left, see the diagram live on the right. Library is lazy-loaded the first time you open this page.
FAQs
Which diagram types are supported?
Mermaid's full set - flowchart, sequence, class, state, ER, gantt, pie, journey, gitgraph - all the same syntax that works on GitHub README files.
Is this the same renderer GitHub uses?
Yes - GitHub embeds the official mermaid.js library to render code blocks tagged ```mermaid in markdown.
How big is the download?
Around 2 MB, lazy-loaded so only visitors who open this page pay the cost.