Como escrever um fluxograma Mermaid:uma direção, nós e setas.

Direção

A primeira linha indica o tipo de diagrama e a direção. Tanto flowchart como o mais antigo graph funcionam.

• TD ou TB: de cima para baixo
• BT: de baixo para cima
• LR: da esquerda para a direita
• RL: da direita para a esquerda

Escolha LR para um processo curto que caiba na largura de uma página e TD para um mais longo.

Formas dos nós

Um nó é um id, seguido opcionalmente do seu texto entre parênteses. Os parênteses escolhem a forma:

flowchart LR
    a[Rectangle]
    b(Rounded)
    c([Stadium])
    d[[Subroutine]]
    e[(Database)]
    f((Circle))
    g{Decision}
    h{{Hexagon}}
    i[/Parallelogram/]

Um nó sem parênteses mostra apenas o seu id. Pode referir-se de novo a um nó mais tarde só pelo id, e assim a forma e o texto escrevem-se uma vez.

Ligações e etiquetas

As ligações unem dois nós. A forma da seta mostra o tipo de ligação:

flowchart LR
    A --> B
    B --- C
    C -.-> D
    D ==> E
    E -->|label| F
    F -- text --> G

• --> uma seta, --- uma linha sem ponta
• -.-> uma seta a tracejado, ==> uma grossa
• -->|etiqueta| ou -- etiqueta --> põe texto na ligação
• A --> B & C liga um nó a vários, e A --> B --> C encadeia ligações

Junte traços para alongar uma ligação, por exemplo ---->, quando um nó precisa de mais espaço.

Subgrafos

Um subgrafo agrupa nós numa caixa com título. Começa com subgraph e termina com end:

flowchart TD
    subgraph client [Client]
        A[Browser] --> B[App]
    end
    subgraph server [Server]
        C[API] --> D[(Database)]
    end
    B --> C

A palavra entre parênteses é o título, e a palavra antes dela é o id a que pode ligar. Um subgrafo pode ter no interior a sua própria linha direction LR, embora a direção seja ignorada se um nó interior se ligar a algo no exterior.

Um exemplo completo

Juntando tudo, eis um pequeno processo de lançamento com uma decisão, um regresso atrás e um passo agrupado:

flowchart TD
    A([Start]) --> B[Write the change]
    B --> C{Tests pass?}
    C -->|No| B
    C -->|Yes| D[Open a pull request]
    subgraph review [Review]
        D --> E{Approved?}
        E -->|No| B
    end
    E -->|Yes| F[(Merge)]

Leia-o de cima: a forma de estádio marca o início, os losangos são perguntas, as setas com etiqueta são as respostas e a caixa à volta de dois nós é a revisão. Dar a cada decisão o nome de uma pergunta e a cada seta o da sua resposta torna um fluxograma legível sem explicações.

Comentários e estilos

Uma linha que começa por %% é um comentário e não é desenhada. Para colorir nós, defina uma classe e aplique-a:

flowchart TD
    %% the happy path
    A[Start]:::good --> B[Done]:::good
    classDef good fill:#d4f4dd,stroke:#2d7a46

Mantenha o estilo discreto. A maioria dos fluxogramas lê-se melhor com menos cores, e os estilos podem parecer diferentes nos temas claro e escuro.

Erros comuns

• A palavra end em minúsculas como texto de um nó estraga o diagrama. Escreva End ou ponha o texto entre aspas.
• Um id de nó que começa por o ou x logo a seguir a uma ligação, como A---oB, é lido como uma ligação em círculo ou em cruz. Junte um espaço ou use maiúscula.
• Caracteres especiais numa etiqueta. Parênteses e dois pontos precisam de aspas duplas: A["Guardar (rascunho)"].
• Sem primeira linha. Sem flowchart TD não é desenhado nada.
• Demasiados nós. Um fluxograma com trinta caixas é difícil de ler. Divida-o, ou use subgrafos.

Quando um diagrama falha, o Mermaid mostra uma mensagem de erro e o texto fica no seu ficheiro para corrigir.

Desenhá-lo

O GitHub desenha blocos Mermaid em ficheiros Markdown, e o DotMD também: sem ligação à internet, no tema claro ou escuro, conforme a página. No editor, Insert → Diagram põe no documento um fluxograma a funcionar e a pré-visualização redesenha-se à medida que escreve. O mesmo guia abrange diagramas de sequência, de classes, de estados, ER e de Gantt. Para a sintaxe dos delimitadores, veja os blocos de código em Markdown.

Perguntas sobre fluxogramas Mermaid

Mais perguntas