Mermaid shapes, arrows and colours
Selecting an element brings up a popover with the things worth changing: the node's shape, the arrowheads and line style on an edge, and colour.
Each change is written into the source as Mermaid syntax, so the result is still a normal Mermaid diagram.
#What this is for
Turning a process box into a decision diamond.
Changing an arrow from solid to dashed.
Colouring a node for emphasis.
#How it works
Action | How |
|---|---|
Node shape | The popover offers the Mermaid shapes: rectangle, rounded, diamond, cylinder and the rest. |
Arrow head | Change the head style on an edge. |
Line style | Solid, dashed or dotted. |
Colour | Applied as Mermaid class or style syntax in the source. |
Undo | Standard undo; every change is a source change. |
#A few things that catch people out
Colour is written as style or class syntax, which stays readable in the code pane.
Shapes map to Mermaid bracket syntax, so the source stays idiomatic.
Anything the popover does not offer can still be typed in the code pane.
#Related
Drag it. The text keeps up.
