Como usar Mermaid em Markdown: sintaxe e exemplos

Mermaid é uma linguagem de diagramas baseada em texto que se integra naturalmente ao Markdown. Em vez de criar uma imagem separada ou usar outra ferramenta, você descreve o diagrama em texto e ele é renderizado visualmente no documento.

O Sanctuary Reader renderiza diagramas Mermaid diretamente no navegador, sem instalação de plugins ou extensões.

Markdown com Mermaid renderizado no Sanctuary Reader

O que é Mermaid

Mermaid transforma blocos de código marcados com a linguagem mermaid em diagramas vetoriais. O texto descritivo é interpretado pela biblioteca JavaScript e renderizado no momento em que o documento é aberto.

Exemplo básico de fluxograma:

flowchart TD
    A[Abrir arquivo .md] --> B{Tem diagramas Mermaid?}
    B -- Sim --> C[Renderizar diagrama]
    B -- Não --> D[Exibir Markdown formatado]
    C --> E[Visualizar documento]
    D --> E

Para usar, basta criar um bloco de código com a linguagem mermaid:

```mermaid
flowchart TD
    A[Início] --> B[Processo] --> C[Fim]
```

Tipos de diagrama suportados

Fluxogramas (flowchart)

Os mais comuns. Representam processos, decisões e fluxos de trabalho:

flowchart LR
    A([Usuário]) --> B[Colar Markdown]
    B --> C[Sanctuary Reader]
    C --> D[Renderização]
    D --> E([Documento formatado])

Orientações disponíveis: TD (top-down), LR (left-right), BT (bottom-top), RL (right-left).

Diagramas de sequência (sequenceDiagram)

Úteis para documentar interações entre sistemas, APIs e usuários:

sequenceDiagram
    participant U as Usuário
    participant B as Navegador
    participant A as App

    U->>B: Abre URL do arquivo .md
    B->>A: Solicita carregamento
    A->>A: Processa Markdown
    A-->>B: Retorna HTML renderizado
    B-->>U: Exibe documento formatado

Diagramas de classe (classDiagram)

Para documentar estruturas de código, modelos de dados e arquiteturas:

classDiagram
    class Documento {
        +titulo: string
        +conteudo: string
        +tags: string[]
        +renderizar()
    }
    class Indice {
        +secoes: Secao[]
        +gerar(documento)
    }
    Documento --> Indice

Gráficos de Gantt (gantt)

Para planejamento de projetos e cronogramas:

gantt
    title Revisão de documentação
    dateFormat  YYYY-MM-DD
    section Fase 1
    Leitura inicial    :a1, 2026-04-01, 3d
    Anotações          :after a1, 2d
    section Fase 2
    Edição             :2026-04-06, 3d
    Revisão final      :2026-04-09, 2d

Outros tipos suportados

erDiagram — diagramas entidade-relacionamento
pie — gráficos de pizza
stateDiagram — máquinas de estado
journey — mapas de jornada do usuário
gitgraph — histórico de branches Git

Como visualizar Mermaid no Sanctuary Reader

Abra o visualizador de Markdown com Mermaid
Carregue um documento Markdown que contenha blocos Mermaid (por arquivo, URL, paste ou drag-and-drop)
Os diagramas são renderizados automaticamente inline no documento

O editor usa a biblioteca oficial Mermaid, que suporta os tipos de diagrama descritos acima.

Como escrever Mermaid com preview ao vivo

Para criar ou ajustar diagramas com feedback imediato:

Acesse o editor ao vivo no Sanctuary Reader (botão “Editor” na barra de ferramentas)
Escreva ou edite o bloco Mermaid no painel esquerdo
O preview no painel direito atualiza em tempo real
Quando satisfeito, baixe o arquivo .md com os diagramas embutidos

Checklist para validar Mermaid online

Antes de publicar documentação com Mermaid, confira:

O bloco usa code fence com a linguagem mermaid
O tipo de diagrama está na primeira linha, como flowchart LR ou sequenceDiagram
IDs de nós não usam espaços sem aspas
Setas e rótulos aparecem como esperado no preview
O diagrama continua legível dentro do documento, não só isolado
A seção do diagrama tem um título claro para aparecer no índice

Um editor Markdown com preview ao vivo acelera essa validação porque mostra o erro no contexto do documento, junto com o texto e os exemplos de código.

Mermaid em documentação técnica

Mermaid é amplamente usado no fluxo de documentação técnica para desenvolvedores, especialmente em:

README de projetos: fluxogramas de instalação, arquitetura de sistemas
Documentação de APIs: diagramas de sequência para endpoints
Especificações técnicas: diagramas de classe para modelos de dados
Wikis e bases de conhecimento: mapeamento de processos e fluxos

Esses mesmos diagramas funcionam bem quando você apresenta conteúdo Markdown em slides, usando os títulos do documento como divisores de seção. Documentos técnicos longos com muitos diagramas também se beneficiam de um estudo guiado por seções, que quebra a leitura em blocos menores.

O Sanctuary Reader lida bem com documentos longos que combinam texto, código e diagramas. O índice automático e progresso de leitura organiza os títulos e ajuda a manter contexto, e os diagramas são renderizados inline sem quebrar o fluxo de leitura.

Dicas de sintaxe Mermaid

Use %% para comentários no diagrama
Aspas duplas permitem textos com espaços nos nós: A["texto com espaço"]
Estilos CSS podem ser aplicados com style A fill:#f9f,stroke:#333
IDs de nós são case-sensitive: A e a são nós diferentes

Recursos adicionais

Guia de renderização Markdown no Sanctuary — todos os formatos suportados
Editor ao vivo com preview — escreva Markdown com feedback imediato
Como abrir arquivo .md no navegador — formas de carregar documentos Markdown
Visualizador Markdown online — validar Markdown renderizado no navegador
Como transformar Markdown em slides — apresentar documentos com estrutura de títulos

Abrir o visualizador de Markdown com Mermaid →