ToolAct

Editor Mermaid

Entrada
Saída

Aguardando entrada

Linhas: 1Caracteres: 0
Zoom: 100%

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

  1. Insira a sintaxe Mermaid no editor à esquerda
  2. O painel à direita renderiza o diagrama em tempo real
  3. Use o mouse para arrastar e a roda de rolagem para aplicar zoom
  4. 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

Esboçar diagramas a partir de código MermaidEdite a sintaxe Mermaid à esquerda e veja uma renderização ao vivo com debounce à direita usando a biblioteca Mermaid. Os exemplos integrados cobrem fluxogramas, diagramas de sequência, diagramas de classes, diagramas de estados, diagramas ER, diagramas de Gantt, gráficos de pizza, mapas mentais e mapas de jornada. O mesmo código-fonte pode ser colado em um README, wiki ou issue do GitHub, e o renderizador do host desenhará o diagrama por conta própria.
Revisar diagramas grandes com arrastar, zoom e tela cheiaO painel de visualização suporta arrastar com o mouse, zoom pela roda de 10% a 500%, duplo-clique para resetar e modo tela cheia cujo estado é lembrado no localStorage. Isso facilita a inspeção de diagramas complexos de arquitetura ou processo em comparação com uma visualização estática. Dar zoom em uma área densa antes de capturar tela é frequentemente a única maneira de manter os rótulos das setas legíveis em fluxogramas congestionados.
Exportar diagramas para documentaçãoQuando o diagrama é renderizado com sucesso, exporte como SVG para uso vetorial editável ou como PNG com fundo branco renderizado via canvas. Erros de sintaxe são exibidos na área de visualização para que o diagrama possa ser corrigido antes de entrar em um README, slide ou ticket. PNG funciona para apresentações e canais que só aceitam imagens, enquanto SVG mantém links e estilos editáveis para entrega ao design.
Configurar tema e orientação para capturas de tela para stakeholdersAltere o tema (default, dark, forest, neutral) e a direção do grafo (TD/LR/BT/RL) antes de capturar tela, para que o mesmo diagrama seja legível em documentos com fundo claro e dashboards com fundo escuro. As themeVariables ativas também estão disponíveis para sobrescrever fontFamily, primaryColor e cor das arestas em exportações com marca. Duplo-clique reseta o zoom após mudanças de tema para que a nova paleta de cores seja capturada limpa.
Alternar entre sintaxe de fluxograma, sequência, ER e gantt v10Escolha a família de diagramas adequada para a pergunta que está respondendo: flowchart (graph TD) para decisões com ramificações, sequenceDiagram para chamadas em ordem temporal, erDiagram para modelagem entidade-relacionamento e gantt para cronogramas de projeto. A sintaxe Mermaid v10 (e posterior v11) alterou vários padrões — classDef agora é declarado no topo, ids de subgraph são obrigatórios e o gantt usa formatos de data ISO — então trechos existentes de versões mais antigas podem precisar de pequenos ajustes antes de renderizar novamente.

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 JSON

Grá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, 7d

Perguntas 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.

Ferramentas relacionadas

UA 解析器

在线User-Agent解析工具，快速识别浏览器类型、操作系统、设备信息。支持解析各种UA字符串，帮助开发者调试和分析用户环境。

Demo 示例

服务器渲染示例页面，演示SSR调用后端接口获取数据，适合需要SEO优化的页面场景。

UUID 生成器

在线UUID生成工具，创建符合RFC 4122标准的唯一标识符。支持UUID v1、v4版本，批量生成。

Cron 表达式生成器

在线Cron表达式工具，解析和生成Cron定时任务表达式。可视化配置，支持秒级、Quartz等扩展语法。

Excel 数据生成器

在线Excel测试数据生成工具，支持姓名、手机号、身份证、日期、金额等多种字段类型，可按列自定义规则批量生成模拟数据并导出.xlsx文件，数据本地生成保护隐私。

JSON Schema 生成器

在线JSON Schema生成工具，根据JSON数据自动生成符合规范的Schema定义。支持嵌套对象、数组类型推断、必填字段配置，帮助开发者快速创建数据验证规则。