O que é o Editor de Diagramas Mermaid?

O Editor de Diagramas Mermaid é uma ferramenta interativa que permite escrever código de diagrama usando sintaxe Mermaid.js e ver o resultado renderizado instantaneamente. Quer você precise de um fluxograma rápido, um diagrama de sequência detalhado ou um gráfico de Gantt de projeto, você pode criá-lo direto no seu navegador com código simples baseado em texto.

Mermaid é uma linguagem de diagramação de código aberto popular que transforma texto semelhante a markdown em diagramas profissionais. Este editor fornece uma interface de painel dividido com um editor de código de um lado e uma visualização ao vivo do outro, para que você possa ver suas alterações conforme digita.

Por que Mermaid? Diagramas baseados em texto são controláveis por versão, fáceis de atualizar e podem ser incorporados diretamente na documentação sem arquivos de imagem externos.

Tipos de Diagramas Suportados

Fluxograma

Fluxos de processo, árvores de decisão e fluxos de trabalho

Diagrama de Sequência

Interações entre sistemas ou atores ao longo do tempo

Diagrama de Classe

Estruturas de classe orientadas a objetos e relacionamentos

Diagrama de Estado

Máquinas de estado e transições

Diagrama ER

Modelos de relacionamento de entidades para bancos de dados

Gráfico de Gantt

Cronogramas de projeto e agendas de tarefas

Gráfico de Pizza

Distribuição de dados e proporções

Mapa Mental

Brainstorming e organização de ideias

Git Graph

Visualizações de branch e commit

Como Usar o Editor de Diagramas Mermaid

Começando

Carregar Diagrama de Exemplo

O editor é carregado com um fluxograma de exemplo. Você pode começar a editá-lo imediatamente ou escolher um tipo de diagrama diferente no menu suspenso Modelos.

Escreva Seu Código

Escreva seu código Mermaid no painel esquerdo. A visualização do diagrama é atualizada automaticamente conforme você digita, oferecendo feedback visual instantâneo.

Corrija Erros

Se houver um erro de sintaxe, uma mensagem de erro aparecerá abaixo do editor para ajudá-lo a identificar e corrigir o problema rapidamente.

Usando Modelos

Clique no botão Modelos na barra de ferramentas para escolher entre 9 modelos de diagramas integrados. Cada modelo fornece um exemplo funcional que você pode modificar conforme suas necessidades.

Dica Profissional: Modelos são a forma mais rápida de aprender a sintaxe Mermaid. Comece com um modelo semelhante ao seu objetivo, depois personalize-o passo a passo.

Editando Código

Indentação Inteligente

Atalhos de teclado para formatação eficiente de código

Pressione Tab para inserir indentação (4 espaços)
Pressione Shift+Tab para remover indentação

Números de Linha e Salvamento Automático

Experiência de edição aprimorada

Os números de linha ajudam a rastrear a estrutura do código
Seu código é salvo automaticamente e restaurado quando você retorna

Controles de Visualização

Use os botões de zoom (+/−) ou Ctrl + roda do mouse para ampliar entre 25% e 300%
Clique no botão de redefinição para retornar ao zoom de 100%
Arraste a alça de redimensionamento entre os painéis para ajustar a divisão editor/visualização

Exportando Seu Diagrama

Exportação SVG

Baixa um arquivo de vetor escalável, ideal para uso na web e documentos. Dimensiona para qualquer tamanho sem perda de qualidade.

Exportação PNG

Baixa uma imagem de alta resolução (escala 2x) para apresentações e compartilhamento em telas de alta DPI.

Copiar SVG

Copia o código SVG para sua área de transferência para colar em outras ferramentas ou incorporar em páginas da web.

Recursos

Visualização ao Vivo

Veja seu diagrama renderizado em tempo real conforme digita. A visualização é atualizada automaticamente com um pequeno atraso, para que você obtenha feedback visual instantâneo sem interromper seu fluxo de trabalho.

9 Tipos de Diagramas

Crie fluxogramas, diagramas de sequência, diagramas de classe, diagramas de estado, diagramas ER, gráficos de Gantt, gráficos de pizza, mapas mentais e git graphs — todos a partir de código baseado em texto usando sintaxe Mermaid.js.

Modelos Integrados

