Mermaid

Em vez de arrastar caixas num editor gráfico, no Mermaid você escreve o diagrama em texto e a biblioteca desenha. Ela é escrita em JavaScript e entende mais de 20 tipos de diagrama, de fluxogramas a cronogramas Gantt.

Para que serve

• Documentar fluxos dentro do repositório, já que GitHub e GitLab mostram blocos Mermaid direto no Markdown.
• Desenhar diagramas de sequência, classes, estados e entidade-relacionamento para documentação técnica.
• Montar cronogramas, mapas mentais e linhas do tempo.
• Versionar diagramas junto com o código, porque eles são texto.

Antes de desenhar um fluxo, ajuda levantar como o processo funciona hoje; o post sobre mapeamento de processos mostra esse passo.

Como começar

O jeito mais rápido é o Live Editor no navegador, que exporta PNG, SVG ou Markdown. Um fluxograma simples, do exemplo do README, fica assim:

flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

Para usar num projeto, instale como dependência. A documentação pede Node.js 20 ou superior:

npm install mermaid

Também dá para carregar a biblioteca por CDN numa página HTML. O README cita sanitização embutida e um modo sandbox, que renderiza o diagrama num iframe isolado e bloqueia JavaScript, ao custo de parte da interatividade. Há plugins para VS Code, IDEs da JetBrains, Word e PowerPoint, segundo a documentação.

Licença e custo

A biblioteca é MIT, e projeto comercial pode usá-la; o aviso de copyright precisa ir junto com o código copiado. A mesma equipe mantém o Mermaid Chart, um editor no navegador com IA, colaboração e armazenamento, que é produto separado da biblioteca.

Quando vale a pena

O Mermaid atende quem escreve documentação em Markdown e quer diagramas que mudam junto com o código. Para desenho livre, com posição exata de cada elemento, um quadro branco como Excalidraw ou draw.io dá mais controle. Diagramas muito grandes também ficam difíceis de ler e manter em texto.