Um formatador de código opinativo que reimprime JavaScript, TypeScript, CSS, HTML, Markdown, YAML e outras linguagens em um estilo consistente.
mermaid-js/mermaid
Mermaid gera diagramas como fluxogramas, diagramas de sequência e gráficos de Gantt a partir de definições em texto no estilo Markdown.
Alternativa open source a:Lucidchart
draw.io
- Estrelas
- 90,776
- Forks
- 9,374
- Issues abertas
- 1,938
- Último commit
- há 10 horas
O que é?
Mermaid é uma ferramenta de diagramas em JavaScript e TypeScript que transforma definições em texto em diagramas renderizados. Você escreve uma breve descrição em texto, como um fluxograma ou diagrama de sequência, e o Mermaid a renderiza como SVG no navegador ou durante uma etapa do build. Como o diagrama é texto simples, ele pode ser armazenado junto ao código, editado em um pull request e gerado novamente sempre que o sistema subjacente mudar.
O projeto oferece suporte a diversos tipos de diagramas, incluindo fluxogramas, diagramas de sequência, classes, estados, ER, Gantt, pizza, grafos Git, mapas mentais, linhas do tempo, jornadas do usuário e diagramas C4. Ele pode ser usado por meio de um pacote npm, de um script CDN ou do Live Editor online, e o GitHub renderiza blocos de código Mermaid diretamente em arquivos Markdown.
O Mermaid inclui uma etapa padrão de sanitização para entradas não confiáveis e um modo opcional de renderização em iframe isolado para sites que aceitam código de diagramas de usuários externos, com a desvantagem de limitar alguns recursos interativos.
Recursos principais
- 01Renderiza fluxogramas, diagramas de sequência, classes, estados, ER, Gantt e muitos outros tipos de diagramas a partir de texto.
- 02Como os diagramas são texto simples, é fácil compará-los e revisá-los no controle de versão.
- 03Funciona em Markdown do GitHub, por meio de um pacote npm ou de um script CDN.
- 04Oferece personalização de temas, cores, fontes e direção do layout.
- 05Disponibiliza um modo de renderização em sandbox para entradas de diagramas não confiáveis.
Casos de uso
- Manter diagramas de arquitetura e de sequência em um repositório, junto ao código que descrevem.
- Incorporar diagramas em arquivos README do GitHub e em sites de documentação.
- Gerar gráficos como os de Gantt ou de pizza em um pipeline de build.
- Permitir que pessoas não programadoras criem rascunhos de diagramas no Live Editor online.
Início rápido
- 1
Experimente diagramas na hora no Mermaid Live Editor, em mermaid.live
Tópicos
Perguntas frequentes
- O que é mermaid?
- Mermaid gera diagramas como fluxogramas, diagramas de sequência e gráficos de Gantt a partir de definições em texto no estilo Markdown. Mermaid é uma ferramenta de diagramas em JavaScript e TypeScript que transforma definições em texto em diagramas renderizados. Você escreve uma breve descrição em texto, como um fluxograma ou diagrama de sequência, e o Mermaid a renderiza como SVG no navegador ou durante uma etapa do build. Como o diagrama é texto simples, ele pode ser armazenado junto ao código, editado em um pull request e gerado novamente sempre que o sistema subjacente mudar.
- mermaid é gratuito? Qual é a licença?
- mermaid é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
- mermaid ainda é mantido?
- Manutenção ativa. O último commit de mermaid foi em 20 de out. de 2026.
- Para que posso usar mermaid?
- Manter diagramas de arquitetura e de sequência em um repositório, junto ao código que descrevem. Incorporar diagramas em arquivos README do GitHub e em sites de documentação. Gerar gráficos como os de Gantt ou de pizza em um pipeline de build. Permitir que pessoas não programadoras criem rascunhos de diagramas no Live Editor online.
- Como instalar mermaid?
- Experimente diagramas na hora no Mermaid Live Editor, em mermaid.live
- Onde consigo mermaid?
- O código-fonte e as instruções de instalação estão no GitHub: https://github.com/mermaid-js/mermaid
Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.
Projetos relacionados
Um gerador de sites de documentação que transforma arquivos Markdown em um site sem exigir uma etapa de build.
Biblioteca JavaScript e CLI que converte código JS em fluxogramas SVG, com níveis de abstração, modificadores de blocos de código e temas.
Linguagem de modelagem e conjunto de ferramentas que gera diagramas de arquitetura de software baseados em código e atualizados em tempo real, com notação inspirada no C4.
Um compilador de documentação Markdown que transforma uma pasta de origem em um site estático, busca offline, llms.txt e contexto para agentes de IA.
Um scaffolder que gera no seu repositório um site de documentação Astro editável, com Markdown legível por agentes e saída llms.txt incluídos.