Repolode
mermaid-js

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:Lucidchartdraw.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. 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