```meta
title: mermaid — um diagrama
description: Um fluxograma, uma sequência, um gantt, desenhados a partir de texto pelo Pele ou pelo mermaid, nas cores do tema da página ou nas do próprio diagrama.
```

_flows.md · documentação · [Blocos](/@docs/blocks)_

# 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](https://mermaid.js.org). É 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

```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]
```

~~~text
```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

```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
```

~~~text
```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](https://mermaid.js.org) lista todos os tipos de diagrama.

## Quem desenha

Por padrão, o [Pele](https://pele.run), o renderizador do Obsidian. Para um diagrama ser desenhado pelo próprio mermaid, diga na linha da cerca:

~~~text
```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.

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

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

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

~~~text
```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](https://github.com/cathrynlavery/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](/@docs/blocks/diagram).

```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
```

~~~text
```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](/@docs/showcase/diagrams).