UtilHub

Mermaid Diagram Editor

New

Live editor for Mermaid diagrams — flowcharts, sequence diagrams, Gantt charts, ER diagrams, pie charts, and mindmaps. Includes starter templates, theme switching, and SVG/PNG export.

Loading Mermaid…

Frequently Asked Questions

What is Mermaid and what diagram types are supported?

Mermaid is a JavaScript-based diagramming language that lets you create diagrams using text. This editor supports flowcharts, sequence diagrams, Gantt charts, ER diagrams, pie charts, mindmaps, class diagrams, state diagrams, and more.

Can I upload a Markdown file to extract a diagram?

Yes — click 'Load .md' to upload any Markdown file. The editor will automatically extract the first ```mermaid code block it finds and load it into the editor, ready to preview and export.

Can I use Mermaid diagrams in GitHub markdown?

Yes. GitHub natively renders Mermaid diagrams in markdown files, issues, and pull requests. Wrap your Mermaid code in a fenced code block with the language set to 'mermaid' and GitHub will render it as a diagram automatically.

How do I export my diagram for use in documents or presentations?

You can download your diagram as an SVG file for scalable vector graphics or as a PNG image for raster use. SVG is recommended for documents and web pages since it scales without losing quality. PNG is better for presentations and image editors.