Mermaid Diagram Editor
Write Mermaid syntax with live SVG preview. Flowcharts, sequence diagrams, ERDs, class diagrams, and Gantt charts all supported.
Preview
About Mermaid Diagram Editor
Write Mermaid diagram syntax with a live SVG preview. Supports all Mermaid diagram types — flowcharts, sequence diagrams, ERDs, Gantt charts, class diagrams, and more. Download the rendered diagram as SVG or copy the source to paste into GitHub, GitLab, Notion, or Obsidian.
Diagrams from other tools
Several tools on this site generate Mermaid syntax that you can send directly to this editor:
- ERD Generator — Salesforce object relationship diagrams.
- Flow Visualizer — Salesforce Flow XML as a flowchart.
- SF Dependencies Viewer — package.xml dependency graph.
- Docker Compose Visualizer — service/network/volume diagram.
Frequently asked
- What is Mermaid?
- Mermaid is a JavaScript-based diagramming language that renders text definitions into SVG diagrams. It is natively supported in GitHub Markdown, GitLab, Notion, Obsidian, and many other tools. You write a diagram in a simple text syntax and Mermaid renders it as a flowchart, sequence diagram, ERD, Gantt chart, or class diagram.
- What diagram types are supported?
- This editor supports all Mermaid diagram types: flowchart (TD/LR/BT/RL), sequence, class, state, entity-relationship (erDiagram), Gantt, pie, quadrant, requirement, gitGraph, mindmap, timeline, and xychart. The preset buttons cover the most common types.
- How do I use the diagram in GitHub or GitLab?
- Wrap the Mermaid source in a fenced code block with the "mermaid" language tag: ```mermaid ... ```. GitHub and GitLab render it automatically in Markdown files, issues, and pull requests. No plugin required.
- Can I export the diagram?
- Yes — click the SVG download button to save the rendered diagram as an SVG file. SVG is vector format so it scales to any size without pixelation. For raster formats (PNG, JPEG), open the SVG in a browser and use the browser's screenshot or print-to-PDF function.
- Why does my diagram show an error?
- Mermaid syntax is strict. Common mistakes: missing quotes around node labels with special characters, incorrect arrow syntax (use --> not ->), indentation issues in sequence diagrams, and unsupported characters in node IDs. The error message from Mermaid usually points to the problematic line.