Linha do tempo básica com título
Um histórico cronológico mínimo com um evento por período.
timeline
title História do Produto
2024 : Primeiro protótipo
2025 : Beta privado
2026 : Lançamento públicoReferência de sintaxe de diagramas
Guia rápido & Referência de sintaxe Mermaid
Copie exemplos práticos do diagrama desejado, veja a visualização em tempo real e adapte rótulos e relacionamentos para sua documentação.
Padrão de sintaxe
```mermaid
flowchart LR
A[Write Markdown] --> B[Add Mermaid code]
B --> C[Preview diagram]
C --> D[Publish docs]
```Blocos de código delimitados com o identificador mermaid são renderizados em diagramas interativos automaticamente.
sintaxe fluxograma mermaid
Sintaxe de fluxogramas Mermaid
Use um fluxograma para mostrar como um processo avança de uma etapa à seguinte, incluindo decisões e caminhos alternativos.
Sintaxe copiável
Fluxogramas
flowchart TD
A[Rascunho Markdown] --> B{Precisa de diagrama?}
B -- Sim --> C[Escrever código Mermaid]
B -- Não --> D[Publicar notas]
C --> E[Visualizar e exportar]
E --> DVisualização renderizada
Processos, ramificações, decisões, fluxos de trabalho
Renderizando visualização Mermaid
A sintaxe permanece legível mesmo se o JavaScript estiver desativado.
Inicie com flowchart e escolha TD (cima para baixo) ou LR (esquerda para direita).
Colchetes para nós de processo e chaves para decisões.
Rotule conexões entre hífens, por exemplo -- Sim -->.
sintaxe diagrama de sequencia mermaid
Sintaxe de diagramas de sequência Mermaid
Diagramas de sequência exibem mensagens em ordem temporal. Ideais para chamadas de API, autenticação e comunicação entre serviços.
Sintaxe copiável
Sequência
sequenceDiagram
participant Usuario
participant App
participant Renderer
Usuario->>App: Colar sintaxe Mermaid
App->>Renderer: Validar diagrama
Renderer-->>App: Visualização SVG
App-->>Usuario: Opções de exportaçãoVisualização renderizada
APIs, fluxos de requisição-resposta, mensagens de serviços
Renderizando visualização Mermaid
A sintaxe permanece legível mesmo se o JavaScript estiver desativado.
Declare participantes para controlar a ordem e nomes exibidos.
Use ->> para chamadas de requisição e -->> para retornos de resposta.
Escreva o texto da mensagem após dois-pontos.
exemplo cronograma mermaid
Sintaxe de cronogramas Mermaid
Cronogramas organizam eventos em ordem cronológica. Use-os para histórico de versões, roadmaps e marcos.
Sintaxe copiável
Cronograma
timeline
title História do Markdown
2004 : Criação do Markdown : John Gruber & Aaron Swartz
2011 : Lançamento do padrão CommonMark
2014 : GitHub Flavored Markdown (GFM)
2026 : Ferramentas TheMarkdownerVisualização renderizada
Históricos de versões, roadmaps, cronologia de projetos
Renderizando visualização Mermaid
A sintaxe permanece legível mesmo se o JavaScript estiver desativado.
Mais padrões de linha do tempo
4 exemplos de cronogramas Mermaid para copiar
Vários eventos no mesmo período
Use dois-pontos adicionais para agrupar marcos relacionados em um único período.
timeline
title Plano de Lançamento 2026
T1 : Pesquisa com clientes : Roadmap aprovado
T2 : Beta privado : Documentação
T3 : Disponibilidade geral : Revisão de adoçãoRoadmap por sprints
Agrupe os períodos de entrega com seções para um roadmap de software legível.
timeline
title Sprints de Software
section Descoberta
Sprint 1 : Definir escopo : Protótipo
section Entrega
Sprint 2 : Construir editor : Adicionar validação
section Lançamento
Sprint 3 : Revisão de acessibilidade : LançamentoHistórico de versões
Documente as versões do software e as mudanças relevantes em ordem cronológica.
timeline
title Histórico de Versões
v1.0 : Lançamento inicial : Editor principal
v1.1 : Exportação SVG : Tema escuro
v2.0 : Construtor de linha do tempo : Links compartilháveisInicie com a palavra-chave timeline.
Defina períodos seguidos de dois-pontos e especifique os eventos.
Use dois-pontos para separar múltiplos eventos no mesmo período.
sintaxe diagrama er mermaid
Sintaxe de diagramas ER Mermaid
Diagramas entidade-relacionamento mostram entidades de banco de dados e suas conexões.
Sintaxe copiável
Diagramas ER
erDiagram
DOCUMENTO ||--o{ DIAGRAMA : contem
DOCUMENTO {
string titulo
string formato
}
DIAGRAMA {
string tipo
string fonte
}Visualização renderizada
Esquemas de bancos de dados, modelos relacionais, contratos de dados
Renderizando visualização Mermaid
A sintaxe permanece legível mesmo se o JavaScript estiver desativado.
Declare erDiagram na primeira linha.
Defina conexões usando símbolos como ||--o{ (um para muitos).
Envolva propriedades de tabelas em chaves.
sintaxe diagrama de classes mermaid
Sintaxe de diagramas de classes Mermaid
Diagramas de classes exibem objetos, propriedades, métodos e heranças para documentação orientada a objetos.
Sintaxe copiável
Classes
classDiagram
class Documento {
+string titulo
+string formato
+convertToMarkdown()
}
class Diagrama {
+string tipo
+render()
}
Documento "1" --> "0..*" Diagrama : incluiVisualização renderizada
Objetos, propriedades, classes, estrutura de código
Renderizando visualização Mermaid
A sintaxe permanece legível mesmo se o JavaScript estiver desativado.
Inicie com classDiagram no topo.
Use + para membros públicos e - para privados.
Especifique associações com setas como -->.
sintaxe diagrama de estados mermaid
Sintaxe de diagramas de estado Mermaid
Mostram os estados válidos de um sistema e os eventos que causam transições entre eles.
Sintaxe copiável
Estados
stateDiagram-v2
[*] --> Rascunho
Rascunho --> Visualizacao: renderizar
Visualizacao --> Erro: erro de sintaxe
Visualizacao --> Publicado: exportar
Erro --> Rascunho: corrigir codigoVisualização renderizada
Ciclos de vida, modos operacionais, transições
Renderizando visualização Mermaid
A sintaxe permanece legível mesmo se o JavaScript estiver desativado.
Use stateDiagram-v2 para a sintaxe moderna.
Represente início e fim usando [*].
Adicione rótulos de eventos após dois-pontos.
sintaxe diagrama de gantt mermaid
Sintaxe de diagramas de Gantt Mermaid
Diagramas de Gantt posicionam tarefas em um cronograma com datas, durações, marcos e dependências.
Sintaxe copiável
Gantt
gantt
title Lançamento da Documentação
dateFormat YYYY-MM-DD
section Redação
Escrever guia :a1, 2026-06-12, 2d
Revisar exemplos :after a1, 1d
section Publicação
Capturas de tela :1d
Lançar página :1dVisualização renderizada
Planejamento de projetos, marcos, acompanhamento de sprints
Renderizando visualização Mermaid
A sintaxe permanece legível mesmo se o JavaScript estiver desativado.
Declare dateFormat para corresponder ao formato de datas.
Organize itens em seções usando section.
Encadeie dependências com after id-tarefa.
sintaxe grafico de pizza mermaid
Sintaxe de gráficos de pizza Mermaid
Exibem como categorias contribuem para um total. Ideais para fontes de tráfego e pesquisas.
Sintaxe copiável
Gráficos de pizza
pie showData
title Tipos de diagramas na documentação
"Fluxogramas" : 40
"Diagramas de sequência" : 25
"Diagramas ER" : 20
"Outros" : 15Visualização renderizada
Distribuições, fatias de mercado, estatísticas
Renderizando visualização Mermaid
A sintaxe permanece legível mesmo se o JavaScript estiver desativado.
Use pie showData para exibir os valores brutos ao lado dos rótulos.
Envolva nomes com espaços entre aspas duplas.
Mantenha um número reduzido de fatias para facilitar a leitura.
sintaxe mapa mental mermaid
Sintaxe de mapas mentais Mermaid
Estruturam um tema central e seus ramos por meio de recuos hierárquicos.
Sintaxe copiável
Mapas mentais
mindmap
root((Mermaid))
Markdown
Arquivos README
Sites de documentação
Diagramas
Fluxogramas
Sequência
ERDVisualização renderizada
Estruturas de tópicos, brainstorming, hierarquias
Renderizando visualização Mermaid
A sintaxe permanece legível mesmo se o JavaScript estiver desativado.
Use espaços de recuo para aninhar ramos secundários.
Declare root((Nó)) para um núcleo visual destacado.
Mantenha os textos curtos para preservar o espaçamento.
Solução de problemas
Erros comuns de sintaxe no Mermaid
A maioria dos erros do Mermaid vem de um identificador de tipo de diagrama ausente, de uma seta escrita incorretamente ou de um rótulo que exige aspas duplas. Se um diagrama não compilar, reduza o código a uma única relação e devolva as linhas gradualmente.
Identificador de diagrama ausente
Blocos Mermaid precisam de uma primeira linha com a palavra-chave (por exemplo flowchart, sequenceDiagram ou erDiagram) para que o analisador saiba qual estrutura construir.
Pontuação de seta incorreta
As setas dependem do tipo de diagrama. Fluxogramas usam -->, enquanto diagramas de sequência exigem ->> e retornos com -->>.
Caracteres especiais sem aspas
A pontuação dentro de um rótulo pode ser confundida com sintaxe do Mermaid. Coloque o rótulo entre aspas duplas ou mantenha o ID do nó separado do texto exibido.
Indentação inconsistente
Mapas mentais e roadmaps de linha do tempo dependem muito do espaçamento da indentação. Confirme que os elementos filhos aninhados usam a mesma indentação.
Perguntas frequentes
Como este guia rápido de Mermaid está estruturado?
Cada seção combina um bloco de código funcional com visualização renderizada e notas práticas de sintaxe.
Posso exportar diagramas Mermaid como imagem?
Sim. Cole o código no editor Mermaid e baixe em SVG, PNG ou PDF.
Diagramas Mermaid funcionam no GitHub?
Sim. GitHub, GitLab e Obsidian renderizam blocos de código ```mermaid nativamente.
Utilitários de sintaxe
Comentários e caracteres especiais no Mermaid
Comentários e rótulos com escape funcionam em todos os tipos de diagrama, portanto não dependem da sintaxe de linha do tempo. Use comentários para notas de manutenção e entidades HTML quando um rótulo contiver pontuação da sintaxe.
Adicionar um comentário Mermaid
Linhas que começam com
%%permanecem no código-fonte, mas não são renderizadas.Escapar a pontuação da sintaxe
Use uma entidade HTML quando os dois-pontos fizerem parte de um rótulo.