# Open the Mermaid visual editor

Mermaid diagrams have a second editing mode: a canvas where you can drag nodes, draw connections and rename things, with every gesture written back into the source.

It is the bridge between the two ways of working. Text people keep their diffs; canvas people get to drag.

![image-20260907-090440.png](https://help.gocapable.com/images/9b6088c6-6139-4be2-b6d0-27686d95da10.webp)

---

## What this is for

* Editing a Mermaid diagram without writing syntax.
* Rearranging a diagram somebody else wrote.
* Showing a Mermaid diagram to somebody who will not touch the source.

---

## How it works

| **Action**   | **How**                                                                    |
| ------------ | -------------------------------------------------------------------------- |
| Open it      | Switch from the static preview to the visual editor in the editor toolbar. |
| Go back      | Switch back to the code view at any time; the source is already updated.   |
| Availability | Only for the Mermaid types the visual editor supports.                     |
| The source   | Remains the source of truth throughout.                                    |

---

## A few things that catch people out

* Not every Mermaid type can be edited visually. The button is absent for the ones that cannot.
* The source is always authoritative. The canvas is a view onto it, not a replacement for it.
* Anything the canvas cannot express is still editable in the code pane.

---

## Related

[Mermaid types you can edit visuallySeven of them, and why not all.](https://help.gocapable.com/diagrams/mermaid-types-you-can-edit-visually.html)

[Select, move and rename on canvasThe three gestures you need first.](https://help.gocapable.com/diagrams/select-move-and-rename-on-canvas.html)

[Mermaid visual editorBack to the editor overview.](https://help.gocapable.com/diagrams/mermaid-visual-editor.html)

---

_Drag it. The text keeps up._