Ferramenta
Visualizador de Markdown com diagramas Mermaid
Edite o documento abaixo e veja os blocos mermaid virarem fluxograma e diagrama de sequência no lugar em que eles aparecem no texto — sem exportar imagem, sem instalar extensão.
Arquitetura de ingestão
Este documento descreve o caminho de um arquivo desde o upload até a indexação.
Os diagramas abaixo são blocos cercados com a linguagem mermaid dentro do
próprio Markdown — não são imagens anexadas.
Fluxo principal
flowchart LR
A[Upload] --> B{Formato aceito?}
B -- sim --> C[Extrair texto]
B -- nao --> E[Recusar com 415]
C --> D[Indexar]
D --> F[(Busca)]Sequência de uma reindexação
sequenceDiagram
participant W as Worker
participant S as Storage
participant I as Indice
W->>S: buscar documento
S-->>W: conteudo bruto
W->>I: gravar versao nova
I-->>W: okRegras de reprocessamento
| Situação | Ação | Prazo |
|---|---|---|
| Extração falhou | Refila uma vez | 5 min |
| Formato mudou | Reindexa tudo | 1 h |
| Índice corrompido | Reconstrói do zero | 6 h |
Diagramas ficam versionados junto com o texto: um
git diffmostra a mudança do desenho, não um binário novo.
Diagrama e documento no mesmo arquivo
Editores de Mermaid não faltam, e o melhor deles resolve bem um problema específico: desenhar um diagrama isolado. O que quase nenhum resolve é o caso real da documentação técnica, em que o diagrama é um parágrafo entre outros — vem depois de uma explicação, antes de uma tabela de regras, dentro de uma seção que tem título e contexto.
Aqui o arquivo é lido inteiro. Os blocos mermaid são desenhados onde estão, e o
resto do Markdown continua sendo Markdown. É a mesma renderização que o GitHub faz no README,
disponível antes de você commitar.
Como escrever o bloco
Um bloco de código cercado, com mermaid como linguagem, e o diagrama dentro:
```mermaid
flowchart LR
A[Upload] --> B{Formato aceito?}
B -- sim --> C[Extrair texto]
B -- nao --> E[Recusar]
```Se a sintaxe do diagrama estiver errada, o bloco continua visível como texto em vez de sumir — é o que permite localizar a linha com problema. A referência de blocos de código Markdown explica as cercas e a indicação de linguagem em detalhe.
O que dá para desenhar
| Tipo | Palavra inicial | Uso típico |
|---|---|---|
| Fluxograma | flowchart | Decisões, caminhos de erro, pipelines |
| Sequência | sequenceDiagram | Conversa entre serviços |
| Estado | stateDiagram-v2 | Ciclo de vida de um pedido, de um job |
| Classe | classDiagram | Modelo de domínio |
| Gantt | gantt | Cronograma de migração |
Por que manter o diagrama como texto
Diagrama exportado como imagem envelhece em silêncio: o desenho continua no repositório muito
depois de o fluxo ter mudado, e ninguém percebe porque um .png não aparece de forma
legível na revisão. Em Mermaid, o diagrama é código — a alteração aparece linha a linha no
diff, entra na revisão como qualquer outra mudança e não exige a ferramenta original
para ser editado.
O artigo sobre Markdown com diagramas Mermaid online aprofunda o assunto, e o guia de renderização Markdown descreve o que o Sanctuary faz com cada elemento do documento.
Perguntas frequentes
Qual a diferença para um editor só de Mermaid?
Um editor de Mermaid renderiza um diagrama isolado. Aqui o diagrama é lido dentro do documento em que ele vive: o texto, as tabelas e os blocos mermaid aparecem juntos, na mesma ordem do arquivo.
Quais tipos de diagrama são suportados?
Os tipos do Mermaid: fluxograma, sequência, classe, estado, gantt, pizza, jornada e mapa mental, entre outros. O bloco é lido pela mesma biblioteca que o GitHub usa.
O diagrama vira imagem no arquivo?
Não. O diagrama continua sendo texto dentro do .md, versionado junto com o documento. Um git diff mostra a mudança do desenho em vez de um binário novo.
Por que a página demora um pouco para desenhar o primeiro diagrama?
A biblioteca de diagramas tem cerca de 3 MB e só é baixada quando existe um bloco mermaid de fato. Até ela chegar, o bloco fica visível como texto do diagrama.