Neste artigo
Porque o Mermaid É a Ferramenta de Diagramas do Programador
A documentação técnica depende frequentemente de diagramas para explicar a arquitetura do sistema, fluxos de trabalho e fluxos de dados. As ferramentas tradicionais de diagramas exigem arrastar formas para uma tela e exportar imagens difíceis de versionar. O Mermaid adota uma abordagem diferente — descreve o seu diagrama numa sintaxe de texto simples, e o renderizador produz um SVG limpo que pode coexistir com o seu código em ficheiros Markdown, wikis e pull requests.
Como os diagramas Mermaid são texto simples, são fáceis de rever em diffs, armazenar no Git e regenerar automaticamente. Isto torna-os ideais para documentação que precisa de evoluir com o código-fonte. Uma ferramenta de pré-visualização em tempo real permite-lhe iterar sobre a sintaxe do diagrama ao vivo, vendo o resultado renderizado à medida que escreve, em vez de esperar por um passo de build ou uma aplicação separada.
Como Utilizar a Ferramenta de Pré-visualização Mermaid
A Pré-visualização Mermaid do CheckTown renderiza o código do seu diagrama instantaneamente para que possa criar e depurar diagramas sem sair do navegador.
- Escreva ou cole a sua sintaxe Mermaid no editor — a pré-visualização atualiza em tempo real à medida que modifica o código
- A ferramenta suporta fluxogramas, diagramas de sequência, diagramas de classes, diagramas de estado, diagramas entidade-relação, gráficos de Gantt, gráficos circulares e muito mais
- Os erros de sintaxe são realçados com mensagens claras para que possa identificar e corrigir problemas imediatamente, em vez de adivinhar o que correu mal
- Exporte o diagrama renderizado como SVG ou PNG para utilizar em apresentações, documentação ou gestores de issues
Experimente gratuitamente — sem cadastro
Abrir Pré-visualização Mermaid →Boas Práticas para Diagramas Mermaid
Algumas convenções mantêm os seus diagramas Mermaid legíveis e fáceis de manter à medida que crescem em complexidade.
- Atribua IDs e rótulos descritivos aos nós — utilize nomes significativos como userService e authDB em vez de genéricos A e B para que o código-fonte se leia como documentação
- Mantenha os diagramas focados num único conceito — divida um sistema complexo em vários diagramas mais pequenos em vez de amontoar tudo num único gráfico ilegível
- Utilize subgraphs para agrupar nós relacionados — isto acrescenta estrutura visual e torna os diagramas grandes mais fáceis de navegar com um relance
Perguntas Frequentes
Que tipos de diagramas Mermaid são suportados?
A pré-visualização suporta todos os principais tipos de diagramas Mermaid, incluindo fluxogramas, diagramas de sequência, diagramas de classes, diagramas de estado, diagramas entidade-relação, gráficos de Gantt, gráficos circulares, mapas de jornada e diagramas de requisitos. O renderizador mantém-se atualizado com as versões mais recentes do Mermaid.js.
Posso incorporar o diagrama gerado no GitHub ou GitLab?
Sim. Tanto o GitHub como o GitLab renderizam blocos de código Mermaid nativamente em ficheiros Markdown. Pode copiar a sintaxe do editor diretamente para um bloco de código delimitado no seu README ou página wiki. A ferramenta de pré-visualização é útil para iterar sobre a sintaxe antes de a submeter no seu repositório.
Existe um limite de tamanho para os diagramas?
Não existe um limite fixo de caracteres. No entanto, diagramas extremamente grandes com centenas de nós podem renderizar lentamente no navegador. Se o seu diagrama se tornar difícil de gerir, considere dividi-lo em diagramas mais pequenos e focados que descrevam cada parte do sistema.