SmoothMermaid

Code-first diagram workspace

Mermaid diagrams, with code and a canvas in sync.

Write Mermaid, start from a prompt, then safely edit Flowcharts visually. The source stays portable and readable.

Open Mermaid workspace →

Mermaid source

flowchart LR
  Draft --> Review
  Review --> Publish

Flowchart canvas

Built for technical work

A diagram should stay useful after the meeting.

Use the fastest interface for the moment without giving up clean source, versionable changes, or a dependable export.

Code stays portable

Mermaid source remains the canonical artifact: readable in reviews, copyable into docs, and safe to keep in version control.

Edit Flowcharts visually

Select, rename, add, delete, and connect Flowchart elements when the current syntax passes the canvas safety checks.

Move from idea to export

Start from code or a prompt, preview the result live, then export SVG or PNG when the diagram is ready to travel.

One workspace

Choose the shortest path to a clear diagram.

01

Write

02

Generate

03

Edit visually

04

Export

Documentation

Start with the diagram you need to explain.

Flowchart guideSequence diagram guideClass diagram guideER diagram guideGantt chart guideMermaid tutorial

FAQ

Clear boundaries make a better tool.

Can I keep using Mermaid code?

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

Which diagrams support visual editing?

Supported Flowcharts can be edited visually after their Mermaid source passes the canvas safety checks. Other diagram types remain fully editable in the source editor.

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?

Export diagrams as SVG for scalable output or PNG for image-based documents.