Free Online Mermaid Visual Editor

Install

npm install @react-markdown-kit/mermaid

That’s everything you need to render diagrams and use the canvas. npm installs the renderer for you. If you also want to edit diagrams inside a Markdown editor, step 3 below shows how.

Since it never loads Mermaid.js, it works in server components and static builds too.

Using the canvas on its own

The editor you’re using on this page is the standalone canvas. You give it Mermaid and it gives you Mermaid back (you don’t need a Markdown editor for this). It fills whatever container you put it in.

In a React app:

import { MermaidCanvas } from '@react-markdown-kit/mermaid/canvas'
import '@react-markdown-kit/mermaid/styles.css'

<div style={{ height: 600 }}>
  <MermaidCanvas value={source} onChange={setSource} />
</div>

Or mount it into any element on the page:

import { createMermaidCanvas } from '@react-markdown-kit/mermaid/canvas'

const canvas = createMermaidCanvas(document.getElementById('diagram'), {
  value: 'flowchart LR\n  a[Web] --> b[API]',
  onChange: (source) => save(source),
})

A few things to try on the canvas:

• Double-click a shape or an arrow to type in it. Press Enter for a new line.
• Select a shape to change its colour, stroke width, dashes and corners, or an arrow to change its arrowheads. Cmd+D (Ctrl+D on Windows) makes a copy.
• Shift+click, or drag a box around a few shapes, to select them together. Drag to move them, or pull a handle on the frame to resize them. Hold Alt to resize from the centre.
• Nudge the selection with the arrow keys, and hold Shift for bigger steps.
• Cmd+Z or Ctrl+Z undoes the last change.

Adding Mermaid to your app

1. Render your diagrams. Add mermaid() to your preset and every ```mermaid block in your Markdown turns into an SVG.

   import Markdown, { defineMarkdownPreset } from '@react-markdown-kit/renderer'
   import { mermaid } from '@react-markdown-kit/mermaid'
   import '@react-markdown-kit/mermaid/styles.css'
   
   const preset = defineMarkdownPreset({ extensions: [mermaid()] })
   
   <Markdown preset={preset}>{content}</Markdown>

   Copy
2. Write regular Mermaid. Use the same syntax you’d put in a GitHub README. If a flowchart has no layout saved yet, it gets laid out for you.

   ```mermaid
   flowchart LR
       web[Web App] -->|REST| api[API]
       api --> db[(Postgres)]
       style web fill:#a5d8ff,stroke:#1971c2
   ```

   Copy
3. Edit them on a canvas. Install the editor, then use the mermaid() from the /editor entry in your editor’s preset. When you drag a flowchart around, the plugin saves the positions in a %% rmk-layout v1 comment at the end of the diagram. Other Mermaid tools ignore that comment, so nothing breaks. Sequence diagrams don’t need it at all.

   npm install @react-markdown-kit/editor

   Copy

   import { defineMarkdownPreset } from '@react-markdown-kit/renderer'
   import { MarkdownEditor } from '@react-markdown-kit/editor'
   import { mermaid } from '@react-markdown-kit/mermaid/editor'
   
   const preset = defineMarkdownPreset({ extensions: [mermaid()] })
   
   <MarkdownEditor preset={preset} value={source} onChange={setSource} />

   Copy

About this editor

• The panel on the right is your Mermaid code, and the rest of the window is the canvas. If Mermaid would reject something in your code, the chip next to the title at the top left tells you which line.
• Class, state, Gantt and the other diagram types show up as code, and they’re saved exactly as you wrote them. Your own app can still draw them with Mermaid.js through the plugin’s fallback entry. Delete the layout comment from a flowchart and it goes back to automatic layout.
• The editor demo shows diagrams next to regular Markdown, tables and template variables. If you only need rendering, there’s also the renderer demo.

Adding an “Open in visual editor” badge

Every link to this editor carries the whole diagram inside the URL (#pako:, compressed the same way mermaid.live does it). Nothing gets uploaded and there’s no server involved. Put this in a README and people can open your diagram with one click. To get the snippet for your own diagram, press Share in the editor above.

[![Open in visual editor](https://reactmarkdownkit.com/badge.svg)](https://reactmarkdownkit.com/mermaid-editor#pako:eJyNzMFrwjAUBvD7_orHK4KDFNqgm-Yw6EFw4EF0sEPpIWlSG5qZ0GTWov3fpc6dt9N78P2-rzK2K2veBtjsngAAOiXyTyUgc66AOH677lb7jytwp_Ns-17cDXd6jECKfLq1Phxa5Z9_Ih96o8YRqLQxLOJzuagq4kNrG8WidPmalvQuJxNov5rY8N5-BzilcMGSH0_cr5U-1AEZpQnBo5XKI7tgp8R4zshmCcEe2UtCsNMy1MjS8a8ftWUyEOROPzRd_IPL3-05_VMPww18tFoi)

The badge image lives at /badge.svg. The link in the example above opens this flowchart:

flowchart LR
    web[Web App] -->|REST| api[API]
    api --> db[(Postgres)]
    style web fill:#a5d8ff,stroke:#1971c2
    %% rmk-layout v1 {"canvasHeight":220,"nodes":{"web":{"x":40,"y":60,"width":160,"height":90},"api":{"x":280,"y":60,"width":160,"height":90},"db":{"x":520,"y":60,"width":160,"height":90}}}

To put the editor inside a blog post or a docs page, add ?embed=1 to any link. That hides the rest of the site:

<iframe src="https://reactmarkdownkit.com/mermaid-editor?embed=1#pako:eJyNzMFrwjAUBvD7_orHK4KDFNqgm-Yw6EFw4EF0sEPpIWlSG5qZ0GTWov3fpc6dt9N78P2-rzK2K2veBtjsngAAOiXyTyUgc66AOH677lb7jytwp_Ns-17cDXd6jECKfLq1Phxa5Z9_Ih96o8YRqLQxLOJzuagq4kNrG8WidPmalvQuJxNov5rY8N5-BzilcMGSH0_cr5U-1AEZpQnBo5XKI7tgp8R4zshmCcEe2UtCsNMy1MjS8a8ftWUyEOROPzRd_IPL3-05_VMPww18tFoi" width="100%" height="520" style="border:0" title="Mermaid visual editor" loading="lazy"></iframe>