Mermaid live editor alternative

mermaid.live is the reference editor for Mermaid. It is free, open source under MIT, and renders every diagram type that Mermaid.js renders. This page compares it with the visual editor at mermaid.reactmarkdownkit.com, which adds a drag and drop canvas and a layout comment, and supports flowcharts only.

The short version: if you edit flowcharts and want to move boxes with the mouse, try the canvas. If you need any other diagram type, stay on mermaid.live.

Side by side​

Every fact about mermaid.live below comes from its repository, mermaid-js/mermaid-live-editor. Every fact about this editor links to the code or test that backs it.

What the canvas changes​

Mermaid has no syntax for where a box sits, how big it is, or how an edge bends. mermaid.live recomputes the layout every time. This editor writes the geometry as 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 itself, with no Mermaid.js. The output is a <figure data-rmk-diagram> holding an SVG with no script, no event attribute, no foreignObject and no external reference, asserted by extension.test.tsx.

Open either example on the canvas: the three nodes in the visual editor.

Who should stay on mermaid.live​

Be honest with yourself before switching. Stay on mermaid.live if any of these apply.

• You use any diagram type other than flowcharts. Sequence, class, state, ER, Gantt, pie, mindmap, timeline and the rest render there and not here.
• You rely on flowchart features outside the subset. classDef, class, click and linkStyle are ignored by this plugin, and subgraph groups are read but not drawn. The full subset is listed in the plugin reference.
• You want pixel-identical output to GitHub. GitHub renders fences with Mermaid.js. This plugin draws its own SVG, so shapes and spacing differ.
• You need a viewer-only link or an SVG download from the editor. Both exist on mermaid.live. Here the link always opens the editor, and the SVG comes from the renderer in your own app.

This is what a sequence diagram does in this editor: it stays a code block.

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

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 paste flowcharts from AI chats or wikis and fix their layout by dragging instead of rewriting the text.
• You render Markdown with React and want the same fence to become static SVG with no Mermaid.js in the bundle.
• You want the diagram, positions included, to stay in the Markdown file and in version control, as one comment line.

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. mermaid.reactmarkdownkit.com 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. It supports flowcharts only.

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

Yes. The visual editor at mermaid.reactmarkdownkit.com 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?

No. The plugin renders flowcharts only. Sequence, class, Gantt, pie and every other Mermaid diagram type stay ordinary code blocks. 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