Product guide

Write Mermaid, keep the source in sync, and export when it is ready.

SmoothMermaid is a code-first workspace for Mermaid diagrams. Write the source, generate a first draft from a prompt, preview the result as you type, and edit supported Flowcharts on the canvas. The Mermaid source stays the single source of truth.

Open the workspace →

Create a diagram in four steps

Choose a starting point

Pick one of the built-in templates, paste an existing Mermaid diagram, or describe the diagram in a prompt.

Write or generate the source

Edit the Mermaid code in the editor. The preview renders SVG as you type. If a change contains an error, the previous diagram stays on screen until the code is valid again.

Edit supported Flowcharts visually

When a Flowchart passes the canvas safety checks, you can select, rename, add, delete, and connect its elements. Each change is written back to the Mermaid source.

Export the result

Download an SVG for scalable output, or a PNG for documents and messages. Signed-in users can also keep version history and share hosted images.

Which diagrams can be edited visually

Diagram type	Source editor	Visual canvas
Flowchart	Full support with live preview	Supported after the source passes the canvas safety checks
Sequence, class, ER, Gantt, and other types	Full support with live preview	Not available; edit the source

The safety checks protect the source. If a Flowchart uses syntax the canvas cannot edit safely, the visual editing tools are not offered for it, and the source remains fully editable.

Where the workflow helps

Architecture and system design

Keep service flows and component diagrams as Mermaid source next to the code and docs they describe.

Reviews and pull requests

Because the source is plain text, changes to a diagram can be read, compared, and reviewed like any other edit.

Documentation and slides

Export SVG for scalable graphics or PNG for image-based documents, without re-drawing the diagram in another tool.

Learning Mermaid

Start from a template, compare the code with the rendered result, and change one line at a time.

Storage and sharing

The Mermaid source is portable: copy it into a README, a wiki, or a repository at any time. Version history and hosted sharing are available after you sign in.

Export the SVG or PNG when you need a file to send. The workspace is the editing surface; the exported image is a snapshot of one version.

Common questions

Can I keep using Mermaid code?

Yes. The Mermaid source is editable and portable, and it is the source of truth for every diagram.

Which diagrams can I start from?

Choose from 19 built-in templates, paste an existing Mermaid diagram, or start from a prompt.

Which export formats are available?

SVG for scalable output and PNG for image-based documents.