O que é Mermaid?
Mermaid é uma ferramenta de diagramas e gráficos baseada em JavaScript que renderiza definições de texto inspiradas em Markdown para criar e modificar diagramas dinamicamente. Ela oferece suporte a fluxogramas, diagramas de sequência, diagramas de classes, diagramas de estados, gráficos de Gantt, gráficos de pizza, diagramas ER e mapas mentais. Mermaid é amplamente usado em documentação, arquivos README e wikis técnicas.
Como usar este editor Mermaid
- 1Digite ou cole a sintaxe Mermaid no painel do editor à esquerda.
- 2A prévia do diagrama é atualizada automaticamente enquanto você digita.
- 3Escolha um tema (default, dark, forest ou neutral) para alterar o estilo do diagrama.
- 4Clique nos botões de exemplos para carregar diagramas de diferentes tipos.
- 5Exporte o diagrama como SVG (vetorial) ou PNG (raster) usando os botões de exportação.
Casos de uso comuns
Criar diagramas de arquitetura
Esboce rapidamente diagramas de arquitetura de sistemas, fluxo de dados ou deployment usando uma sintaxe de texto simples.
Gerar diagramas de sequência
Documente interações de APIs, fluxos de autenticação ou padrões de comunicação entre microsserviços.
Planejar projetos com gráficos de Gantt
Visualize cronogramas de projetos, dependências entre tarefas e marcos.
Perguntas frequentes
Esta ferramenta funciona offline?
Sim. Depois que a página é carregada, toda a renderização dos diagramas acontece no navegador. Não é necessária uma conexão com a internet para as edições seguintes.
Quais tipos de diagrama são compatíveis?
Fluxogramas, diagramas de sequência, diagramas de classes, diagramas de estados, gráficos de Gantt, gráficos de pizza, diagramas ER, mapas mentais e outros. Consulte a documentação do Mermaid para ver a lista completa.