Gerador de Fluxograma Mermaid

Fluxogramas Mermaid: diagramas como código, renderizados em SVG

Mermaid é uma biblioteca JavaScript que transforma uma sintaxe enxuta no estilo markdown em diagramas SVG interativos diretamente no browser. Foi criada em 2014 por Knut Sveidqvist com um objetivo teimoso: permitir que engenheiros descrevessem arquitetura, fluxos e processos em texto puro, para que os diagramas vivessem no git ao lado do código, fossem revisados em pull requests e nunca ficassem fora de sincronia com o sistema que documentam. Uma década depois, Mermaid é cidadão de primeira classe no GitHub (renderizado automaticamente dentro de blocos ```mermaid desde 2022), GitLab, Notion, Obsidian, Azure DevOps e disponível no VS Code via a extensão Markdown Preview Mermaid Support.

Como o fonte é texto, você pode usar grep, calcular diffs e gerar diagramas a partir de scripts. O preço é que o Mermaid usa layout automático — você descreve nós e arestas, não coordenadas — então diagramas muito grandes ficam ilegíveis. Para esses casos, Graphviz/DOT ou PlantUML dão mais controle, e Excalidraw é a alternativa para esboços tipo quadro branco.

Tipos de diagrama suportados pelo Mermaid

• flowchart (alias graph) — grafos direcionados, foco deste gerador
• sequenceDiagram — interação temporal entre atores
• classDiagram — hierarquia e relações UML de classes
• stateDiagram-v2 — máquinas de estado finito
• erDiagram — entidade-relacionamento para bancos
• gantt — cronogramas de projeto
• pie, quadrantChart, sankey — visuais rápidos
• journey, mindmap, timeline, requirementDiagram, gitgraph — domínios específicos

Sintaxe de flowchart: direções, formas e conectores

Um flowchart começa com uma palavra-chave de direção: TD / TB (top-down), LR (esquerda-direita), BT (baixo-cima) ou RL (direita-esquerda). Nós são declarados por id e forma; arestas conectam ids:

flowchart TD
  A[Início] --> B{Logado?}
  B -->|sim| C(Dashboard)
  B -->|não| D[/Formulário de login/]
  D --> E[(Banco)]
  E --> B
  C --> F((Fim))

Formas comuns por brackets: [ ] retângulo, ( ) arredondado, (( )) círculo, ((( ))) círculo duplo, { } losango (decisão), [/ /] e [\ \] paralelogramos (E/S), [[ ]] sub-rotina, [( )] cilindro (banco) e >flag] rótulo assimétrico.

Arsenal de conectores: --> seta, --- linha simples, -.-> pontilhada, ==> espessa, --texto--> com rótulo, <--> bidirecional.

Subgraphs, estilo e clique

Agrupe nós em uma caixa com subgraph título ... end. Defina estilos reutilizáveis com classDef ok fill:#d1fae5,stroke:#10b981 e aplique-os com class A,B ok. Torne um nó clicável com click A "https://exemplo.com" _blank. O editor oficial em mermaid.live permite testar variáveis de tema, exportar SVG/PNG e copiar a URL de compartilhamento para colar em uma PR.

Quando usar Mermaid (e quando não)

Mermaid é excelente para fluxos lineares (autenticação, pagamento, pipeline de deploy) e esboços pequenos de arquitetura que você quer manter em markdown. Ele sofre acima de ~50 nós — o layout automático gera arestas embaraçadas e rótulos sobrepostos. Para diagramas de rede densos, prefira Graphviz/DOT (você controla rank/cluster) ou PlantUML. Para imagens estilo quadro branco, Excalidraw ou draw.io exportam SVG e vivem bem na pasta de docs.

FAQ

Mermaid é melhor para arquitetura ou para fluxo de processo? Fluxo de processo. Fluxos lineares e com ramificações ficam ótimos; arquiteturas em camadas profundas geralmente pedem notação C4-Model ou ferramentas dedicadas.

Consigo customizar cores e fontes? Sim, via classDef, a diretiva %%{init: { 'theme': 'forest' } }%%, ou variáveis de tema completas passadas para mermaid.initialize().

Mermaid combina bem com git? Sim — diagramas ficam em arquivos .md, então o diff é linha-a-linha em pull requests e o diagrama jamais perde sincronia com o fonte versionado.

Como renderizo Mermaid na minha própria página? Cole <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> e chame mermaid.initialize({ startOnLoad: true }); qualquer <div class="mermaid"> com fonte válida vira SVG.

Dá para exportar PNG para slides? Sim — o editor live exporta SVG e PNG diretamente; para exportação headless use o @mermaid-js/mermaid-cli (mmdc -i diagrama.mmd -o out.png).