Guia rápido de sintaxe mermaid

O diagrama mais curto que funciona

Um fluxograma precisa de uma linha de declaração e uma seta. TD significa de cima para baixo; use LR para da esquerda para a direita, que se adapta melhor a processos largos.

flowchart TD
  A[Start] --> B{Ready?}
  B -->|Yes| C[Ship it]
  B -->|No| A

A, B e C são identificadores de nó — nomes internos, nunca desenhados. O texto entre colchetes é o rótulo, e o estilo dos colchetes é o que escolhe a forma.

Formas de nó

A forma é escolhida pelo par de delimitadores à volta do rótulo. Estas são as que vale a pena memorizar:

💡Coloque o rótulo entre aspas quando contiver colchetes, dois pontos ou aspas: A["Load (raw) data"]. Sem aspas, o interpretador lê a sua pontuação como sintaxe.

Setas

O comprimento da seta também é significativo: --> é um nível, ---> empurra o destino mais um nível para baixo. É o controlo de esquema mais simples que o mermaid oferece.

Agrupar com subgráficos

Um subgraph desenha uma caixa com um rótulo à volta de nós. Os subgráficos podem aninhar-se, e as setas podem atravessar as suas fronteiras livremente.

flowchart LR
  subgraph api["API"]
    H[Handler] --> S[(Postgres)]
  end
  subgraph worker["Worker"]
    Q[Queue] --> W[Job]
  end
  H --> Q

Cor e estilo

style pinta um nó. classDef mais class pintam um conjunto deles, o que é o que se quer a partir de três ou quatro nós.

flowchart TD
  A[OK] --> B[Failed]
  style A fill:#16a34a,stroke:#333,color:#fff
  classDef bad fill:#dc2626,stroke:#333,color:#fff
  class B bad

As cores fazem parte da fonte do diagrama, por isso sobrevivem à exportação e viajam com o ficheiro. Nada aqui depende de uma definição de tema na ferramenta que o renderiza.

Um exemplo por tipo de diagrama

Diagrama de sequência

sequenceDiagram
  participant User
  participant API
  participant DB
  User->>API: request
  API->>DB: query
  DB-->>API: rows
  API-->>User: response

Diagrama de classes

classDiagram
  class Animal {
    +String name
    +move()
  }
  class Dog {
    +bark()
  }
  Animal <|-- Dog

Diagrama de estados

stateDiagram-v2
  [*] --> Idle
  Idle --> Running: start
  Running --> Idle: stop
  Running --> [*]: finish

Diagrama de entidade-relacionamento

erDiagram
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ LINE_ITEM : contains
  CUSTOMER {
    string name
    string email
  }

Gráfico de Gantt

gantt
  title Project
  dateFormat YYYY-MM-DD
  section Phase 1
  Task 1 :a1, 2026-01-01, 5d
  Task 2 :after a1, 5d

Onde o mermaid renderiza por conta própria

• GitHub — um bloco ```mermaid delimitado renderiza em issues, pull requests, comentários e ficheiros README.
• GitLab — o mesmo bloco delimitado, em issues, merge requests e na wiki.
• Notion — um bloco de código com a linguagem definida como Mermaid renderiza junto da fonte.
• Obsidian — um bloco mermaid delimitado renderiza no modo de pré-visualização.
• Sites de documentação — Docusaurus, MkDocs Material e VitePress suportam todos blocos mermaid.

Essa é a verdadeira razão para manter os diagramas como mermaid em vez de como imagens: o diagrama vive no mesmo ficheiro de texto que a coisa que descreve, e uma revisão de código consegue ver o que mudou nele.