Flowchart do Mermaid para diagrama editável

Como funciona

1. 01

   Cole seu código Mermaid

   Código de um arquivo Markdown, de um README ou de um chat de IA. Um bloco de código mermaid em volta e um bloco de configuração no topo funcionam normalmente.

2. 02

   Veja um diagrama editável

   Os nós do fluxograma viram formas como processo, decisão e documento, os subgrafos viram molduras e as entidades ER viram cartões de tabela.

3. 03

   Abra no Archboard

   Salve como um novo diagrama para mover e reestilizar as formas, adicionar notas, compartilhar um link ou exportar em SVG e PNG. Para se cadastrar basta uma conta Google ou GitHub.

O que é desenhado a partir do código Mermaid

Estas partes do seu código viram elementos editáveis do diagrama:

• flowchartgraph

  Diagramas flowchart e graph, incluindo flowchart-elk, com cada nó e seu rótulo. Prefixos do Font Awesome como fa:fa-car são removidos dos rótulos.

• @{ shape }

  As formas dos nós, escritas com colchetes ou com a sintaxe de formas mais nova, viram elementos de fluxograma: processo, decisão, início e fim, dados, documento, preparação, entrada manual e conector. Formas sem equivalente viram a forma básica mais próxima, como um cilindro, ou uma caixa de processo.

• subgraph

  Subgrafos como molduras em volta dos seus nós, incluindo subgrafos aninhados. Um subgrafo vazio fica de fora.

• -->-.->==>

  Setas com seus rótulos, contínuas, pontilhadas ou grossas, incluindo cadeias como A --> B --> C e ramificações como A --> B & C.

• erDiagram

  Entidades do erDiagram como cartões de tabela que listam cada atributo com seu tipo e a chave PK, FK ou UK, e relacionamentos com sua cardinalidade. Relacionamentos não identificadores ficam tracejados.

• TDLR

  A direção do fluxograma, TD, TB, LR, RL ou BT, define para que lado o diagrama flui.

Tipos de diagrama do Mermaid suportados

Hoje são convertidos fluxogramas (flowchart e graph) e diagramas entidade-relacionamento (erDiagram). sequenceDiagram, classDiagram, stateDiagram, gantt, pie, mindmap, timeline, gitGraph e os tipos mais novos ainda não são convertidos: a ferramenta informa o tipo que encontrou em vez de desenhar um fluxograma errado.

O que uma importação do Mermaid deixa de fora

• Diagramas de sequência, de classes, de estados e de Gantt, gráficos de pizza, mapas mentais e outros tipos. Por enquanto, só fluxogramas e diagramas ER são convertidos.
• Cores e fontes de classDef, style, linkStyle e class: o diagrama começa com os estilos do Archboard, que você pode mudar no canvas.
• Ícones e imagens nos nós: as configurações icon e img são descartadas e o rótulo é mantido.
• Um vínculo ao vivo com o seu código: editar o canvas não muda o código Mermaid, e mudanças posteriores no código não atualizam o diagrama.