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#

Claude, ChatGPT ou Cursor chegam às suas páginas pelo servidor MCP do flows, só com o acesso que você deu.

sequenceDiagram
  autonumber
  actor Voce as Você
  participant Claude
  participant flows
  Voce->>Claude: Escreva o post
  Claude->>flows: lê as notas
  flows-->>Claude: markdown
  Claude->>flows: escreve o post
  Note over flows: salva, privada
  Voce->>flows: edita, publica
  Note over flows: pública

Uma página, dois aparelhos#

Editou no celular e no notebook ao mesmo tempo? O segundo salvamento não apaga o primeiro: você revê as duas versões, trecho a trecho, e fica com o que quiser.

%%{init: { "gitGraph": { "mainBranchName": "notebook" } } }%%
gitGraph TB:
  commit id: "rascunho"
  branch celular
  checkout celular
  commit id: "corrige um erro"
  checkout notebook
  commit id: "nova seção"
  merge celular id: "revisão: fica com as duas"
  commit id: "publica"

Quem pode ler uma página#

stateDiagram-v2
  direction LR
  [*] --> Privada
  Privada --> Compartilhada: convida pessoas
  Compartilhada --> Publica: publica
  Privada --> Publica: publica
  Publica --> Privada: despublica
  state "Pública" as Publica

Uma coleção são linhas dentro de uma página#

erDiagram
  ESPACO ||--o{ PAGINA : guarda
  PAGINA ||--o{ PAGINA : "páginas dentro"
  PAGINA ||--o| COLECAO : "pode ter"
  COLECAO ||--o{ LINHA : tem
  PAGINA ||--o{ VERSAO : guarda

O que uma página pode ser#

mindmap
  root((uma página do flows))
    Site
      Landing page
      Preços
      Blog
    Documentação
      Guias
      Changelog
    Curso
      Lições
      Flashcards
    Coleção
      Tabela
      Quadro
      Calendário
    Newsletter
    Link na bio

Planejar e acompanhar#

kanban
  ideias[Ideias]
    i1[Cursos como pastas]
    i2[Uma coleção de receitas]
  escrevendo[Escrevendo]
    w1[Vitrine de diagramas]@{ priority: 'High' }
  revisao[Revisão]
    r1[Post de lançamento]
  publicado[Publicado]
    p1[Link na bio]

gantt
  title Lançamento de uma newsletter
  dateFormat YYYY-MM-DD
  axisFormat %d/%m
  section Escrever
  Três primeiras edições :w1, 2026-11-02, 10d
  Landing page           :w2, 2026-11-05, 4d
  section Crescer
  Convidar leitores      :g1, after w2, 6d
  Primeira edição sai    :milestone, m1, after w1, 0d

Leitores, em números#

Os números são inventados, como em todas as páginas destes exemplos.

pie showData
  title De onde vieram os leitores
  "Busca" : 412
  "Newsletter" : 268
  "Redes sociais" : 155
  "Direto" : 97

xychart
  title "Leitores por semana"
  x-axis [S1, S2, S3, S4, S5, S6]
  y-axis "Leitores" 0 --> 1200
  bar [180, 260, 410, 520, 780, 1040]
  line [180, 260, 410, 520, 780, 1040]

quadrantChart
  title O que escrever agora
  x-axis Pouco esforço --> Muito esforço
  y-axis Poucos leitores --> Muitos leitores
  quadrant-1 Planeje
  quadrant-2 Escreva já
  quadrant-3 Deixe de lado
  quadrant-4 Talvez depois
  Glossário: [0.25, 0.3]
  Primeiros passos: [0.3, 0.85]
  Curso em vídeo: [0.85, 0.75]
  Changelog: [0.15, 0.55]
  Referência da API: [0.72, 0.22]

journey
  title A visita de um leitor
  section Encontra
    Resultado da busca: 4: Leitor
    Abre no celular: 5: Leitor
  section Lê
    Segue o diagrama: 5: Leitor
    Copia um trecho: 4: Leitor
  section Volta
    Assina: 3: Leitor

Escreva um#

Ponha isto em qualquer página e vira o primeiro diagrama aqui de cima:

```mermaid
flowchart LR
  write([Você escreve em markdown]) --> save[Salvo enquanto digita]
  save --> who{Quem lê?}
  who -- todo mundo --> public[Pública]
```

As cores são as do tema: um nó leva um tom do acento, e uma linha, a cor do texto. Escolha as suas com diagram_fill e diagram_line no tema da página (e dark_diagram_fill, dark_diagram_line para o escuro), ou um nó de cada vez com o style e o classDef do Mermaid.

Todo tipo que o Mermaid documenta é desenhado: fluxograma, sequência, classe, estado, ER, Gantt, git graph, pizza, mindmap, kanban, linha do tempo, jornada, quadrante, XY, sankey, arquitetura, C4 e outros. A página que você está lendo também é markdown.