Cole Mermaid. Veja o diagrama. Na hora.

Cole Mermaid, visualize instantaneamente, exporte SVG/PNG, envie arquivos, arraste para mover e compartilhe por URL.

Modelos rápidos
Abrir um arquivo MermaidSolte em qualquer lugar — .mmd · .mermaid · .md · .txt · Como abrir um arquivo .mmd
Carregando Mermaid...Ln 1, Col 1
Dica: na prévia, clique e arraste (ou toque e arraste) para mover. Solte arquivos na prévia para carregá-los.

O que é Mermaid?

Mermaid é uma ferramenta de diagramação e gráficos baseada em JavaScript que usa definições de texto inspiradas em Markdown para criar e modificar diagramas dinamicamente. É um projeto open source que permite gerar diagramas a partir de descrições de texto simples.

Em vez de usar ferramentas de desenho complexas, você escreve uma sintaxe semelhante a código que descreve seu diagrama, e o Mermaid o renderiza como um diagrama visual. Essa abordagem torna os diagramas versionáveis, fáceis de atualizar e perfeitos para documentação.

Mermaid integra-se perfeitamente a plataformas de documentação, wikis e arquivos Markdown, tornando-se uma ferramenta favorita entre desenvolvedores e redatores técnicos.

Por que usar Mermaid?

  • Controle de versão: diagramas são arquivos de texto, então podem ser rastreados no Git junto com seu código
  • Atualizações rápidas: altere algumas linhas de texto em vez de redesenhar diagramas inteiros
  • Consistência: o Mermaid cuida automaticamente do layout e do estilo, garantindo diagramas consistentes
  • Sem ferramentas de design: não é necessário Visio, Lucidchart ou outras ferramentas caras
  • Documentação como código: mantenha os diagramas no mesmo repositório da sua documentação
  • Multiplataforma: funciona em navegadores e Node.js e se integra a muitas plataformas
  • Gratuito e open source: sem custos de licença, comunidade ativa
  • Múltiplos tipos de diagramas: suporta fluxogramas, diagramas de sequência, diagramas de classes e mais

Fluxograma

Crie fluxogramas profissionais usando sintaxe simples baseada em texto. Visualização instantânea, exportação para SVG/PNG e compartilhamento por URL - tudo grátis.

Diagrama de Sequência

Projete diagramas de sequência UML para visualizar interações entre componentes do sistema. Perfeito para documentação de API e design de sistemas.

Gráfico Gantt

Planeje e visualize cronogramas de projeto com gráficos Gantt. Rastreie tarefas, dependências e marcos usando sintaxe de texto simples.

Diagrama de Classe

Projete sistemas orientados a objetos com diagramas de classe UML. Defina classes, atributos, métodos e relacionamentos usando texto simples.

Diagrama de Estado

Visualize máquinas de estado e comportamento do sistema com diagramas de estado. Modele estados, transições e eventos usando texto simples.

Diagrama ER

Projete esquemas de banco de dados com diagramas entidade-relacionamento. Defina entidades, atributos e relacionamentos usando sintaxe de texto simples.

Publicidade

Guia completo de diagramas Mermaid

Aprenda a criar diagramas profissionais usando uma sintaxe simples baseada em texto

Perguntas frequentes

Perguntas comuns sobre o uso do Mermaid Viewer e a criação de diagramas

Este editor Mermaid é realmente gratuito?
Sim, totalmente grátis. Você pode criar diagramas ilimitados, exportar para SVG/PNG, compartilhar por URL e usar todos os recursos sem cadastro ou pagamento. A ferramenta é sustentada por publicidade não intrusiva.
Preciso instalar alguma coisa?
Não precisa instalar nada. É uma ferramenta web que funciona totalmente no navegador. Basta abrir o site e começar a criar em desktop, tablet ou celular.
Como salvo meus diagramas?
Você pode salvar de várias formas: 1) exportar como SVG ou PNG, 2) compartilhar por URL (o código fica codificado na URL), 3) copiar o código Mermaid para seus arquivos, 4) enviar/baixar arquivos .mmd ou .mermaid.
Posso usar os diagramas na documentação?
Com certeza. Exporte seus diagramas como SVG (escalável) ou PNG e use em documentação, apresentações ou sites. Também é possível incorporar o código Mermaid em plataformas como GitHub, GitLab e Notion.
Qual a diferença entre SVG e PNG?
SVG é vetorial, mantém qualidade em qualquer tamanho e é ideal para documentação e web. PNG é raster, bom para compartilhamento rápido, mas perde qualidade ao redimensionar.
Por que meu diagrama não renderiza?
Verifique erros de sintaxe no seu código Mermaid. Problemas comuns: aspas não fechadas, dois-pontos/ponto e vírgula ausentes, IDs de nós incorretos ou sintaxe não suportada. Simplifique o diagrama para encontrar o erro.
Posso colaborar com outras pessoas?
Não há colaboração em tempo real embutida, mas você pode compartilhar por URL. Outras pessoas podem abrir, editar e devolver uma versão atualizada. Como Mermaid é baseado em texto, também funciona muito bem com Git.
Funciona offline?
O primeiro carregamento exige internet. Depois disso, a edição básica normalmente funciona offline. Alguns recursos, como exportação, podem precisar de conexão.
Como aprender a sintaxe do Mermaid?
Comece pelo nosso guia completo de Mermaid com exemplos de todos os tipos de diagrama. Use os templates para iniciar rápido e complemente com a documentação oficial em mermaid.js.org.
Posso personalizar a aparência?
Sim. Os diagramas seguem o tema do site: alterne entre claro e escuro com o botão Tema na barra superior e o diagrama é renderizado novamente com o tema correspondente do Mermaid. Para customização avançada, use a diretiva %%{init:...}%% para definir cores, fontes e outras propriedades visuais.
Quais tipos de diagramas são suportados?
Este editor suporta os principais tipos do Mermaid: fluxogramas, diagramas de sequência, classe, estado, ER, Gantt, pizza, Git graph, user journey e outros.
Meus dados de diagrama são privados?
O código do seu diagrama nunca é enviado aos nossos servidores. Todo o render acontece no navegador. Ao compartilhar por URL, o código fica na própria URL; não armazenamos nem rastreamos seu conteúdo.
Por que usar diagramas baseados em texto?
Diagramas baseados em texto têm várias vantagens: versionamento (ideal para Git), atualização rápida, estilo consistente, busca fácil, formato leve e geração programática. Também são mais fáceis de revisar em pull requests.
Posso incorporar Mermaid no meu site?
Sim. Inclua a biblioteca JavaScript do Mermaid no seu site e adicione blocos de código Mermaid. Muitas plataformas já oferecem suporte nativo, como GitHub, GitLab, Notion e Obsidian.
Qual é o tamanho máximo recomendado?
Não há limite rígido, mas diagramas muito grandes (acima de ~100 nós) podem renderizar lentamente dependendo do dispositivo. Em sistemas complexos, prefira dividir em vários diagramas menores.