Mermaid Diagram Renderer

Mermaid is a JavaScript-based diagramming tool that renders text definitions into diagrams. You write diagram syntax in a code-like format, and Mermaid generates flowcharts, sequence diagrams, ER diagrams, Gantt charts, class diagrams, and more. It's widely supported in GitHub, GitLab, Notion, and many documentation tools.

Use the flowchart keyword followed by direction (TD=top-down, LR=left-right, RL=right-left, BT=bottom-top). Nodes use square brackets for rectangles, round brackets for rounded, curly braces for diamonds (decisions). Connect with --> for arrows or --- for lines. Example: flowchart TD; A[Start] --> B{Decision}; B -->|Yes| C[Done]

Mermaid supports: flowchart, sequenceDiagram, classDiagram, stateDiagram, erDiagram, journey, gantt, pie, quadrantChart, requirementDiagram, gitGraph, C4Context, mindmap, and timeline. Each has its own syntax described in the Mermaid documentation.

Yes! GitHub natively renders Mermaid diagrams in Markdown files. Wrap your Mermaid code in a fenced code block with the 'mermaid' language identifier. This works in README.md, issues, pull requests, and wiki pages.

Click the 'Download SVG' button above the preview. SVG is a vector format that scales perfectly at any size. To convert to PNG, open the SVG in a browser, right-click and save as PNG, or use a tool like Inkscape or the online svg2png converter.