flows · exemplos

Diagramas

Cada imagem desta página é um fence ```mermaid no markdown dela: o mesmo texto que o GitHub, o Obsidian e o Notion leem. O flows desenha com o Pele, o renderizador de código aberto do Obsidian: sem DOM para montar o layout, bem menos de um milissegundo por diagrama, e as cores vêm do tema desta página. No sol e na lua lá em cima, troque entre claro e escuro: os diagramas mudam junto com a página, e nada é desenhado de novo. Ao lado, a mesma página desenhada pelo Mermaid, para comparar.

Do rascunho ao leitor

flowchart LR
  write([Você escreve em markdown]) --> save[Salvo enquanto digita]
  save --> who{Quem lê?}
  who -- só você --> private[Privada]
  who -- quem você convida --> shared[Compartilhada]
  who -- todo mundo --> public[Pública]
  public --> readers([Leitores])
  public --> search([Buscadores])
  public --> agents([Agentes de IA, em markdown])

Um agente escreve uma página

flows · exemplos

diagram-design no flows

A skill diagram-design desenha 45 tipos de diagrama à mão, em SVG. Esta página desenha cada um a partir de texto, na própria página e nas cores do tema: um fence @diagram por tipo, e um @chart look:editorial para os gráficos. Cada seção aponta para o exemplo original da galeria. A lista é o manifesto config/diagram_design.yml, e um teste compara cada desenho com o SVG da galeria, elemento por elemento. Os 80 exemplos da galeria, um por um, com os animados em movimento: /@docs/showcase/diagram-design-gallery.

01 · Architecture

diagram-design: architecture · fence @diagram type:figure · galeria 01 · 01b · 01c · 01d · fiel: a geometria do exemplo, número a número

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 · exemplos

A galeria do diagram-design, desenhada pelo flows

A galeria do diagram-design tem 80 exemplos. Cada seção abaixo desenha um deles a partir de um fence @diagram (ou @chart look:editorial) e aponta para o original. Um teste compara cada desenho com o SVG da galeria, elemento por elemento, e só passa quando todos batem. Os exemplos animados da galeria entram aqui com motion:step: os itens chegam um a um, com controles. Uma seção por tipo, com a gramática explicada, fica em /@docs/showcase/diagram-design e /@docs/blocks/diagram.

01 · Architecture

tipo: 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

Um site de receitas · últimos 30 dias

Audiência

Visitas por semana

type: line
title: Visitas por semana
---
semana,visitas
S1,1420
S2,1890
S3,2310
S4,2792

Origem do tráfego

type: pie
title: Sessões por origem
---
origem,sessões
Busca,3980
Direto,2210
Social,1470
Referência,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.