flows.md · documentação · Blocos

mermaid#

Um diagrama a partir de texto, na gramática do mermaid: fluxograma, sequência, estados, gantt e os outros tipos da documentação do mermaid. É o único bloco sem @: uma cerca mermaid também é desenhada no GitHub, no Obsidian, no Notion e no GitLab, e o diagrama continua funcionando onde a página for exportada.

Fluxograma#

flowchart LR
  A[Encomenda] --> B{Tem a peça?}
  B -- sim --> C[Embalar]
  B -- não --> D[Tornear] --> E[Queimar] --> C
  C --> F[Enviar]

```mermaid
flowchart LR
  A[Encomenda] --> B{Tem a peça?}
  B -- sim --> C[Embalar]
  B -- não --> D[Tornear] --> E[Queimar] --> C
  C --> F[Enviar]
```

Sequência#

sequenceDiagram
  Cliente->>Loja: Envia o formulário
  Loja-->>Cliente: Confirma por e-mail
  Loja->>Ateliê: Pede a peça
  Ateliê-->>Loja: Peça pronta

```mermaid
sequenceDiagram
  Cliente->>Loja: Envia o formulário
  Loja-->>Cliente: Confirma por e-mail
  Loja->>Ateliê: Pede a peça
  Ateliê-->>Loja: Peça pronta
```

O corpo é a gramática do próprio mermaid; a documentação dele lista todos os tipos de diagrama.

Quem desenha#

Por padrão, o Pele, o renderizador do Obsidian. Para um diagrama ser desenhado pelo próprio mermaid, diga na linha da cerca:

```mermaid renderer:mermaid
flowchart LR
  A --> B
```

O GitHub, o Obsidian e o GitLab leem só a primeira palavra da linha, então a cerca continua sendo um diagrama lá.

	Pele (padrão)	mermaid
Velocidade	um diagrama em menos de 1 ms, na própria página	dezenas de ms cada, em segundo plano
Tamanho que a página baixa	258 kB	947 kB
No celular	o desenho se reorganiza para a tela (um `flowchart LR` fica vertical)	o desenho encolhe
Claro e escuro	troca na hora, sem desenhar de novo	desenha de novo
Só ele faz	—	ZenUML, o visual `handDrawn`, `themeCSS`

Um diagrama que pede o que só o mermaid faz (ZenUML, look: handDrawn, themeCSS) vai para o mermaid sozinho, sem precisar de renderer:. Quem lê pode comparar uma página dos dois jeitos com ?diagrams=pele ou ?diagrams=mermaid no endereço.

Cores#

Os dois renderizadores pintam com as mesmas cores, e há duas formas de escolhê-las.

Pelo tema da página. Sem nada escrito, o diagrama usa as cores do tema: um nó leva um tom do acento, uma linha a cor do texto, e muda junto com o claro e o escuro. Para escolher as suas, o tema aceita:

Chave	O que pinta
`diagram_fill`	o fundo dos nós
`diagram_line`	as linhas (e as bordas, sem `diagram_border`)
`diagram_border`	as bordas dos nós e dos grupos
`diagram_group`	o fundo dos grupos, subgrafos e notas
`diagram_palette`	até 8 cores, em ordem, separadas por vírgula: as fatias de uma pizza, os ramos de um git graph, as seções de um mindmap ou de uma linha do tempo

Cada uma tem a sua versão para o escuro: dark_diagram_fill, dark_diagram_line, dark_diagram_border, dark_diagram_group e dark_diagram_palette.

Pelo próprio diagrama, como no mermaid, e então valem em qualquer página (e no GitHub também): um dos temas do mermaid (default, neutral, dark, forest, base) e as variáveis dele, na diretiva %%{init}%% ou no config: do cabeçalho. O que o diagrama diz vale mais que o tema da página.

%%{init: {"theme": "forest"}}%%
flowchart LR
  A[Semente] --> B[Muda] --> C[Árvore]

```mermaid
%%{init: {"theme": "forest"}}%%
flowchart LR
  A[Semente] --> B[Muda] --> C[Árvore]
```

---
config:
  themeVariables:
    primaryColor: "#fde68a"
    lineColor: "#92400e"
---
flowchart LR
  A[Pedido] --> B[Forno] --> C[Entrega]

```mermaid
---
config:
  themeVariables:
    primaryColor: "#fde68a"
    lineColor: "#92400e"
---
flowchart LR
  A[Pedido] --> B[Forno] --> C[Entrega]
```

As variáveis que o Pele segue: background, primaryColor, primaryBorderColor, primaryTextColor, textColor, lineColor, clusterBkg, critBkgColor, fontFamily, pie1…pie8, git0…git7, cScale0…cScale7 e o plotColorPalette de um xychart. O mermaid segue todas as dele. Um nó sozinho muda com style ou classDef, nos dois.

Estilo editorial#

look:editorial desenha o diagrama no jeito do diagram-design: um acento só, no nó marcado com a classe focal; os outros em tinta e cinza conforme a classe (store, external, input, optional, security), pela sintaxe :::classe do mermaid; a primeira linha do rótulo é o nome, em negrito, e as linhas depois do <br/> são o detalhe, em mono; os rótulos das setas em versalete mono; e as setas em degrau quando a configuração pede curve: stepAfter. As cores continuam sendo as do tema. É o mesmo desenho do Pele, com outra roupa: para o @diagram, que tem tipos próprios, veja @diagram.

%%{init: {"flowchart": {"curve": "stepAfter"}}}%%
flowchart LR
  leitor["Leitor<br/>navegador"]:::input -- HTTPS --> cf["Cloudflare<br/>edge · cache"]:::external
  cf -- SSR --> app["App web<br/>Rails 8 · Puma"]:::focal
  app --> db[("PostgreSQL<br/>páginas · coleções")]:::store
  app -.-> worker["Worker<br/>Solid Queue"]:::optional

```mermaid look:editorial
%%{init: {"flowchart": {"curve": "stepAfter"}}}%%
flowchart LR
  leitor["Leitor<br/>navegador"]:::input -- HTTPS --> cf["Cloudflare<br/>edge · cache"]:::external
  cf -- SSR --> app["App web<br/>Rails 8 · Puma"]:::focal
  app --> db[("PostgreSQL<br/>páginas · coleções")]:::store
  app -.-> worker["Worker<br/>Solid Queue"]:::optional
```

Zoom e tela cheia#

Todo diagrama, do Pele ou do mermaid, tem os controles de quem lê: diminuir, aumentar, voltar à vista inicial, selecionar ou mover, e tela cheia. No computador eles aparecem quando o mouse passa pelo diagrama; Ctrl (ou ⌘) com a roda do mouse, ou a pinça do trackpad, aproxima onde o ponteiro está, e um duplo clique aproxima e volta. Com a mão, arrastar move o desenho; com a seta, dá para selecionar o texto dele. No celular fica só o botão de tela cheia, e lá dentro um dedo move o desenho e dois dão zoom.

Pelo teclado, com o foco no diagrama: + e - aproximam e afastam, 0 volta, V seleciona, H move, F abre a tela cheia e Esc sai dela.

Exemplos: Diagramas.