Comece rapidamente com modelos prontos para todos os tipos de diagramas suportados. Cada modelo inclui um exemplo funcional que demonstra a sintaxe e a estrutura.

Editor de Código com Números de Linha

O editor possui números de linha, indentação Tab/Shift+Tab e feedback de erro em tempo real. Erros de sintaxe são exibidos claramente abaixo do editor para que você possa corrigir problemas imediatamente.

Opções de Exportação Flexíveis

Exporte seus diagramas finalizados como SVG para gráficos vetoriais escaláveis, ou PNG para imagens de alta resolução em escala 2x. Você também pode copiar o código SVG diretamente para sua área de transferência.

Zoom e Redimensionamento

Amplie a visualização de 25% a 300% usando botões ou Ctrl + roda do mouse. Arraste a alça de redimensionamento para ajustar os tamanhos dos painéis de editor e visualização conforme sua preferência.

Salvamento Automático

Seu código é salvo automaticamente no armazenamento local do seu navegador. Quando você retorna ao editor, seu trabalho está exatamente onde você o deixou.

Modo Escuro

O editor suporta totalmente o modo escuro. Quando você alterna temas, o tema do diagrama Mermaid é atualizado automaticamente para corresponder, garantindo que seus diagramas sempre pareçam corretos.

Seus Dados Permanecem Privados

Toda a renderização acontece no seu navegador

Sem uploads — Seu código nunca sai do seu dispositivo
Sem rastreamento — Não coletamos dados de uso

Perguntas Frequentes

O que é Mermaid.js?

Mermaid.js é uma biblioteca JavaScript de código aberto que gera diagramas e gráficos a partir de definições baseadas em texto. Em vez de desenhar diagramas manualmente, você escreve código simples que descreve a estrutura, e o Mermaid a renderiza como um diagrama visual.

Essa abordagem torna os diagramas controláveis por versão, fáceis de atualizar e perfeitos para incorporar em documentação, wikis e arquivos markdown.

Que tipos de diagramas posso criar?

Este editor suporta 9 tipos de diagramas:

Fluxogramas
Diagramas de sequência
Diagramas de classe
Diagramas de estado
Diagramas ER (relacionamento de entidades)
Gráficos de Gantt
Gráficos de pizza
Mapas mentais
Git graphs

Como aprendo a sintaxe Mermaid?

A forma mais fácil de começar é selecionando um modelo no menu suspenso. Cada modelo fornece um exemplo funcional que você pode estudar e modificar.

A documentação do Mermaid.js também fornece referências de sintaxe abrangentes para cada tipo de diagrama. Comece com exemplos simples e adicione gradualmente complexidade conforme se familiariza com a sintaxe.

Qual é a diferença entre exportação SVG e PNG?

SVG

Formato Vetorial

Dimensiona para qualquer tamanho sem perder qualidade
Ideal para documentos e sites
Pode ser editado em software de gráficos vetoriais
Tamanho de arquivo menor para diagramas simples

PNG

Imagem Raster

Exportado em resolução 2x para exibição nítida
Adequado para apresentações e compartilhamento
Funciona em telas de alta DPI
Compatibilidade universal

Meu código é salvo?

Sim, seu código é salvo automaticamente no armazenamento local do seu navegador. Quando você revisita o editor, seu último código é restaurado.

Importante: Limpar seus dados do navegador também limpará o código salvo. Para diagramas importantes, exporte-os como arquivos SVG ou PNG para backup.

Por que meu diagrama mostra um erro?

Mermaid tem regras de sintaxe específicas para cada tipo de diagrama. Problemas comuns incluem:

Setas ausentes (por exemplo, --> ou --->)
Palavras-chave incorretas ou declarações de tipo de diagrama
Colchetes ou aspas não correspondentes
IDs de nó inválidos ou caracteres especiais
Indentação inadequada em certos tipos de diagramas

Verifique a mensagem de erro abaixo do editor para detalhes sobre o que deu errado. A mensagem geralmente indica o número da linha e o tipo de erro.

Posso usar isso no celular?

Sim. Em telas menores, o layout muda para um arranjo vertical com o editor no topo e a visualização abaixo. Todos os recursos permanecem disponíveis, incluindo modelos, opções de exportação e controles de zoom.

Para a melhor experiência no celular, recomendamos usar orientação paisagem ao trabalhar com diagramas complexos.