Flowchart to Mermaid

This page is about turning a drawing into Mermaid text. You draw the flowchart on the canvas at reactmarkdownkit.com/mermaid-editor, and the editor writes the Mermaid flowchart syntax as you go. It can't read an image, a photo or a PDF of a flowchart, so if all you have is a picture, you'll need to redraw it on the canvas and copy the text. Three boxes and two arrows takes five drags.

The canvas described here is for flowcharts. The plugin behind it, @react-markdown-kit/mermaid, also renders sequence diagrams as static SVG and has a separate canvas for editing them. Class, Gantt and the other Mermaid diagram types are shown as source (mermaid-parse.test.ts). The editor is free and MIT licensed, and it runs in your browser without an account.

Draw a three-step flowchart​

This walks through drawing Start, Work and Done, joined by two arrows. If you want to see how the keyboard handling works, it's in drawing-canvas.tsx and text-edit-overlay.tsx.

1. Open the editor. It loads with an example diagram, so clear that first. Click the canvas on the right to focus it, press Ctrl+A (Cmd+A on macOS) to select every shape, then press Delete. The code pane on the left should now read flowchart LR plus an empty layout line.
2. Pick Rectangle in the canvas toolbar and drag on the canvas. The new box stays selected. Press Enter, type Start, and press Enter again to commit the text. You can also double-click a box to edit its text.
3. Repeat step 2 twice, to the right of the first box, with Work and Done.
4. Pick Arrow and drag from inside the Start box to inside the Work box. The arrow attaches to the boxes it starts and ends on, and follows them if you move them. Draw a second arrow from Work to Done.
5. Copy the text from the Mermaid code pane on the left. Every drag has already been written there. Copy as Mermaid in the canvas toolbar copies the same text.

You should end up with something like this in the code pane, with generated node ids and the layout line the canvas writes. The right-hand side below is the plugin rendering that same text on this page as static SVG.

```mermaid
flowchart LR
    smfr1a2b0["Start"]
    smfr1a2c1["Work"]
    smfr1a2d2["Done"]
    smfr1a2b0 --> smfr1a2c1
    smfr1a2c1 --> smfr1a2d2
    %% rmk-layout v1 {"canvasHeight":220,"nodes":{"smfr1a2b0":{"x":40,"y":60,"width":160,"height":80,"strokeWidth":2},"smfr1a2c1":{"x":280,"y":60,"width":160,"height":80,"strokeWidth":2},"smfr1a2d2":{"x":520,"y":60,"width":160,"height":80,"strokeWidth":2}},"edges":{"smfr1a2b0->smfr1a2c1":{"id":"smfr1a2e3","x":200,"y":100,"width":80,"height":0,"stroke":"#1e1e1e","fill":"transparent","strokeWidth":2},"smfr1a2c1->smfr1a2d2":{"id":"smfr1a2f4","x":440,"y":100,"width":80,"height":0,"stroke":"#1e1e1e","fill":"transparent","strokeWidth":2}}}
```

For a README you'll probably want to rename the ids and drop the layout line. That gives you the shortest Mermaid that draws the same flowchart, and any Mermaid renderer will lay it out automatically. You can edit the left pane below to try it.

If you rename an id in the syntax but keep the layout line, the entry under the old id doesn't match anything anymore and gets ignored, so that box goes back to automatic layout (LAYOUT_ANNOTATION.md, section 6, rule 7).

The diagrams above aren't screenshots. The plugin renders them from the text shown next to them.

Where the output works​

The canvas writes ordinary Mermaid flowchart syntax, so the fence should render anywhere Mermaid fences render. Each host below documents its ```mermaid support on its own site.

The layout line starts with %%, which Mermaid defines as a comment. Those hosts skip the line and render the flowchart with their own automatic layout. The plugin reads it back and redraws it the way you drew it. The round trip is covered by layout-annotation.test.ts.

In React, the same fence becomes static SVG without any script, event attribute, foreignObject or external reference, which is checked in extension.test.tsx. The package doesn't depend on Mermaid.js (package.json).

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​

Can I convert an image of a flowchart to Mermaid?

Not here, no. The editor converts a drawing you make on its canvas into Mermaid text. It has no image recognition, so it cannot read a PNG, a photo or a PDF of a flowchart. Redraw the flowchart on the canvas and copy the Mermaid it writes.

How do I turn a flowchart into Mermaid syntax?

Open the editor at reactmarkdownkit.com/mermaid-editor, draw boxes with the Rectangle tool, connect them with the Arrow tool, and type the text of each box. The code pane on the left holds the Mermaid flowchart as you draw. Copy it from there, or with Copy as Mermaid in the canvas toolbar.

Does the layout survive in other tools?

The positions are stored in one %% rmk-layout v1 comment on the last line of the fence. Mermaid treats a %% line as a comment, so GitHub, GitLab, Notion and Obsidian render the flowchart with their own automatic layout and ignore the line. The React Markdown Kit plugin reads the line back and reproduces the drawing exactly.

Next​

Draw a flowchart in the editor · @react-markdown-kit/mermaid on npm · Mermaid Live Editor alternative · Mermaid in React Markdown · Fix AI-generated Mermaid · Mermaid plugin reference · Source on GitHub