Editor Mermaid ao Vivo

Editor Mermaid ao Vivo

Escreva sintaxe Mermaid à esquerda e veja o diagrama atualizar à direita em tempo real. Suporta os onze tipos de diagrama do Mermaid — flowchart, sequence, class, state, ER, Gantt, pie, mindmap, timeline, jornada do usuário e quadrant chart — com cinco temas (default, dark, forest, neutral, base). Exporte o diagrama como SVG vetorial limpo ou PNG em alta resolução. Tudo roda no seu navegador; nada é enviado.

O que é Mermaid e o que posso desenhar?

Mermaid é uma linguagem de diagramas baseada em JavaScript que permite descrever um diagrama em texto simples. Começou como alternativa a ferramentas estilo Visio caras e virou padrão de fato na documentação de devs — suportado nativamente por GitHub, GitLab, Notion, Obsidian, VS Code e muitos geradores estáticos.

Este editor suporta todos os tipos que o Mermaid 10 traz:

- Flowchart — caixas, decisões, setas. O mais comum.
- Sequence — troca de mensagens entre participantes no tempo.
- Class — diagramas UML de classes (herança, composição, métodos, atributos).
- State — máquinas de estados finitos com transições e subestados.
- Entity-Relationship — tabelas de banco de dados e seus relacionamentos.
- Gantt — cronogramas de projeto com tarefas, dependências, marcos.
- Pie — gráficos de proporção.
- Mindmap — hierarquias radiais de ideias.
- Timeline — eventos em eixo horizontal de tempo.
- Jornada do usuário — fluxo UX com pontos de sentimento.
- Quadrant chart — grade 2×2 para priorização.

Escolha um no dropdown Exemplos para começar e edite o código conforme seus dados.

Como difere do Mermaid Live Editor oficial?

O editor oficial mermaid.live é excelente — e esta ferramenta usa exatamente o mesmo motor de render (mermaid-js v10.9). Diferenças:

- Esta página é uma de ~1.400 ferramentas no mesmo domínio, então o editor compartilha UI do site, modo escuro e troca de idioma (English/Spanish/Vietnamese/French/Portuguese).
- Sem contas, sem canvas Pan/Zoom, sem URL compartilhável: simples de propósito. Se precisa compartilhar link ou diagramas persistentes, mermaid.live ou GitHub Gist são melhores.
- Usamos o bundle UMD do cdn.jsdelivr.net, então o diagrama é renderizado após a página carregar. Sem build ou plano pago.
- Todo processamento é local. Mermaid renderiza SVG totalmente em JavaScript; nada é enviado a servidor.

Se precisar embutir Mermaid em ambiente privado/offline, o mesmo código funciona — só hospede mermaid.min.js e chame este mesmo render.

Como crio um flowchart?

Flowcharts são o tipo mais fácil. Comece com declaração de direção e liste nós e arestas:

flowchart TD
A[Início] --> B{Decisão?}
B -- Sim --> C[Fazer algo]
B -- Não --> D[Pular]
C --> E[Fim]
D --> E

Direções: TD (top-down), LR (left-right), BT, RL.

Formas de nó por tipo de colchete:
- [Retângulo]
- (Arredondado)
- ((Círculo))
- {Losango / decisão}
- [/Paralelogramo/]
- [\Trapézio\]
- [(Cilindro)]

Estilos de aresta:
- --> seta
- --- linha
- -. pontilhado .->
- ==> seta grossa
- -- texto -->

Carregue o exemplo Flowchart e brinque com formas para sentir a sintaxe.

Como faço um sequence diagram para API ou chat?

Sequence diagrams mostram a ordem de mensagens entre participantes:

sequenceDiagram
participant Browser
participant API
participant DB
Browser->>API: POST /login {email, password}
API->>DB: SELECT user WHERE email=?
DB-->>API: row(id, hash)
API->>API: bcrypt.compare()
API-->>Browser: 200 OK + token
Note over Browser,API: Próximas requisições<br>enviam o token
Browser->>API: GET /profile (Bearer token)
API-->>Browser: 200 OK + profile JSON

Setas: ->> cheia com ponta; -->> resposta pontilhada; -> fina; --> pontilhada.

Notas: Note over X,Y: text — adiciona nota amarela abrangendo participantes.

Loops, alt, par e seções críticas são suportados. Gramática completa em mermaid.js.org/syntax/sequenceDiagram.

Como modelar um banco com ER diagram?

Use erDiagram e um caractere de cardinalidade por lado:

erDiagram
USER ||--o{ ORDER : faz
ORDER ||--|{ LINE_ITEM : contém
USER {
int id PK
string email
string name
}
ORDER {
int id PK
int user_id FK
date created_at
}

Chaves de cardinalidade (esq → dir):
- |o zero ou um
- || exatamente um
- }o zero ou mais
- }| um ou mais

