Skip to main content

Mermaid

Draws text-based diagrams such as flowcharts, sequence diagrams, and state diagrams. All you need to do is write a code block in the mermaid language in a field.

Syntax​

```mermaid
graph TD
  A --> B
  B --> C
```

What it's for​

Useful whenever you want to visualize a process, a decision tree, a relationship diagram, or a sequential interaction: flowcharts, sequence diagrams, state machines, Gantt charts, and more are all supported.

Source​

Mermaid's own syntax reference: mermaid.js.org. Tsunagi supports every diagram type described on that page; you can use the syntax there as-is.

Tsunagi-specific note​

Unlike the other JS-based visuals, Mermaid diagrams are rendered entirely offline: Mermaid's own JavaScript never runs. A native engine (merman) converts the source text into SVG, and the WebView just displays that SVG. This makes no practical difference to you as a user, but it's useful to know that it doesn't require an internet connection.