Editor Mermaid online (Mermaid Live Editor)

Um editor Mermaid dentro de um editor de Markdown

O Mermaid transforma poucas linhas de texto em um diagrama, o que facilita comparar versões, revisar e manter os diagramas ao lado da documentação que eles explicam. O editor desta página é um editor de Markdown dividido com suporte a Mermaid embutido: escreva o diagrama no ponto do documento a que ele pertence, e a prévia o redesenha um instante depois que você para de digitar. Os diagramas que você não alterou voltam de um cache, então editar o texto ao redor continua rápido; o motor em si é carregado na primeira vez que um documento contém um diagrama, o que pode levar um momento.

Comece com este bloco no editor:

```mermaid
flowchart LR
  Idea --> Draft --> Review
  Review -->|changes| Draft
  Review -->|approved| Publish
```

e o fluxograma aparece à direita. Troque LR (da esquerda para a direita) por TD (de cima para baixo), adicione um nó ou renomeie uma seta, e a imagem acompanha.

Tipos de diagrama que você pode desenhar

Todos os diagramas abaixo são renderizados na prévia. Coloque a palavra-chave do diagrama na primeira linha dentro do bloco:

• Fluxograma (flowchart TD) — processos, decisões, esboços de arquitetura.
• Diagrama de sequência (sequenceDiagram) — chamadas entre serviços ou pessoas ao longo do tempo.
• Diagrama de classes (classDiagram) e diagrama de estados (stateDiagram-v2).
• Diagrama entidade-relacionamento (erDiagram) — esquemas de banco de dados.
• Gráfico de Gantt (gantt), linha do tempo (timeline) e jornada do usuário (journey).
• Gráfico de pizza (pie), gráfico de quadrantes (quadrantChart) e mindmap (mindmap).
• Git graph (gitGraph), diagrama de requisitos (requirementDiagram) e C4 (C4Context).
• Tipos mais novos como Sankey (sankey-beta), gráfico XY (xychart-beta), bloco (block-beta), pacote (packet), kanban e arquitetura (architecture-beta).

A sintaxe dos tipos de diagrama em beta pode mudar entre versões do Mermaid, então consulte a documentação oficial do Mermaid para as palavras-chave exatas; este editor roda a versão incluída no site.

Como depurar um diagrama

Quando o Mermaid não consegue interpretar o código, o bloco do diagrama vira uma caixa de erro com a mensagem do parser — o número da linha, o trecho em que ele tropeçou e o que esperava. Corrija a linha e o diagrama substitui o erro. Use o layout Dividido para ver os dois ao mesmo tempo; a prévia rola junto com a linha que você está editando. Os diagramas são renderizados no modo de segurança estrito do Mermaid, então callbacks de clique e scripts dentro das definições de diagrama ficam desativados, e o HTML inline no resto do documento é sanitizado.

Salvar, compartilhar e exportar

O documento é salvo automaticamente no seu navegador. Exportar → Baixar .md entrega o arquivo Markdown para você versionar junto com o seu código. Compartilhar cria um link que contém o documento inteiro, então um colega o abre com o diagrama já desenhado. Baixar .html exporta uma página independente com os diagramas em SVG, e Imprimir / Salvar como PDF gera um PDF em que os diagramas continuam nítidos em qualquer zoom. As cores dos diagramas seguem o tema claro ou escuro que você escolher.

Quando usar este editor e quando usar uma ferramenta dedicada

Se você só quer iterar em um diagrama com um painel de configuração e download de imagens, uma ferramenta dedicada como o mermaid.live foi feita para isso. Se o diagrama pertence a um documento — um README, uma nota de design, o plano de um agente, a documentação de um projeto —, um editor de Markdown que renderiza Mermaid é o caminho mais curto, porque você vê o diagrama no contexto e pode baixar o arquivo inteiro. Novo na sintaxe ao redor? Veja o guia rápido de Markdown ou abra direto o editor de Markdown.