# 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

[Mermaid source round tripThe text is always the truth.](https://help.gocapable.com/diagrams/mermaid-source-round-trip.html)

[Mermaid visual editor limitsWhat it leaves to the code pane.](https://help.gocapable.com/diagrams/mermaid-visual-editor-limits.html)

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

---

_Drag it. The text keeps up._