Diagrams

Etonym draws Mermaid diagrams. The note keeps the diagram as text, so it diffs and merges like any other line, and it renders on GitHub and GitLab too.

Write a diagram

Put the diagram in a fenced code block whose language is mermaid:

```mermaid
flowchart LR
  Draft --> Review --> Commit
```

When the cursor is outside the block, Etonym shows the drawing. Click the drawing, or move the cursor into the block, to edit the text. The drawing updates shortly after you stop typing.

A block without its closing ``` is not drawn. Blocks inside lists and quotes work.

Etonym uses Mermaid 11. Flowcharts, sequence, class, state and entity-relationship diagrams, Gantt charts, pie charts, mind maps, user journeys and Git graphs all draw.

Copying a drawn diagram copies its text, not a picture.

When a diagram has an error

Etonym shows Mermaid could not draw this diagram: with the first line of Mermaid’s message in place of the drawing. Your text is not changed.

Drawn on your PC

Mermaid is built into Etonym. Diagrams are drawn on your PC, with no network request. Clicks and scripts inside a diagram do nothing. Colors follow the app’s light or dark theme.

PlantUML is not supported. A plantuml block shows as code.