Mermaid live editor alternative

mermaid.live is the reference editor for Mermaid. It's free, MIT licensed, and renders every diagram type Mermaid.js renders. This page compares it with the visual editor at reactmarkdownkit.com/mermaid-editor, which adds a drag and drop canvas for flowcharts and sequence diagrams (plus a layout comment for flowcharts).

If you mostly edit flowcharts or sequence diagrams and want to move things around with the mouse, the canvas is probably worth a try. If you need any other diagram type, you're better off staying on mermaid.live.

Side by side​

The mermaid.live details below come from its repository, mermaid-js/mermaid-live-editor. For this editor, each row links to the code or test behind it.

What the canvas changes​

Mermaid has no syntax for where a box sits, how big it is, or how an edge bends, so mermaid.live recomputes the layout every time. This editor writes the geometry into one %% comment, which Mermaid defines as a comment, so the text you paste into a host that renders fences with Mermaid.js, such as GitHub, still renders there (host documentation), and the plugin restores your positions when it reads the same text back.

```mermaid
flowchart LR
    a[Start] --> b[Work]
    b --> c[Done]
```

```mermaid
flowchart LR
    a["Paste from mermaid.live"]
    b(["Drag on the canvas"])
    c["Copy Mermaid back"]
    a --> b
    b -->|layout comment| c
    style b fill:#b2f2bb,stroke:#2f9e44
    %% rmk-layout v1 {"canvasHeight":200,"nodes":{"a":{"x":24,"y":20,"width":190,"height":70,"strokeWidth":2},"b":{"x":260,"y":110,"width":190,"height":70,"strokeWidth":2},"c":{"x":500,"y":20,"width":170,"height":70,"strokeWidth":2}},"edges":{"a->b":{"routing":"elbow","elbow":0.5},"b->c":{"routing":"elbow","elbow":0.5}}}
```

Both examples are rendered on this page by the plugin, without Mermaid.js. The output is a <figure data-rmk-diagram> holding an SVG that has no script, event attribute, foreignObject or external reference, which is checked in extension.test.tsx.

You can open the three nodes on the canvas in the visual editor.

Who should stay on mermaid.live​

I'd stay on mermaid.live if any of these apply to you.

• You use a diagram type other than flowcharts and sequence diagrams. Class, state, ER, Gantt, pie, mindmap, timeline and the rest render there and not here.
• You rely on flowchart features outside the supported subset. This plugin ignores classDef, class, click and linkStyle, and it reads subgraph groups but doesn't draw them. The full subset is listed in the plugin reference.
• You need output that matches GitHub pixel for pixel. GitHub renders fences with Mermaid.js, and this plugin draws its own SVG, so shapes and spacing will look different.
• You need a viewer-only link or an SVG download from the editor. mermaid.live has both. Here the link always opens the editor, and you get SVG from the renderer in your own app.

For reference, here's how a sequence diagram behaves in this editor. It renders as static SVG and opens on the sequence canvas, where you drag participants, messages, notes and frames around and the text gets written back as plain Mermaid.

```mermaid
sequenceDiagram
    Alice->>Bob: Hello
    Bob-->>Alice: Hi
```

Who should try the canvas​

• You edit flowcharts and want to move boxes and route connectors by hand.
• You edit sequence diagrams and would rather reorder messages and participants by dragging.
• You paste flowcharts from AI chats or wikis and want to fix the layout by dragging things around, without rewriting the text.
• You render Markdown with React and want the same fence to become static SVG without pulling Mermaid.js into the bundle.
• You want the positions to live in the Markdown file (and in version control) as one comment line next to the diagram.

npm install @react-markdown-kit/renderer @react-markdown-kit/mermaid

import Markdown, { defineMarkdownPreset } from '@react-markdown-kit/renderer'
import { mermaid } from '@react-markdown-kit/mermaid'

const preset = defineMarkdownPreset({ extensions: [mermaid()] })

<Markdown preset={preset}>{content}</Markdown>

FAQ​

Is there a Mermaid live editor with drag and drop?

Yes. reactmarkdownkit.com/mermaid-editor puts a drawing canvas next to the code pane. Drag a box or a connector and the Mermaid text updates, with the positions stored in one %% rmk-layout v1 comment. The canvas opens flowcharts and sequence diagrams; a sequence diagram writes plain Mermaid with no layout comment.

Is there an open source Mermaid editor besides mermaid.live?

Yes. The visual editor at reactmarkdownkit.com/mermaid-editor is the MIT licensed @react-markdown-kit/mermaid plugin running in the browser. The source is on GitHub at mahuzedada/react-markdown-kit. mermaid.live is also open source, under MIT.

Does the Mermaid visual editor support sequence diagrams?

Yes. A sequence diagram opens on its own canvas: add and reorder participants, draw a message from one lifeline to another, drag messages and notes into order, wrap them in loop, alt, opt, par, critical, break or rect frames and set activation and autonumber. The text written back is plain Mermaid with no layout comment. Class, Gantt, pie and every other Mermaid diagram type is shown as source. For those, stay on mermaid.live, which renders every type through Mermaid.js.

Next​

Open the visual editor · @react-markdown-kit/mermaid on npm · Source on GitHub

Mermaid in React Markdown · Flowchart to Mermaid · Fix AI-generated Mermaid · Plugin reference