Mermaid Diagram Generator

Mermaid is a JavaScript-based diagramming language that turns text into diagrams. It's supported natively in GitHub Markdown, GitLab, Notion, Obsidian, and VS Code (with extensions). You can also embed it in any webpage using the mermaid.js library. Great for documentation-as-code.

Flowchart (processes, decisions, branching), Sequence diagram (actor/system interactions over time), Class diagram (OOP relationships and methods), ER diagram (database entity-relationship), and Gantt chart (project timelines with task dependencies). The editor includes a working example for each type.

In any GitHub Markdown file (.md), wrap the Mermaid code in triple backtick blocks with 'mermaid' as the language: ```mermaid (newline) your diagram code (newline) ```. GitHub renders these automatically in .md files, issues, and pull request descriptions.

In Mermaid flowcharts: --> is a normal arrow, --- is a line without arrow, -- text --> adds a label, ==> is a thick arrow, and -.-> is a dotted arrow. Node shapes: [Rectangle], (Rounded), {Diamond for decisions}, ((Circle)), >Asymmetric]. Flowchart direction: TD (top-down), LR (left-right), RL (right-left), BT (bottom-top).

Right-click the rendered SVG and choose 'Save image as' to download as SVG. For PNG export, you can use the mermaid CLI (npm install -g @mermaid-js/mermaid-cli then mmdc -i diagram.md -o diagram.png) or paste your code into Mermaid Live Editor at mermaid.live for more export options.

Common errors: incorrect indentation (use spaces, not tabs), missing diagram type keyword on the first line (e.g. flowchart TD), unmatched brackets or quotes, or invalid keywords. Check the error message in the preview panel — it usually points to the problematic line.