# Mermaid visual editor limits

The visual editor covers the common gestures, not the whole of Mermaid. Anything structural that a canvas cannot express cleanly is left to the code pane, which is the honest design.

Subgraphs are the main example: they can be rendered but are not fully manipulable on canvas.

---

## What this is for

* Wondering why something is not draggable.
* Editing a diagram with subgraphs or advanced directives.
* Deciding which editing mode to use for a given diagram.

---

## How it works

| **Action**                   | **How**                                                     |
| ---------------------------- | ----------------------------------------------------------- |
| Subgraphs                    | Rendered, but restructuring them belongs in the code pane.  |
| Directives and configuration | Code pane only.                                             |
| Unsupported types            | No visual editor button at all.                             |
| Advanced styling             | Class definitions and themes are code pane work.            |
| Everything else              | Nodes, edges, labels, shapes and colours are all on canvas. |

---

## A few things that catch people out

* The code pane is always available, so nothing is actually blocked.
* If a diagram is mostly subgraphs, the code pane will be faster anyway.
* The limits are about what maps cleanly onto a gesture, not about what Mermaid can express.

---

## Related

[Mermaid visual editor shortcutsSix keys, and Alt.](https://help.gocapable.com/diagrams/mermaid-visual-editor-shortcuts.html)

[Fix Mermaid visual editor problemsMissing buttons and differing canvases.](https://help.gocapable.com/diagrams/fix-mermaid-visual-editor-problems.html)

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

---

_Drag it. The text keeps up._