Guia completo de diagramas Mermaid.js
Aprenda a criar diagramas profissionais usando uma sintaxe simples baseada em texto
O que é Mermaid.js?
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.js?
- 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
Tipos de diagramas suportados
O Mermaid suporta uma ampla variedade de tipos de diagramas para diferentes necessidades de documentação:
Fluxograma
Visualize fluxos de trabalho, processos e árvores de decisão com nós e arestas.
flowchart TD
A[Start] --> B{Decision}
B -->|Yes| C[Process]
B -->|No| D[Alternative]
C --> E[End]
D --> ECaso de uso: Fluxos de processo, algoritmos, lógica de decisão
Diagrama de sequência
Mostra interações entre diferentes atores ou sistemas ao longo do tempo.
sequenceDiagram
participant User
participant API
participant DB
User->>API: Request data
API->>DB: Query
DB-->>API: Results
API-->>User: ResponseCaso de uso: Interações de API, comunicação de sistemas, fluxos de usuário
Diagrama de classes
Modela sistemas orientados a objetos com classes, atributos e relacionamentos.
classDiagram
class Animal {
+String name
+int age
+makeSound()
}
class Dog {
+bark()
}
Animal <|-- DogCaso de uso: Arquitetura de software, design OOP, esquemas de banco de dados
Diagrama de estados
Representa estados e transições em um sistema ou processo.
stateDiagram-v2
[*] --> Idle
Idle --> Loading: Start
Loading --> Success: Complete
Loading --> Error: Fail
Success --> [*]
Error --> Idle: RetryCaso de uso: Máquinas de estado, gestão do ciclo de vida, estados de UI
Diagrama entidade‑relacionamento
Modela estruturas de banco de dados e relações entre entidades.
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
CUSTOMER {
int id
string name
string email
}Caso de uso: Design de banco de dados, modelagem de dados, arquitetura de sistemas
Diagrama de Gantt
Planeje e visualize cronogramas e linhas do tempo de projetos.
gantt
title Project Timeline
dateFormat YYYY-MM-DD
section Phase 1
Design :a1, 2024-01-01, 30d
Development :a2, after a1, 45dCaso de uso: Planejamento de projetos, cronogramas de sprint, roadmaps
Gráfico de setores
Mostra dados proporcionais e percentuais visualmente.
pie title Distribution
"Category A" : 42
"Category B" : 30
"Category C" : 28Caso de uso: Resultados de pesquisas, participação de mercado, alocação de recursos
Gráfico de Git
Visualize estratégias de ramificação do Git e o histórico de commits.
gitGraph
commit
branch develop
checkout develop
commit
checkout main
merge developCaso de uso: Documentação de workflow do Git, estratégias de branching
Primeiros passos com Mermaid
1. Escolha o tipo de diagrama
Comece decidindo qual tipo de diagrama melhor representa o que você quer mostrar. Cada tipo começa com uma palavra-chave específica como 'flowchart', 'sequenceDiagram' ou 'classDiagram'.
2. Escreva a sintaxe em texto
Use a sintaxe simples do Mermaid para descrever seu diagrama. A sintaxe é intuitiva e parece linguagem natural. Por exemplo, 'A --> B' cria uma seta de A para B.
3. Pré-visualize seu diagrama
Use nosso visualizador online ou qualquer ferramenta compatível com Mermaid para ver seu diagrama renderizado em tempo real. Ajuste conforme necessário até ficar satisfeito.
4. Exporte e compartilhe
Exporte seu diagrama como SVG ou PNG para apresentações ou compartilhe uma URL com sua equipe. Você também pode incorporar Mermaid diretamente em arquivos Markdown.
Boas práticas
- Mantenha os diagramas focados em um único conceito ou fluxo de trabalho
- Use rótulos significativos que descrevam a lógica de negócio real
- Divida diagramas complexos em diagramas menores e interconectados
- Adicione comentários usando %% para explicar seções complexas
- Use convenções de nomenclatura consistentes em seus diagramas
- Teste seus diagramas no ambiente de destino antes de finalizá-los
- Inclua dicas de direção (TD, LR) para controlar o layout quando necessário
- Use subgraphs para agrupar nós relacionados em fluxogramas
- Use opções de estilo com moderação para manter a legibilidade
- Versione os arquivos de origem dos diagramas junto com seu código
Casos de uso comuns
Documentação de software
Documente arquitetura de sistemas, fluxos de API e interações de componentes junto com seu código.
Planejamento de projetos
Crie diagramas de Gantt para planejamento de sprints, cronogramas de projetos e alocação de recursos.
Propostas técnicas
Visualize soluções propostas, designs de sistema e decisões arquiteturais.
Jornadas do usuário
Mapeie fluxos de usuário, experiências do cliente e padrões de interação.
Design de banco de dados
Modele relacionamentos entre entidades, estruturas de schema e dependências de dados.
Documentação de processos
Documente processos de negócio, fluxos de trabalho e procedimentos operacionais padrão.
Materiais educacionais
Crie diagramas claros e versionados para tutoriais e cursos técnicos.
Documentação de API
Ilustre fluxos de requisição/resposta, sequências de autenticação e interações de endpoints.
Recursos adicionais
Perguntas frequentes
Perguntas comuns sobre o uso do Mermaid Viewer e a criação de diagramas
Pronto para criar seu primeiro diagrama?
Experimente nosso visualizador Mermaid online gratuito e comece a criar diagramas profissionais em minutos.
Abrir o visualizador Mermaid