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
Drag it. The text keeps up.
