Liste períodos e eventos linha a linha depois de timeline: 2007 : Lançamento do iPhone, 2008 : App Store : Android 1.0. Vários eventos podem dividir um período, e section agrupa períodos em fases. Bom para a história de uma empresa, roadmaps de versões e aulas de história, exportado em SVG ou PNG.
Como usar
- Escolha um tipo de diagrama para carregar um exemplo ou digite código Mermaid. A prévia atualiza logo depois que você para de digitar.
- Erros mostram a linha e a mensagem do analisador; toque no erro para selecionar a linha. O último diagrama válido continua visível, esmaecido.
- Use os botões ou Ctrl + roda do mouse para o zoom. As cores seguem o modo claro ou escuro.
- Copie ou baixe o SVG, ou baixe um PNG com o dobro do tamanho. Ative Transparente para exportar sem fundo.
- Copie um link para compartilhar: o código vai comprimido no link depois do #.
- O Mermaid desenha os diagramas no seu navegador; seu texto nunca é enviado. O editor lembra o último diagrama.
- Você pode abrir arquivos .mmd ou Markdown; o primeiro bloco ```mermaid é usado.
- O Mermaid roda em modo de segurança estrito, então cliques e HTML em rótulos ficam desativados.
Por que diagramas como código
O Mermaid descreve um diagrama em poucas linhas legíveis, em vez de caixas arrastadas à mão. flowchart LR e depois A[Início] --> B{OK?} e B -->|sim| C[Publicar] já desenham uma decisão. Como é texto, o diagrama pode ficar junto do código no Git, ser revisado num pull request e atualizado mudando uma linha; o layout é calculado sozinho.
GitHub, GitLab, Notion, Obsidian e muitas ferramentas de documentação renderizam blocos ```mermaid diretamente, então um diagrama escrito aqui pode ser colado num README sem mudanças. Use este editor para acertar a sintaxe com retorno imediato e exporte SVG ou PNG para lugares que só aceitam imagens.
Qual tipo de diagrama escolher
Fluxogramas mostram processos e decisões; diagramas de sequência, mensagens entre serviços ou pessoas ao longo do tempo; diagramas de classes, tipos e suas relações; diagramas de estados, como algo passa de um estado a outro; diagramas ER, tabelas de banco de dados com cardinalidade pé de galinha; gráficos de Gantt planejam tarefas com datas e dependências; gráficos de pizza mostram partes de um todo; mapas mentais partem de uma ideia; linhas do tempo organizam eventos por período.
Dicas
Use IDs de nó curtos e coloque o texto legível entre colchetes: A[Cliente faz o pedido]. Coloque entre aspas rótulos com caracteres especiais. Agrupe com subgraph nos fluxogramas e com blocos alt ou loop nos diagramas de sequência. Se o desenho ficar apertado, troque a direção de TD para LR ou divida em dois.
Perguntas frequentes
O que é o Mermaid?
O Mermaid é uma biblioteca JavaScript de código aberto que desenha diagramas a partir de uma sintaxe de texto parecida com Markdown. GitHub, GitLab e muitas wikis e apps de notas têm suporte nativo.
Posso usar o diagrama num README do GitHub?
Sim. Copie o código num bloco que comece com ```mermaid e o GitHub desenha. Se a plataforma não aceitar Mermaid, exporte SVG ou PNG e insira a imagem.
Por que meu diagrama mostra erro de sintaxe?
A mensagem indica a linha e o que o parser esperava. As causas comuns são uma seta faltando, colchete ou aspas sem fechar ou uma palavra reservada como end usada como ID; escreva End ou coloque entre aspas.
Como exporto uma imagem em alta resolução?
Baixe o PNG para ter uma imagem no dobro do tamanho da tela, nítida em telas de alta densidade e em slides. Para imprimir ou editar depois, baixe o SVG, que escala sem perda. Ative Transparente para tirar o fundo.
Dá para compartilhar um diagrama sem enviá-lo?
Sim. Copie o link de compartilhamento: o código Mermaid vai comprimido na parte da URL depois do #, que os navegadores não enviam aos servidores. Abrir o link restaura o diagrama.
Eventos de clique e rótulos HTML funcionam?
Não. Aqui o Mermaid roda em modo de segurança estrito, então cliques, links e HTML dentro de rótulos ficam desativados. O resto da sintaxe é desenhado normalmente.