```theme technical background: #fffcf0 foreground: #100f0f muted: #6f6e69 accent: #205ea6 surface: #f2f0e5 border: #dad8ce dark_background: #100f0f dark_foreground: #cecdc3 dark_muted: #878580 dark_accent: #4385be dark_surface: #1c1b1a dark_border: #343331 dark: auto font_body: inter font_heading: instrument-serif heading_weight: 400 heading_tracking: -0.02 page_width: 1100 page_padding: 24 radius: 8 ``` ```meta title: Diagramas — flows description: Cada imagem desta página é um fence mermaid no markdown dela, desenhado pelo Pele, o renderizador do Obsidian, nas cores do tema da página. ``` :::inline justify:end sticky:top [![](/demo/diagrams/pele.svg) Pele](?diagrams=pele) --- [![](/demo/diagrams/mermaid.svg) Mermaid](?diagrams=mermaid) --- [Modo claro](?scheme=light) --- [Modo escuro](?scheme=dark) ::: _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](https://pele.run), 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 ```mermaid 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. ```mermaid 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. ```mermaid %%{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 ```mermaid 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 ```mermaid 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 ```mermaid 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 :::grid min:24 ```mermaid 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] ``` --- ```mermaid 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. :::grid min:20 ```mermaid pie showData title De onde vieram os leitores "Busca" : 412 "Newsletter" : 268 "Redes sociais" : 155 "Direto" : 97 ``` --- ```mermaid 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] ``` --- ```mermaid 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] ``` ::: ```mermaid 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: ~~~markdown ```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](/@docs/showcase/diagrams).