Editor Mermaid
Aguardando entrada
O que é o editor de diagramas Mermaid?
O Mermaid é uma ferramenta de criação de diagramas baseada em JavaScript que utiliza uma sintaxe textual semelhante ao Markdown para gerar diversos diagramas. Sem necessidade de arrastar formas manualmente, basta escrever uma simples descrição textual para gerar automaticamente fluxogramas, diagramas de sequência, diagramas de classes e muito mais. Esta ferramenta oferece um ambiente de edição Mermaid online com visualização em tempo real, zoom por arrastar e funções de exportação, ajudando desenvolvedores a criar e compartilhar diagramas rapidamente. Mermaid é melhor para diagramas que devem ficar próximos de texto ou código, como fluxos, sequências, Gantt e esboços de arquitetura. Sua força está em versionamento e edição rápida, não em ilustração pixel-perfect. Em diagramas complexos, legibilidade, tamanho dos nós, tema, direção do layout e formato de exportação ainda precisam ser revisados, pois código Mermaid válido pode gerar visual confuso.
Como Usar
Como usar
- Insira a sintaxe Mermaid no editor à esquerda
- O painel à direita renderiza o diagrama em tempo real
- Use o mouse para arrastar e a roda de rolagem para aplicar zoom
- Clique nos botões de exportação para salvar como PNG ou SVG
Verificações do Diagrama
- Renderize após cada edição significativa; erros Mermaid são frequentemente causados por indentação, pontuação não escapada ou sintaxe não suportada para o tipo de diagrama selecionado.
- Antes de exportar, confirme que rótulos, setas e quebras de linha permaneçam legíveis no tamanho em que o diagrama será utilizado.
Casos de uso
Princípio técnico
Mermaid é uma biblioteca open-source de renderização de diagramas iniciada por Knut Sveidqvist em 2014. Sua ideia central é pegar uma DSL legível por humanos (linguagem específica de domínio) e, através de um parser, transformá-la em um gráfico SVG. O pipeline completo tem três etapas: um lexer/parser (gerado pelo jison) analisa o código-fonte em uma estrutura de dados interna; um algoritmo de layout específico para o tipo de diagrama calcula as coordenadas dos nós e arestas; finalmente, o d3 renderiza o layout como elementos SVG. Diagramas diferentes usam motores de layout diferentes: flowchart usa por padrão o dagre (layout de grafo direcionado em camadas) e a partir da v10 também suporta ELK (mais poderoso mas mais pesado); sequenceDiagram usa um layout de temporização personalizado que posiciona participantes horizontalmente e empilha mensagens verticalmente; gantt distribui tarefas manualmente em um eixo temporal com dependências; classDiagram e stateDiagram também se apoiam no dagre. O algoritmo de layout é o que determina a legibilidade — o dagre segue o framework Sugiyama para atribuir ranks, minimizar cruzamentos de arestas e compactar espaçamento, o que funciona bem para fluxogramas de tamanho geral. Comparado ao Graphviz, a sintaxe do Mermaid está mais próxima da linguagem natural (ex.: A --> B) e renderiza nativamente no navegador com preview ao vivo. A linguagem DOT do Graphviz é mais baixo nível, e seus motores de layout (fdp, neato, ...) são mais maduros, mas exigem instalação local e seu estilo padrão parece ultrapassado. O Mermaid atualmente suporta mais de 15 tipos de diagramas — flowchart, sequenceDiagram, classDiagram, stateDiagram, erDiagram, gantt, pie, journey, gitGraph, mindmap, timeline, quadrantChart, sankey, xychart, block, entre outros — cobrindo a grande maioria das necessidades de desenho de engenharia de software.
- Análise: um parser gerado pelo jison transforma o texto DSL em uma AST interna; cada tipo de diagrama tem seu próprio arquivo de gramática.
- Algoritmo de layout: flowchart usa dagre para layout de grafo direcionado em camadas e pode mudar para ELK; diagramas de sequência e gantt usam sua própria lógica de layout dedicada.
- Motor de renderização: SVG é desenhado com d3; nós usam elementos g/rect/path/text e setas são definidas por markers.
- Tipos de diagrama: suporta flowchart, sequence, class, state, ER, gantt, pie, journey, gitGraph, mindmap e mais de uma dezena de outros.
- Comparação com Graphviz: Mermaid tem sintaxe mais amigável e suporte nativo à web; Graphviz tem layout mais refinado, adequado para grafos grandes e complexos.
- Temas: alterne entre os temas integrados default, dark, forest, neutral e outros via configuração de themeVariables ou a diretiva init.
Exemplos
Fluxograma
flowchart TD
A[Início] --> B{Logado?}
B -- Sim --> C[Página inicial]
B -- Não --> D[Página de login]
D --> E[Inserir credenciais]
E --> C
C --> F[Fim]Diagrama de sequência
sequenceDiagram
participant Browser
participant Server
participant Database
Browser->>Server: GET /api/user
Server->>Database: SELECT * FROM users
Database-->>Server: Dados do usuário
Server-->>Browser: Resposta JSONGráfico de Gantt
gantt
title Plano do projeto
dateFormat YYYY-MM-DD
section Design
Requisitos :a1, 2026-06-01, 7d
UI Design :a2, after a1, 10d
section Desenvolvimento
Frontend :b1, after a2, 20d
Backend :b2, after a2, 18d
section Testes
Integração :c1, after b1, 7dPerguntas frequentes
Quais tipos de diagrama o Mermaid suporta?
O Mermaid cobre fluxogramas, diagramas de sequência, diagramas de classes, diagramas de estado, diagramas entidade-relacionamento, gráficos de Gantt, gráficos de pizza, mapas de jornada do usuário, gráficos Git, mapas mentais e gráficos quadrantes. A primeira linha do seu código declara o tipo (por exemplo, 'flowchart TD' ou 'sequenceDiagram').
Por que meu diagrama mostra um erro de sintaxe?
As causas mais comuns são falta de ponto e vírgula ou operadores de seta, colchetes desbalanceados em rótulos de nó (use aspas em torno de texto com caracteres especiais: A["Hello (world)"]), sintaxe de seta errada para o tipo de diagrama (--> para flowchart, ->> para sequência) e problemas de indentação em subgrafos. O painel de erros costuma apontar para a linha onde a análise parou.
Como exporto o diagrama como imagem?
Use os botões de exportação para salvar como SVG (vetorial, escalável, recomendado para slides e documentos) ou PNG (rasterizado, pronto para chat e e-mail). Copie o markup SVG se quiser incorporar diretamente no HTML ou editar mais no Figma ou Illustrator.
Posso personalizar cores e estilos?
Sim. Use 'classDef' para definir um estilo similar a CSS e aplicá-lo com 'class A,B,C myStyle'. Substituições inline como 'style A fill:#f9f,stroke:#333' funcionam para alterações pontuais. Para tematização global, defina %%{init: {'theme':'forest'}}%% na primeira linha — temas embutidos são default, forest, dark, neutral e base.
Existem limites de tamanho ou complexidade?
O Mermaid renderiza tranquilamente até centenas de nós, mas o tempo de layout cresce de forma não-linear depois disso. Se um diagrama estiver lento ou ilegível, divida-o em vários diagramas vinculados ou use subgrafos para agrupar nós relacionados; o auto-layout escolhe posições piores quando muitas arestas se cruzam.
Como adiciono hiperlinks ou manipuladores de clique aos nós?
Use 'click NodeId "https://example.com"' para tornar um nó um link, ou 'click NodeId callback "tooltip"' para disparar um callback JavaScript registrado com mermaid.parseError. Os links funcionam no SVG exportado desde que a página onde ele for incorporado não os remova.
Onde mais posso renderizar o mesmo código Mermaid?
Markdown do GitHub, GitLab, Notion, Obsidian, Typora, VS Code (com extensões) e a maioria das ferramentas modernas de documentação renderizam blocos de código Mermaid nativamente. Cole o mesmo código nesses locais e ele será renderizado com o tema escolhido por cada plataforma.