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

flows · examples

diagram-design on flows

The diagram-design skill draws 45 diagram types by hand, as SVG. This page draws each one from text, on the page itself and in the theme's colours: one @diagram fence per type, and a @chart look:editorial for the charts. Each section links to the gallery's original. The list is the manifest config/diagram_design.yml, and a test compares every drawing with the gallery's SVG, element by element. All 80 gallery examples, one by one, with the animated ones in motion: /@docs/showcase/diagram-design-gallery.

01 · Architecture

diagram-design: architecture · fence @diagram type:figure · gallery 01 · 01b · 01c · 01d · native: the example's geometry, number for number

title: Content site in production
size: 1000x480
- reader px:40,240 128x64 input "Reader" "Browser" "EXT"
- cf px:220,240 144x64 external "Cloudflare" "Pages · cache" "EDGE"
- astro px:416,240 160x64 focal "Astro Origin" "SSR + MDX" "ORIG"
- mdx px:628,160 144x64 backend "MDX Bundle" "src/content/*.mdx" "BUN"
- cms px:628,320 144x64 store "Content CMS" "assets · og images" "CMS"
zone CONTENT: px:616,128 164x272
reader -> cf HTTPS {link from:272 to:272}
cf -> astro SSR {accent}
astro -> mdx READ MDX
astro -> cms QUERY
cf -> reader RESP {dashed from:288 to:288}

02 · Architecture delta

flows · examples

The diagram-design gallery, drawn by flows

The diagram-design gallery has 80 examples. Each section below draws one of them from a @diagram fence (or @chart look:editorial) and links to the original. A test compares every drawing with the gallery's SVG, element by element, and passes only when all of them match. The gallery's animated examples come with motion:step here: the items enter one by one, with controls. One section per type, with the grammar explained, is at /@docs/showcase/diagram-design and /@docs/blocks/diagram.

01 · Architecture

type: architecture · original

title: Content site in production
size: 1000x480
- reader px:40,240 128x64 input "Reader" "Browser" "EXT"
- cf px:220,240 144x64 external "Cloudflare" "Pages · cache" "EDGE" {num:01}
- astro px:416,240 160x64 focal "Astro Origin" "SSR + MDX" "ORIG" {num:02}
- mdx px:628,160 144x64 backend "MDX Bundle" "src/content/*.mdx" "BUN" {badge:32}
- cms px:628,320 144x64 store "Content CMS" "assets · og images" "CMS"
zone CONTENT: px:616,128 164x272
reader -> cf HTTPS {link from:272 to:272 mask:172,252,48 ty:262}
cf -> astro SSR {accent mask:368,252,48 ty:262}
astro -> mdx READ MDX {mask:632,240,60}
astro -> cms QUERY {mask:632,292,44}
cf -> reader RESP {dashed from:288 to:288 mask:172,278,32}
legend: focal=Focal / origin, backend=Backend / bundle, store=Store, input=Cloud, external=External, link=HTTP request, accent=Primary flow, dashed=Return / async
legend: 40, 180, 340, 436, 528, 636, 784, 900 {row:444 line:442}

01a · Architecture · data lake

A recipe site · last 30 days

Audience

Visits per week

type: line
title: Visits per week
---
week,visits
W1,1420
W2,1890
W3,2310
W4,2792

Where the traffic comes from

type: pie
title: Sessions by source
---
source,sessions
Search,3980
Direct,2210
Social,1470
Referral,752

Feed

Bruno Aragão

Fundador do Relay · Recife, Brasil · Conectar Mensagem

Experiência

Conversa

Suporte Orbit

title: hoje
Ana: Oi! Instalei o Orbit no notebook novo, mas meus espaços não apareceram @ 09:12
me: Oi Ana! Você entrou com a mesma conta do outro computador? @ 09:13
Ana: Entrei sim @ 09:13
me: Então é a sincronização que ainda está baixando. Abre Ajustes → Contas e toca em Sincronizar agora @ 09:15
me: Com muitos espaços leva uns dois minutos na primeira vez @ 09:15
Ana: Apareceram 🎉 obrigada @ 09:20
me: De nada! Qualquer coisa é só chamar @ 09:21

Pessoas e conversa fictícias.

liaramos · Seguindo

Lia Ramos

Cozinha de verdade, sem frescura. Receitas de 20 minutos toda terça. Receitas toda terça Belo Horizonte

Pessoa, perfil e números fictícios.