flows · examples

Diagrams#

Every picture on this page is a ```mermaid fence in the page's markdown: the same text GitHub, Obsidian and Notion read. flows draws it with Pele, Obsidian's open source renderer: no DOM to lay it out, well under a millisecond a diagram, and colours taken from this page's theme. The sun and moon up top switch between light and dark: the diagrams change with the page, and nothing is drawn again. Beside them, the same page drawn by Mermaid, to compare.

From a draft to a reader#

flowchart LR
  write([You write in markdown]) --> save[Saved as you type]
  save --> who{Who reads it?}
  who -- only you --> private[Private]
  who -- people you invite --> shared[Shared]
  who -- everybody --> public[Public]
  public --> readers([Readers])
  public --> search([Search engines])
  public --> agents([AI agents, as markdown])

An agent writes a page#

Claude, ChatGPT or Cursor reach your pages through flows' MCP server, with only the access you gave them.

sequenceDiagram
  autonumber
  actor You
  participant Claude
  participant flows
  You->>Claude: Draft the post
  Claude->>flows: read notes
  flows-->>Claude: markdown
  Claude->>flows: write post
  Note over flows: saved, private
  You->>flows: edit, publish
  Note over flows: public

One page, two devices#

Edited on the phone and on the laptop at once? The second save does not overwrite the first: you review the two versions, chunk by chunk, and keep what you want.

%%{init: { "gitGraph": { "mainBranchName": "laptop" } } }%%
gitGraph TB:
  commit id: "draft"
  branch phone
  checkout phone
  commit id: "fix a typo"
  checkout laptop
  commit id: "add a section"
  merge phone id: "review: keep both"
  commit id: "publish"

Who can read a page#

stateDiagram-v2
  direction LR
  [*] --> Private
  Private --> Shared: invite people
  Shared --> Public: publish
  Private --> Public: publish
  Public --> Private: unpublish

A collection is rows inside a page#

erDiagram
  SPACE ||--o{ PAGE : holds
  PAGE ||--o{ PAGE : "pages inside"
  PAGE ||--o| COLLECTION : "may hold"
  COLLECTION ||--o{ ROW : has
  PAGE ||--o{ VERSION : keeps

What a page can be#

mindmap
  root((a flows page))
    Site
      Landing page
      Pricing
      Blog
    Docs
      Guides
      Changelog
    Course
      Lessons
      Flashcards
    Collection
      Table
      Board
      Calendar
    Newsletter
    Link in bio

Planning and tracking#

kanban
  ideas[Ideas]
    i1[Courses as folders]
    i2[A recipe collection]
  writing[Writing]
    w1[Diagrams showcase]@{ priority: 'High' }
  review[Review]
    r1[Launch post]
  published[Published]
    p1[Link in bio]

gantt
  title A newsletter launch
  dateFormat YYYY-MM-DD
  axisFormat %b %d
  section Write
  First three issues :w1, 2026-11-02, 10d
  Landing page       :w2, 2026-11-05, 4d
  section Grow
  Invite readers     :g1, after w2, 6d
  First issue out    :milestone, m1, after w1, 0d

Readers, in numbers#

The numbers are made up, as on every page of these examples.

pie showData
  title Where readers came from
  "Search" : 412
  "Newsletter" : 268
  "Social" : 155
  "Direct" : 97

xychart
  title "Readers a week"
  x-axis [W1, W2, W3, W4, W5, W6]
  y-axis "Readers" 0 --> 1200
  bar [180, 260, 410, 520, 780, 1040]
  line [180, 260, 410, 520, 780, 1040]

quadrantChart
  title What to write next
  x-axis Little effort --> Much effort
  y-axis Few readers --> Many readers
  quadrant-1 Plan it
  quadrant-2 Write it now
  quadrant-3 Skip it
  quadrant-4 Maybe later
  Glossary: [0.25, 0.3]
  Getting started: [0.3, 0.85]
  Video course: [0.85, 0.75]
  Changelog: [0.15, 0.55]
  API reference: [0.72, 0.22]

journey
  title A reader's visit
  section Finds it
    Search result: 4: Reader
    Opens on a phone: 5: Reader
  section Reads
    Follows the diagram: 5: Reader
    Copies a snippet: 4: Reader
  section Comes back
    Subscribes: 3: Reader

Write one#

Put this in any page and it becomes the first diagram above:

```mermaid
flowchart LR
  write([You write in markdown]) --> save[Saved as you type]
  save --> who{Who reads it?}
  who -- everybody --> public[Public]
```

The colours are the theme's: a node takes a wash of the accent and a line the text colour. Name your own with diagram_fill and diagram_line in the page's theme (and dark_diagram_fill, dark_diagram_line for dark), or one node at a time with Mermaid's style and classDef.

Every type Mermaid documents is drawn: flowchart, sequence, class, state, ER, Gantt, git graph, pie, mindmap, kanban, timeline, journey, quadrant, XY, sankey, architecture, C4 and more. The page you are reading is markdown too.