Fluxograma Mermaid: Criar Diagramas de Fluxo Online

Sintaxe de Fluxograma Mermaid

Fluxogramas são o tipo de diagrama Mermaid mais usado. Mapeiam processos, árvores de decisão e fluxos de sistema usando nós conectados por arestas. A sintaxe se lê como uma descrição do grafo: defina nós com suas formas, conecte-os com setas e, opcionalmente, agrupe-os em subgrafos.

Direção

A primeira linha define a direção geral do fluxo:

flowchart TD    %% cima para baixo (padrão)
flowchart LR    %% esquerda para direita
flowchart RL    %% direita para esquerda
flowchart BT    %% baixo para cima

Escolha LR para fluxos de processó horizontais (linhas do tempo, pipelines). Escolha TD para hierarquias verticais (organogramas, árvores de decisão). Você pode misturar direções dentro de subgrafos.

Formas de Nós

IDs de nós devem ser únicos dentro do diagrama. O texto dentro dos colchetes é o rótulo exibido. Se você precisar de caracteres especiais no rótulo, envolva em aspas: A["Label with (parens)"].

Tipos de Aresta

A --> B        %% seta sólida
A --- B        %% linha sólida, sem seta
A -.-> B       %% seta pontilhada
A -.- B        %% linha pontilhada
A ==> B        %% seta grossa
A === B        %% linha grossa
A -->|rótulo| B %% seta com rótulo
A -- texto --> B %% sintaxe alternativa de rótulo

Subgrafos

Agrupe nós relacionados visualmente:

flowchart LR
    subgraph Backend
        direction TB
        API --> DB
        API --> Cache
    end
    subgraph Frontend
        UI --> API
    end

Subgrafos podem ser aninhados. Arestas podem cruzar limites de subgrafos. Cada subgrafo pode substituir a direção do pai com direction LR ou direction TB.

Estilização

Aplique classes CSS ou estilos inline a nós individuais:

flowchart TD
    A[Crítico] --> B[Normal]
    style A fill:#f43f5e,color:#fff,stroke:#e11d48
    classDef success fill:#10b981,color:#fff
    B:::success

style atinge um único nó por ID. classDef define uma classe reutilizável. Aplique classes com a sintaxe :::className.

Padrões Práticos

Árvore de decisão

flowchart TD
    Start --> Q1{Budget > $1000?}
    Q1 -- Yes --> Q2{Need speed?}
    Q1 -- No --> Budget[Use free tier]
    Q2 -- Yes --> Premium[Premium plan]
    Q2 -- No --> Standard[Standard plan]

Pipeline

flowchart LR
    Source --> Build --> Test --> Deploy --> Monitor

Tratamento de erros

flowchart TD
    Request --> Process{Success?}
    Process -- Yes --> Response[200 OK]
    Process -- No --> Retry{Retries left?}
    Retry -- Yes --> Process
    Retry -- No --> Error[500 Error]

Precisa documentar um fluxo de API? O Diagrama de Sequência Mermaid é feito para interações requisição/resposta. Para esquemas de banco de dados, tente o Diagrama ER Mermaid.