Edit and preview
Start with valid Mermaid syntax and check the rendered structure while changing the source. Parser feedback helps locate syntax problems.
Loading diagram preview...
Edit diagrams from source
Mermaid Online Editor
Paste Mermaid code, inspect the live diagram, and export SVG or PNG in the editor above. Choose a focused tool below when you need help with one diagram type. The same workspace draft continues across the Mermaid tools and the general editor.
Work with the source and the diagram together
Use the source as the maintainable version of your diagram. The preview helps you check labels, branches, and relationships before publishing an image.
Keep a working draft
The browser restores the draft for the current workspace. This is local continuity, not a substitute for saving a project or keeping a source copy.
Adjust the output theme
Choose a Mermaid theme and check contrast against the background where the diagram will be used.
Use AI in this workspace
The chat panel can help create or revise source. AI usage depends on account access and limits; saving a project requires sign-in.
Go from Mermaid source to a usable diagram
Start small enough to inspect each connection. Add detail after the first version renders and answers the intended question.
- 01
Choose the syntax
Use a declaration such as flowchart LR, sequenceDiagram, classDiagram, erDiagram, stateDiagram-v2, or gantt. Paste source without the surrounding Markdown code fence.
- 02
Check the diagram
Resolve syntax feedback, then inspect direction, labels, and the meaning of each relationship. Successful rendering does not prove business logic is correct.
- 03
Deliver and retain it
Click the SVG or PNG button at the top right of the preview, share the current draft, or sign in to save a project. Keep the source so structural changes remain easy.
Choose SVG or PNG for the destination
Keep the Mermaid source in either case. The exported image is the published result, not the source model.
SVG for scalable display
Use SVG where supported by a README, documentation site, or webpage. Check fonts and labels in the actual viewer; full editing in a design application is not guaranteed.
Mermaid to SVG →PNG for image attachments
Use PNG where the destination requires a raster image. It has fixed pixels and a filled background: dark with the dark theme, white with other themes. Custom size and transparency are not options here.
Mermaid to PNG →Drafts, saving, sharing, and supported syntax
Can I edit Mermaid without signing in?
You can edit source, preview diagrams, choose themes, and download SVG or PNG without signing in. Saving a project requires sign-in; AI access depends on account and usage limits.
Why do I see my previous diagram on another tool page?
Mermaid tool pages and the general editor share the current workspace draft in this browser. Existing source takes priority over page examples, so opening a focused tool does not overwrite your work.
Is the restored browser draft the same as a saved project?
No. A browser draft helps resume work locally and can be lost if browser storage is cleared. Sign in and save a project for account-based access, and keep a separate source copy when needed.
Which Mermaid diagram syntax should I start with?
Use flowchart for process paths, sequenceDiagram for ordered messages, classDiagram for software types, erDiagram for database relationships, stateDiagram-v2 for lifecycles, and gantt for dated schedules. Newer syntax may require a Mermaid version not yet used by this editor.
What does sharing a draft do?
For an unsigned-in user, sharing the current diagram creates a snapshot of that diagram. Later edits do not update that snapshot. Saved project sharing is a separate workflow with explicit diagram selection.
Can I use AI without opening a different editor?
The chat panel is available in the workspace on this page. Use it to create or revise diagram source, subject to account access, model availability, and usage limits. Review the generated source and diagram before relying on them.