Logo, USER ||--o{ ORDER lê-se 'um usuário tem zero ou mais pedidos'.

Dentro do bloco {} liste as colunas como tipo nome modificador — modificador PK (primary key) ou FK (foreign key). Ótimo para embutir esquemas pequenos no README sem subir um visualizador real.

Como funciona a sintaxe Gantt?

A sintaxe Gantt descreve tarefas por seção, com datas, durações e dependências:

gantt
title Plano do projeto
dateFormat YYYY-MM-DD
section Design
Wireframes :done, w1, 2026-05-01, 5d
Mockups :active, m1, after w1, 7d
section Desenvolvimento
Backend :b1, 2026-05-13, 14d
Frontend :f1, after b1, 10d
section Lançamento
QA :q1, after f1, 3d
Release :milestone, after q1, 0d

Formato de tarefa: 'Nome : [status], task-id, data-início | after task-id, duração | data-fim'

Status: done, active, crit (caminho crítico).

Marcos: terminar com 0d para render em diamante.

Dependências: 'after task-id' encadeia tarefas, mudar uma anterior desloca as próximas. Para cronogramas complexos, Smartsheet/MS Project são melhores — mas para documentação e propostas rápidas, Gantt no Mermaid é difícil de superar.

Posso exportar o diagrama?

Sim — dois formatos:

- SVG: vetorial, escala infinita, encaixa direto em HTML/Markdown/PDF, e o texto interno permanece selecionável e pesquisável. O arquivo baixado contém exatamente o XML renderizado que aparece no inspetor.
- PNG: imagem raster que você cola em slides, email ou chat. Escolha a escala (1x–4x) e se o fundo é transparente — veja a próxima pergunta.

Ambos exports acontecem totalmente no navegador. PNG usa um HTMLCanvasElement para rasterizar o SVG; SVG é download direto do XML. Sem viagem ao servidor.

Para diagramas de arquitetura que vivem em repositório Git, prefira SVG: ele faz diff razoável em pull requests e é o formato que o GitHub renderiza inline.

Como exporto um PNG transparente ou uma imagem em alta resolução para slides e docs?

Ao lado do botão PNG há dois controles:

- Escala (1x / 2x / 3x / 4x): multiplica o tamanho real em pixels do diagrama. 1x é o tamanho nativo; 2x serve para a maioria das telas retina; 3x–4x dá resolução pronta para impressão e projeção em apresentações e PDFs. As dimensões exportadas vêm do próprio viewBox do diagrama, então são iguais tendo você dado zoom ou não no preview — os botões de zoom na tela nunca afetam o tamanho do arquivo exportado.
- Transparente: quando marcado, o PNG (e o SVG) é exportado com canal alfa e sem preenchimento de fundo. É o que você quer ao colocar um diagrama sobre um slide escuro ou com marca. Deixe desmarcado para o clássico fundo branco que fica bem em Slack, Discord e email.

O texto dos rótulos agora é rasterizado corretamente até em tipos que usam rótulos HTML (mindmap e flowcharts com rótulos HTML). Antes o texto do foreignObject podia sair em branco no PNG; agora o exportador injeta o namespace XHTML necessário e um tamanho em pixels explícito antes de rasterizar, então nenhum texto é perdido.

Receitas típicas: docs retina → 2x, opaco; apresentação escura → 3x, transparente; impressão/PDF → 4x, opaco; favicon ou ícone inline → SVG.

Meu diagrama está em branco ou não renderiza — como resolvo?

Se o preview está vazio mas você não vê erro de parse, costuma ser um destes:

- A biblioteca Mermaid foi bloqueada. Esta ferramenta carrega o mermaid de cdn.jsdelivr.net. Bloqueadores de anúncios/scripts, um proxy corporativo ou uma máquina offline podem bloqueá-la — você verá 'Biblioteca Mermaid não carregou'. Libere o CDN ou hospede você mesmo o mermaid.min.js.
- Contraste do tema escuro. Se você escolheu o tema Escuro numa página escura, texto claro sobre uma exportação clara (ou vice-versa) pode parecer 'ausente'. Mude o dropdown Tema para Padrão ou Base antes de exportar, ou exporte transparente e coloque o diagrama sobre um fundo contrastante.
- Código vazio ou só com espaços não renderiza nada por design — carregue um exemplo para confirmar que o editor funciona.
- Um diagrama válido anterior permanece na tela enquanto sua edição atual tem erro de parse, então um diagrama 'travado' normalmente significa que a última edição falhou no parse; veja a caixa de erro vermelha sob o editor.

Se o PNG saía em branco para um mindmap ou flowchart com rótulos HTML antes, esse era o bug de rasterização de foreignObject e já está corrigido.

Há destaque de erros de sintaxe?

Quando o Mermaid não consegue parsear seu código (typo em keyword, parêntese sem fechar, forma desconhecida), a mensagem do parser aparece abaixo do editor. O último diagrama renderizado com sucesso permanece à direita — para você comparar o código atual com a versão válida anterior enquanto corrige.

Mensagens do Mermaid podem ser obscuras. Correções comuns:
- 'Parse error on line N' — olhe a linha indicada e a anterior; geralmente falta seta ou parêntese.
- 'Lexical error' — caractere ilegal, normalmente aspas Unicode (“ ”) quando queria ASCII (").
- A palavra-chave do tipo (flowchart, sequenceDiagram…) precisa ser a primeira linha não vazia; espaço antes quebra o parsing.

Para depuração ao vivo, cole um trecho curto e adicione linhas gradualmente — Mermaid renderiza a cada tecla (com pequeno debounce), então a edição quebrada fica fácil de identificar.

Principais Recursos

• Render ao vivo a cada tecla (com debounce)
• Onze tipos: flowchart, sequence, class, state, ER, gantt, pie, mindmap, timeline, journey, quadrant
• Cinco temas: default, dark, forest, neutral, base
• Carga rápida de exemplo completo para cada tipo
• Exporta como SVG (vetorial) ou PNG em escala 1x–4x com fundo transparente opcional
• Rasterização correta de rótulos HTML/foreignObject (mindmap, flowcharts com rótulos HTML) — sem texto perdido
• Debounce por tecla mantém a UI fluida em diagramas grandes
• Mantém o último render válido quando o código atual tem erro de parse
• Botões de zoom in/out e reset para o painel de preview
• Copia o código Mermaid para a área de transferência
• Usa [email protected] do CDN jsDelivr (URL pré-testada)
• 100% no cliente — sua fonte nunca sai do navegador
• Layout responsivo amigável para celular
• Modo escuro com troca de tema automática
• Nível de segurança estrito — diagramas não executam HTML arbitrário
• Funciona em qualquer navegador moderno; sem build