# Diagrams

Fence a block with ```` ```mermaid ```` and wander draws it. Click a diagram to edit its source; the toggle in the corner switches between the drawing and the text. Everything renders on your Mac, no network, and the file stays plain markdown any tool can read.

## A flowchart

```mermaid
graph TD
  capture[a thought] --> inbox
  capture --> daily[today's note]
  inbox --> sorted{sort later}
  sorted --> projects
  sorted --> archive
```

## A sequence

```mermaid
sequenceDiagram
  participant You
  participant wander
  You->>wander: type markdown
  wander->>wander: render as you write
  wander-->>You: file saved, byte for byte
```

## A state machine

```mermaid
stateDiagram-v2
  [*] --> Draft
  Draft --> Review: share
  Review --> Draft: comments
  Review --> Done: resolve
  Done --> [*]
```

Mermaid speaks many dialects, flowcharts, sequences, states, pie charts, timelines. The full reference lives at mermaid.js.org.

## A diagram of its own

A diagram does not have to live inside a note. Save one as a `.mermaid` file and wander opens it as a diagram, with its source beside it: see [[pipeline]]. The eye and split buttons switch between the drawing and the text, exactly as they do for a typst paper or a csv.

`.mmd` files open the same way. They stay plain text, so mermaid.live, GitHub and everything else read them unchanged.