Creating Diagrams with Mermaid
Mermaid is a text-based diagramming language that turns plain text descriptions into flowcharts, sequence diagrams, entity-relationship diagrams, Gantt charts, and more. Because diagrams are defined as text, they live in version control alongside your code — no more hunting for the PowerPoint file with the architecture diagram.
Our online editor renders Mermaid diagrams in real time as you type. No installation required, no account needed. Write the diagram definition, see it rendered immediately, and export as SVG for documentation, wikis, or presentations. GitHub, GitLab, Notion, and Obsidian all render Mermaid natively in Markdown.
Mermaid is widely used for system architecture diagrams, API sequence flows, database schema diagrams, and project timelines. Keeping diagrams as text means they're searchable, diffable, and always in sync with the code they describe.
Tips
- Start every diagram with the type keyword:
flowchart LR,sequenceDiagram,erDiagram,gantt. - GitHub Markdown renders Mermaid inside
```mermaidcode fences natively since 2022. - Use
LR(left-right) for wide flowcharts,TD(top-down) for hierarchy diagrams. - Mermaid is a VS Code extension away — install "Markdown Preview Mermaid Support" for live preview in your editor.