Como usar Mermaid em Markdown online: diagramas no navegador

Mermaid é uma linguagem de diagramas baseada em texto que se integra naturalmente ao Markdown. Em vez de exportar imagens ou usar ferramentas separadas, 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.

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

1. Abra o Sanctuary Reader
2. Carregue um documento Markdown que contenha blocos Mermaid (por arquivo, URL, paste ou drag-and-drop)
3. 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:

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

Mermaid em documentação técnica

Mermaid é amplamente usado 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

O Sanctuary Reader lida bem com documentos longos que combinam texto, código e diagramas. O índice automático organiza os títulos, o progresso 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
• Como transformar Markdown em slides — apresentar documentos com estrutura de títulos

Abrir o editor com suporte a Mermaid →