Go from a first draft to a saved Mermaid diagram
Choose a diagram type and add or adjust supported elements with the visual tools. Switch to Mermaid source whenever you want to edit the syntax directly, then check the rendered preview as you work. When the diagram is ready, Save downloads the current source as a .mmd file.
Edit Mermaid diagrams visually or in code
The editor combines a diagram canvas, visual controls, a Mermaid source editor, and a live preview in one workspace. Start with whichever editing style fits the task, then move between them while refining the same diagram.
Use visual editing tools
Choose a diagram type, add elements from its tool palette, and select diagram parts on the canvas to make supported changes.
Edit Mermaid code directly
Write or revise Mermaid syntax in the source editor and review the rendered diagram in the same workspace.
Preview while you work
Review the rendered diagram as you switch between visual adjustments and source edits.
Create many kinds of Mermaid diagrams
Use Mermaid source to work with diagrams supported by Mermaid. Built-in visual tools cover flowcharts, sequence diagrams, class diagrams, state diagrams, entity-relationship diagrams, Gantt charts, pie charts, user journeys, mindmaps, Git graphs, timelines, and quadrant charts.
A free Mermaid editor in your browser
Open the editor without installing a desktop app. Create a diagram with visual tools, paste existing Mermaid code, or combine both approaches. Save exports the Mermaid source, so you can keep editing it in your own project.
Customize the Mermaid editor for your React app
Use @mermaid-editor-sdk/ui to add the editor to a React app, control its source with React state, and handle changes or saves in your own workflow. Keep the ready-made interface, replace selected components, or compose a custom layout from SDK parts. For a fully custom interface, the headless package exposes diagram editing logic without the bundled UI.
Frequently asked questions
Is this Mermaid diagram editor free?
Yes. The online editor is free to use.
Can I edit diagrams without writing Mermaid code?
Yes. Use the visual controls and canvas to create and adjust supported diagram elements. You can also edit the Mermaid source directly at any time.
Which Mermaid diagram types can I use?
The source editor and preview work with Mermaid syntax. Visual tools are available for flowcharts, sequence, class, state, ER, Gantt, pie, user journey, mindmap, Git graph, timeline, and quadrant diagrams.
Can I customize the editor in my React app?
Yes. Use the React UI package as-is, replace selected components, compose a custom editor layout, or use the headless package to build your own interface around the diagram editing logic.