Mermaid Editor
Edit mermaid charts and diagrams effortlessly with this free online editor.
Write and preview Mermaid diagrams in real time. Create flowcharts, sequence diagrams, Gantt charts, and more for technical documentation and wikis.
Mermaid Editor
Edit mermaid charts and diagrams effortlessly with this free online editor.
About this tool
Write and preview Mermaid diagrams in real time. Create flowcharts, sequence diagrams, Gantt charts, and more for technical documentation and wikis.
FAQ
Common questions and answers about this topic.
What is Mermaid?
Mermaid is a text-based diagramming language that renders flowcharts, sequence diagrams, class diagrams, and more from Markdown-like syntax. It is widely used in GitHub, GitLab, and technical documentation.
What diagram types are supported?
Flowcharts, sequence diagrams, class diagrams, state diagrams, entity-relationship diagrams, Gantt charts, pie charts, and more. The editor supports all diagram types available in the Mermaid library.
Can I export the diagram?
Yes, you can download the rendered diagram as an image for use in presentations, documentation, or other projects.
Is my data sent to any server?
No, Mermaid diagram rendering runs entirely in your browser. Your diagram code is parsed and rendered locally with JavaScript — nothing is sent to any server.
How do I write Mermaid syntax?
Start by declaring the diagram type (e.g., flowchart TD, sequenceDiagram, classDiagram). Then define nodes, connections, and labels using Mermaid's text-based syntax. Use the built-in templates to explore different diagram types.
Can I use Mermaid in GitHub or Markdown?
Yes, GitHub, GitLab, Notion, and many Markdown renderers natively support Mermaid code blocks. Simply wrap your diagram code in a ```mermaid fenced code block, and it will be rendered as a diagram.