Definição básica
Um fluxograma é composto por nós (formas geométricas) e linhas de conexão (setas ou linhas). O código Mermaid define como os nós e as linhas de conexão são construídos, e oferece suporte a vários tipos de seta, setas multidirecionais e ligações arbitrárias com subprocessos.
Aviso Se você usar a palavra "end" em um nó de fluxograma, escreva a primeira letra ou a palavra inteira em maiúsculas (por exemplo: "End" ou "END"); digitar "end" todo em minúsculas causará erro no fluxograma.
Aviso Se você usar a letra "o" ou "x" como primeira letra ao conectar nós de fluxograma, adicione um espaço antes da letra ou coloque a letra em maiúscula (por exemplo: "dev--- ops", "dev---Ops").
Um nó (padrão)
Copiar
Incorporar
---
title: Node
---
flowchart LR
id
id é o conteúdo exibido na caixa.
Sintaxe de criação de fluxograma; além de usar flowchart, você também pode usar graph.
Um nó com texto
Também é possível definir para a caixa um texto diferente do id. Se isso for feito várias vezes, o sistema usará o último texto especificado para o nó. Além disso, se uma linha de conexão for definida posteriormente para o nó, a definição de texto pode ser omitida; ao renderizar a caixa, será usado o texto definido anteriormente.
Copiar
Incorporar
---
title: Node with text
---
flowchart LR
id1[This is the text in the box]
Texto Unicode
Use aspas duplas para envolver o texto Unicode.
Copiar
Incorporar
flowchart LR
id["This ❤ Unicode"]
Formato Markdown
Use aspas duplas e crase para envolver o texto Markdown
Copiar
Incorporar
flowchart LR
markdown["`This **is** _Markdown_`"]
newLines["`Line1
Line 2
Line 3`"]
markdown --> newLines
Direção
Declara a direção do fluxograma
Indica que o fluxograma é organizado de cima para baixo (TD ou TB)
Copiar
Incorporar
flowchart TD
Start --> Stop
As direções do fluxograma incluem:
- TB - de cima para baixo
- TD - de cima para baixo (igual a de cima para baixo)
- BT - de baixo para cima
- RL - da direita para a esquerda
- LR - da esquerda para a direita
Forma do nó
Retângulo arredondado
Copiar
Incorporar
flowchart LR
id1(This is the text in the box)
Forma de estádio
Copiar
Incorporar
flowchart LR
id1([This is the text in the box])
Subprocesso
Copiar
Incorporar
flowchart LR
id1[[This is the text in the box]]
Banco de dados
Copiar
Incorporar
flowchart LR
id1[(Database)]
Círculo
Copiar
Incorporar
flowchart LR
id1((This is the text in the circle))
Forma assimétrica
Copiar
Incorporar
flowchart LR
id1>This is the text in the box]
Losango
Copiar
Incorporar
flowchart LR
id1{This is the text in the box}
Hexágono
Copiar
Incorporar
flowchart LR
id1{{This is the text in the box}}
Paralelogramo
Copiar
Incorporar
flowchart TD
id1[/This is the text in the box/]
Paralelogramo invertido
Copiar
Incorporar
flowchart TD
id1[\This is the text in the box\]
Trapézio
Copiar
Incorporar
flowchart TD
A[/ProcessOn\]
Trapézio invertido
Copiar
Incorporar
flowchart TD
B[\ProcessOn/]
Círculo duplo
Copiar
Incorporar
flowchart TD
id1(((This is the text in the circle)))
Extensão de formas de nós em fluxogramas Mermaid
O Mermaid introduziu 30 novas formas para aumentar a flexibilidade e a precisão na criação de fluxogramas. Essas novas formas oferecem mais opções para representar visualmente processos, decisões, eventos, armazenamento de dados e outros elementos do fluxograma, melhorando assim a clareza e o significado semântico.
Nova sintaxe de definição de formas
O Mermaid agora oferece suporte a uma sintaxe geral para definir tipos de forma, a fim de acomodar o número crescente de formas. Essa sintaxe permite especificar uma forma específica para um nó usando um formato claro e flexível.
Copiar
Incorporar
A@{ shape: rect }
Essa sintaxe cria o nó A como um retângulo. Ele é renderizado da mesma forma que [A] ou A.
Lista completa de formas de nós
A seguir está a lista completa das formas de nós recém-introduzidas, com seus respectivos significados, abreviações e aliases:
| Nome semântico | Sintaxe do gráfico | Abreviação da sintaxe | Alternativa de sintaxe | Descrição detalhada |
|---|---|---|---|---|
| Cartão | Notched Rectangle | notch-rect | card, notched-rectangle | Representa um cartão |
| Organizar | Hourglass | hourglass | collate | Representa uma operação de organização |
| Link de comunicação | Lightning Bolt | bolt | com-link, lightning-bolt | Link de comunicação |
| Comentário | Curly Brace | brace | brace-l, comment | Adiciona um comentário |
| Comentário à direita | Curly Brace | brace-r | Adiciona um comentário | |
| Comentário com chaves em ambos os lados | Curly Braces | braces | Adiciona um comentário | |
| Entrada ou saída de dados | Lean Right | lean-r | in-out, lean-right | Representa entrada ou saída |
| Entrada ou saída de dados | Lean Left | lean-l | lean-left, out-in | Representa saída ou entrada |
| Banco de dados | Cylinder | cyl | cylinder, database, db | Armazenamento em banco de dados |
| Decisão | Diamond | diam | decision, diamond, question | Etapa de decisão |
| Atraso | Half-Rounded Rectangle | delay | half-rounded-rectangle | Representa um atraso |
| Armazenamento de acesso direto | Horizontal Cylinder | h-cyl | das, horizontal-cylinder | Armazenamento de acesso direto |
| Armazenamento em disco | Lined Cylinder | lin-cyl | disk, lined-cylinder | Armazenamento em disco |
| Exibição | Curved Trapezoid | curv-trap | curved-trapezoid, display | Indica que a informação é exibida em dispositivos como telas, terminais etc. |
| Processamento dividido | Divided Rectangle | div-rect | div-proc, divided-process, divided-rectangle | Forma de processamento dividido |
| Documento | Document | doc | document | Representa um documento |
| Evento | Rounded Rectangle | rounded | event | Representa um evento |
| Extrair | Triangle | tri | extract, triangle | Processo de extração |
| Bifurcação/Mesclagem | Filled Rectangle | fork | join | Bifurcação ou mesclagem em um fluxograma |
| Armazenamento interno | Window Pane | win-pane | internal-storage, window-pane | Armazenamento interno |
| Ponto de conexão | Filled Circle | f-circ | filled-circle, junction | Ponto de conexão |
| Documento com linha | Lined Document | lin-doc | lined-document | Documento com linha |
| Processo com linha/sombra | Lined Rectangle | lin-rect | lin-proc, lined-process, lined-rectangle, shaded-process | Forma de processo com linha |
| Limite de loop | Trapezoidal Pentagon | notch-pent | loop-limit, notched-pentagon | Etapa de limite de loop |
| Arquivo manual | Flipped Triangle | flip-tri | flipped-triangle, manual-file | Operação de arquivo manual |
| Entrada manual | Sloped Rectangle | sl-rect | manual-input, sloped-rectangle | Etapa de entrada manual |
| Operação manual | Trapezoid Base Top | trap-t | inv-trapezoid, manual, trapezoid-top | Representa uma tarefa manual |
| Vários documentos | Stacked Document | docs | documents, st-doc, stacked-document | 多个文档 |
| Vários processos | Stacked Rectangle | st-rect | processes, procs, stacked-rectangle | 多个进程 |
| Forma irregular | Odd | odd | Forma irregular | |
| Fita de papel | Flag | flag | paper-tape | Fita de papel |
| Condição de preparação | Hexagon | hex | hexagon, prepare | Etapa de preparação ou condição |
| Ação prioritária | Trapezoid Base Bottom | trap-b | priority, trapezoid, trapezoid-bottom | Ação prioritária |
| Processo | Rectangle | rect | proc, process, rectangle | Forma de processo padrão |
| Início | Circle | circle | circ | Ponto de início |
| Início | Small Circle | sm-circ | small-circle, start | Ponto de início circular pequeno |
| Parada | Double Circle | dbl-circ | double-circle | Representa um ponto de parada |
| Parada | Framed Circle | fr-circ | framed-circle, stop | Representa um ponto de parada |
| Armazenar dados | Bow Tie Rectangle | bow-rect | bow-tie-rectangle, stored-data | Armazenar dados |
| Subprocesso | Framed Rectangle | fr-rect | framed-rectangle, subproc, subprocess, subroutine | Subprocesso, sub-rotina |
| Resumo | Crossed Circle | cross-circ | crossed-circle, summary | Resumo |
| Documento com tags | Tagged Document | tag-doc | tagged-document | Documento com tags |
| Processo padronizado | Tagged Rectangle | tag-rect | tag-proc, tagged-process, tagged-rectangle | 已标准进程 |
| Ponto final | Stadium | stadium | pill, terminal | Ponto final |
| Bloco de texto | Text Block | text | Bloco de texto |
A seguir está um exemplo de código de fluxograma que usa as novas formas introduzidas:
Copiar
Incorporar
flowchart RL
A@{ shape: manual-file, label: "File Handling"}
B@{ shape: manual-input, label: "User Input"}
C@{ shape: docs, label: "Multiple Documents"}
D@{ shape: procs, label: "Process Automation"}
E@{ shape: paper-tape, label: "Paper Records"}
Processo
Copiar
Incorporar
flowchart TD
A@{ shape: rect, label: "This is a process" }
Evento
Copiar
Incorporar
flowchart TD
A@{ shape: rounded, label: "This is an event" }
Subprocesso
Copiar
Incorporar
flowchart TD
A@{ shape: subproc, label: "This is a subprocess" }
Banco de dados (cilindro)
Copiar
Incorporar
flowchart TD
A@{ shape: cyl, label: "Database" }
Início (círculo)
Copiar
Incorporar
flowchart TD
A@{ shape: circle, label: "Start" }
Forma irregular
Copiar
Incorporar
flowchart TD
A@{ shape: odd, label: "Odd shape" }
Decisão (losango)
Copiar
Incorporar
flowchart TD
A@{ shape: diamond, label: "Decision" }
Condição de preparação (hexágono)
Copiar
Incorporar
flowchart TD
A@{ shape: hex, label: "Prepare conditional" }
Entrada/saída de dados (inclinado à direita)
Copiar
Incorporar
flowchart TD
A@{ shape: lean-r, label: "Input/Output" }
Entrada/saída de dados (inclinado à esquerda)
Copiar
Incorporar
flowchart TD
A@{ shape: lean-l, label: "Input/Output" }
Ação prioritária (trapézio)
Copiar
Incorporar
flowchart TD
A@{ shape: trap-b, label: "Priority action" }
Operação manual (trapézio invertido)
Copiar
Incorporar
flowchart TD
A@{ shape: trap-t, label: "Manual operation" }
Parada (círculo duplo)
Copiar
Incorporar
flowchart TD
A@{ shape: dbl-circ, label: "Stop" }
Bloco de texto
Copiar
Incorporar
flowchart TD
A@{ shape: text, label: "This is a text block" }
Cartão (retângulo com entalhe)
Copiar
Incorporar
flowchart TD
A@{ shape: notch-rect, label: "Card" }
Processo com linha/sombra
Copiar
Incorporar
flowchart TD
A@{ shape: lin-rect, label: "Lined process" }
Início (círculo pequeno)
Copiar
Incorporar
flowchart TD
A@{ shape: sm-circ, label: "Small start" }
Parada (círculo com moldura)
Copiar
Incorporar
flowchart TD
A@{ shape: framed-circle, label: "Stop" }
Bifurcação/Mesclagem (retângulo longo)
Copiar
Incorporar
flowchart TD
A@{ shape: fork, label: "Fork or Join" }
Organizar (ampulheta)
Copiar
Incorporar
flowchart TD
A@{ shape: hourglass, label: "Collate" }
Comentário (chaves)
Copiar
Incorporar
flowchart TD
A@{ shape: comment, label: "Comment" }
Comentário à direita (chaves à direita)
Copiar
Incorporar
flowchart TD
A@{ shape: brace-r, label: "Comment" }
Comentário (chaves em ambos os lados)
Copiar
Incorporar
flowchart TD
A@{ shape: braces, label: "Comment" }
Link de comunicação (raio)
Copiar
Incorporar
flowchart TD
A@{ shape: bolt, label: "Communication link" }
Documento
Copiar
Incorporar
flowchart TD
A@{ shape: doc, label: "Document" }
Atraso (retângulo com cantos semirretos)
Copiar
Incorporar
flowchart TD
A@{ shape: delay, label: "Delay" }
直接存取存储（水平圆柱）
Copiar
Incorporar
flowchart TD
A@{ shape: das, label: "Direct access to storage" }
Armazenamento em disco (cilindro com ranhura)
Copiar
Incorporar
flowchart TD
A@{ shape: lin-cyl, label: "Disk storage" }
Exibição (forma de exibição)
Copiar
Incorporar
flowchart TD
A@{ shape: curv-trap, label: "Display" }
Processamento dividido (retângulo dividido)
Copiar
Incorporar
flowchart TD
A@{ shape: div-rect, label: "Divided process" }
Extrair (triângulo pequeno)
Copiar
Incorporar
flowchart TD
A@{ shape: tri, label: "Extract" }
Armazenamento interno (painel de janela)
Copiar
Incorporar
flowchart TD
A@{ shape: win-pane, label: "Internal storage" }
Ponto de conexão (círculo preenchido)
Copiar
Incorporar
flowchart TD
A@{ shape: f-circ, label: "Connect" }
Documento com linha
Copiar
Incorporar
flowchart TD
A@{ shape: lin-doc, label: "Lined document" }
Limite de loop (pentágono com entalhe)
Copiar
Incorporar
flowchart TD
A@{ shape: notch-pent, label: "Loop limit" }
Arquivo manual (triângulo invertido)
Copiar
Incorporar
flowchart TD
A@{ shape: flip-tri, label: "Manual file" }
Entrada manual (trapézio retângulo)
Copiar
Incorporar
flowchart TD
A@{ shape: sl-rect, label: "Manual input" }
Vários documentos (documentos empilhados)
Copiar
Incorporar
flowchart TD
A@{ shape: docs, label: "Multi-document" }
Vários processos (retângulos empilhados)
Copiar
Incorporar
flowchart TD
A@{ shape: processes, label: "Multiple processes" }
Fita de papel (bandeira)
Copiar
Incorporar
flowchart TD
A@{ shape: flag, label: "Paper tape" }
Armazenar dados (retângulo laço)
Copiar
Incorporar
flowchart TD
A@{ shape: bow-rect, label: "Data stored" }
Resumo (círculo com cruz)
Copiar
Incorporar
flowchart TD
A@{ shape: cross-circ, label: "Summary" }
Documento com tags
Copiar
Incorporar
flowchart TD
A@{ shape: tag-doc, label: "Tagged document" }
Fluxo marcado
Copiar
Incorporar
flowchart TD
A@{ shape: tag-rect, label: "Tagged process" }
Formas especiais em fluxogramas Mermaid
O Mermaid também introduziu imagens para aprimorar seu fluxograma, permitindo incluir imagens diretamente no fluxograma, oferecendo assim mais contexto visual e clareza.
Forma de imagem
Você pode usar image para inserir uma imagem no fluxograma. A sintaxe para definir uma imagem é a seguinte:
Copiar
Incorporar
flowchart TD
A@{ img: "https://www.processon.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
Parâmetro
- img: o endereço URL da imagem a ser exibida.
- label: o rótulo de texto associado à imagem, que pode ser qualquer string. Se não for definido, nenhum rótulo será exibido.
- pos: a posição do rótulo. Se não for definida, o rótulo será, por padrão, na parte inferior da imagem.
- w: a largura da imagem. Se não for definida, o padrão será a largura natural da imagem.
- h: a altura da imagem. Se não for definida, o padrão será a altura natural da imagem.
- constraint: determina se a imagem restringe o tamanho do nó. Essa configuração também garante que a imagem mantenha sua proporção original e ajusta a altura de acordo com a largura. Se não for definida, o padrão será off.
As imagens oferecem flexibilidade e apelo visual adicionais ao seu fluxograma, tornando-o mais informativo e atraente.
Conexões entre nós
Os nós podem ser conectados por linhas de conexão e setas. Existem diferentes tipos de links, e também é possível anexar strings de texto aos links.
Link com seta
Copiar
Incorporar
flowchart LR
A-->B
Um link aberto
Copiar
Incorporar
flowchart LR
A --- B
Link com texto
Copiar
Incorporar
flowchart LR
A-- This is the text! ---B
ou
Copiar
Incorporar
flowchart LR
A --- | This is the text| B
Link com seta e texto
Copiar
Incorporar
flowchart LR
A-->|text|B
ou
Copiar
Incorporar
flowchart LR
A-- text -->B
Link tracejado
Copiar
Incorporar
flowchart LR
A-.->B;
Link tracejado com texto
Copiar
Incorporar
flowchart LR
A-. text .->B;
Link espesso
Copiar
Incorporar
flowchart LR
A ==> B
Link espesso com texto
Copiar
Incorporar
flowchart LR
A == |text| ==> B
Link invisível
Copiar
Incorporar
flowchart LR
A ~~~ B
Encadeamento de links
Copiar
Incorporar
flowchart LR
A -- text --> B -- text2 --> C
Também é possível declarar vários links de nós na mesma linha, como mostrado abaixo:
Copiar
Incorporar
flowchart LR
a --> b & c--> d
Você também pode descrever dependências, como no código abaixo:
Copiar
Incorporar
flowchart LR
a --> b & c--> d & e--> f
Se você usar a sintaxe básica para descrever o mesmo gráfico, serão necessárias 8 linhas. Vale lembrar que o uso excessivo desse método pode tornar o fluxograma em formato Markdown mais difícil de ler.
Copiar
Incorporar
flowchart TB
a --> b
a --> c
b --> d
b --> e
c --> d
c --> e
d --> f
e --> f
Adicionar um ID à linha de conexão
O Mermaid agora oferece suporte para adicionar um ID a uma linha de conexão, semelhante a anexar um ID e metadados a um nó. Este recurso estabelece a base para estilos, classes e animações mais avançados nas linhas de conexão.
Sintaxe:Para adicionar um ID a uma linha de conexão, coloque o ID antes da sintaxe da linha de conexão, seguido imediatamente pelo caractere @. Por exemplo:
Copiar
Incorporar
flowchart LR
A e1@--> B
Neste exemplo, e1 é o ID da linha de conexão que conecta A e B. Você pode usar esse ID em definições ou instruções de estilo posteriores, assim como faria com um nó.
Ativar animação
Depois de adicionar um ID à linha de conexão, você pode ativar a animação da linha de conexão definindo as suas propriedades:
Copiar
Incorporar
flowchart LR
A e1@==> B
e1@{ animate: true }
Isso informa ao Mermaid que a linha de conexão e1 é animada.
Escolher o tipo de animação
Na versão inicial, há suporte a duas velocidades de animação: fast e slow. Escolher um tipo específico de animação é uma maneira simples de ativar a animação e definir a velocidade de uma só vez.
Copiar
Incorporar
flowchart LR
A e1@--> B
e1@{ animation: fast }
这相当于 e1@{ animate: true, animation: fast }。
Animar usando a instrução classDef
Você também pode animar uma linha de conexão atribuindo uma classe a ela e depois definindo as propriedades de animação na instrução classDef. Por exemplo:
Copiar
Incorporar
flowchart LR
A e1@--> B
classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
Neste trecho de código:
- e1@--> 创建了一个 ID 为 e1 的连接线
- classDef animate define uma classe chamada animate, com propriedades de estilo e animação.
- class e1 animate aplica a classe animate à linha de conexão e1.
Observação sobre escape de vírgulas: ao definir a propriedade stroke-dasharray, lembre-se de escapar a vírgula, pois a vírgula é usada como separador nas definições de estilo do Mermaid.
Novo tipo de seta
Suporta novos tipos de seta
- Linha de conexão com círculo preenchido
- Linha de conexão com marca de cruz
Linha de conexão com círculo preenchido
Copiar
Incorporar
flowchart LR
A --o B
Linha de conexão com marca de cruz
Copiar
Incorporar
flowchart LR
A --x B
Setas multidirecionais
É possível usar setas multidirecionais, por exemplo:
Copiar
Incorporar
flowchart LR
A o--o B
B <--> C
C x--x D
Comprimento da linha de conexão
Cada nó em um fluxograma é atribuído, no gráfico renderizado, a um nível vertical ou horizontal (dependendo da direção do fluxograma), de acordo com os nós a que está conectado. Por padrão, um link pode abranger qualquer número de níveis, mas você pode exigir que uma conexão seja mais longa que as outras adicionando traços extras na definição da conexão.
Neste exemplo, dois traços extras foram adicionados à conexão do nó B para o nó E, fazendo com que ela abranja dois níveis a mais que um link normal:
Copiar
Incorporar
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
Quando o rótulo da conexão é escrito no meio da conexão, traços extras devem ser adicionados à direita da conexão. Este exemplo é equivalente ao anterior:
Copiar
Incorporar
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B -- No ----> E[End]
Para linhas pontilhadas ou links espessos, os caracteres a serem adicionados são o sinal de igual ou o ponto, conforme mostrado na tabela abaixo:
| Comprimento | 1 | 2 | 3 |
|---|---|---|---|
| Conexão normal | --- | ---- | ----- |
| Conexão normal com seta | --> | ---> | ----> |
| Conexão espessa | === | ==== | ===== |
| Conexão espessa com seta | ==> | ===> | ====> |
| Linha pontilhada | -.- | -..- | -...- |
| Linha pontilhada com seta | -.- | -..-> | -...-> |
Caracteres especiais
Você pode colocar o texto entre aspas para renderizar caracteres mais problemáticos. Como no exemplo abaixo:
Copiar
Incorporar
flowchart LR
id1["This is the (text) in the box"]
Codificação de entidades para escapar caracteres
Você pode escapar caracteres usando a sintaxe do exemplo.
Copiar
Incorporar
flowchart LR
A["A double quote:#quot;"] --> B["A dec char:#9829;"]
Os números fornecidos são decimais, então # pode ser codificado como #35. Também há suporte ao uso de nomes de caracteres HTML.
Subgrafo
Copiar
Incorporar
subgraph title
graph definition
end
A seguir está um exemplo:
Copiar
Incorporar
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
Você também pode definir um id para o subgrafo.
Copiar
Incorporar
flowchart TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
Diagrama de fluxo
Usando gráficos do tipo fluxograma, você também pode definir linhas de conexão de e para subgrafos, como no fluxograma abaixo.
Copiar
Incorporar
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
Direção do subgrafo
Ao usar o tipo fluxograma, você pode usar uma instrução de direção para definir a direção de renderização do subgrafo, como mostrado abaixo:
Copiar
Incorporar
flowchart LR
subgraph TOP
direction TB
subgraph B1
direction RL
i1 -->f1
end
subgraph B2
direction BT
i2 -->f2
end
end
A --> TOP --> B
B1 --> B2
Limitações
Se qualquer nó do subgrafo estiver conectado ao exterior, a direção do subgrafo será ignorada. Caso contrário, o subgrafo herdará a direção do gráfico pai:
Copiar
Incorporar
flowchart LR
subgraph subgraph1
direction TB
top1[top] --> bottom1[bottom]
end
subgraph subgraph2
direction TB
top2[top] --> bottom2[bottom]
end
%% ^ These subgraphs are identical, except for the links to them:
%% Link *to* subgraph1: subgraph1 direction is maintained
outside --> subgraph1
%% Link *within* subgraph2:
%% subgraph2 inherits the direction of the top-level graph (LR)
outside ---> top2
String Markdown
As strings Markdown aprimoram fluxogramas e mapas mentais oferecendo um tipo de string mais flexível, com suporte a opções de formatação de texto como negrito e itálico, além da capacidade de quebrar o texto automaticamente dentro dos rótulos.
Copiar
Incorporar
flowchart LR
subgraph "One"
a("`The **cat**
in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}
end
subgraph "`**Two**`"
c("`The **cat**
in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")
end
- Para colocar o texto em negrito, use dois asteriscos (**) antes e depois do texto.
- Itálico usa um único asterisco (*) antes e depois do texto.
- Para strings tradicionais, você precisa adicionar a tag <br> para quebrar o texto em um nó. No entanto, strings Markdown quebram o texto automaticamente quando ele é muito longo, e basta usar um caractere de nova linha em vez da tag <br> para iniciar uma nova linha.
Este recurso se aplica a rótulos de nós, rótulos de linhas de conexão e rótulos de subgrafos
É possível desativar a quebra automática de linha usando uma sintaxe específica
Copiar
Incorporar
---
config:
markdownAutoWrap: false
---
graph LR
Comentário
Você pode inserir comentários em um fluxograma; o editor irá ignorá-los. Os comentários precisam ocupar uma linha própria e devem começar com dois sinais de porcentagem (%%). Da linha onde o comentário começa até a linha seguinte, qualquer texto será considerado comentário, incluindo qualquer sintaxe de fluxograma.
Copiar
Incorporar
flowchart LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
Estilo e classe
Estilo de link
É possível definir o estilo do link. Por exemplo, talvez você queira estilizar um link que se move para trás no fluxo. Como os links não têm ID como os nós, é preciso decidir por outros meios qual estilo o link deve usar. Use o número de ordem ao definir o link, ou use o valor padrão para aplicar a todos os links.
Copiar
Incorporar
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
Também é possível adicionar estilo a vários links separando os números dos links por vírgula em uma única instrução:
Copiar
Incorporar
linkStyle 1,2,7 color:blue;
Definir o estilo de curva da linha de conexão
Se o método padrão não atender às suas necessidades, você pode definir um estilo de curva para as linhas de conexão entre os itens. Os estilos de curva disponíveis incluem basis, bumpX, bumpY, cardinal, catmullRom, linear, monotoneX, monotoneY, natural, step, stepAfter e stepBefore.
No exemplo abaixo, um gráfico da esquerda para a direita usa o estilo de curva stepBefore.
Copiar
Incorporar
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR
Definir o estilo do nó
É possível definir um estilo específico para um nó, como uma borda mais espessa ou uma cor de fundo diferente.
Copiar
Incorporar
flowchart LR
id1(Start)-->id2(Stop)
style id1 fill:#f99,stroke:#33d,stroke-width:4px
style id2 fill:#bfc,stroke:#f96,stroke-width:2px,color:#000,stroke-dasharray: 5 5
Classe
Mais conveniente do que definir o estilo toda vez é definir uma classe de estilo e anexá-la aos nós que precisam de uma aparência diferente.
A definição de classe é a seguinte:
Copiar
Incorporar
classDef className fill:pink,stroke:#333,stroke-width:4px;
Além disso, é possível definir estilos para várias classes em uma única instrução:
Copiar
Incorporar
classDef firstClassName,secondClassName font-size:12pt;
A operação de anexar uma classe a um nó é a seguinte:
Copiar
Incorporar
class nodeId1 className;
Também é possível anexar uma classe a uma lista de nós em uma única instrução:
Copiar
Incorporar
class nodeId1,nodeId2 className;
Para adicionar uma classe, você pode usar o operador ::: para anexar o nome da classe ao nó, como mostrado abaixo:
Copiar
Incorporar
flowchart LR
A:::someclass --> B
classDef someclass fill:#f96
Esta forma pode ser usada ao declarar vários links entre nós:
Copiar
Incorporar
flowchart LR
A:::foo & B:::bar --> C:::foobar
classDef foo stroke:#f00
classDef bar stroke:#0f0
classDef foobar stroke:#00f
- Em declarações de gráfico, as instruções agora também podem terminar sem ponto e vírgula. Após a versão 0.2.16, terminar as instruções de gráfico com ponto e vírgula é apenas opcional. Portanto, a declaração de gráfico abaixo é tão válida quanto as antigas.
- Um espaço é permitido entre vértices e links. No entanto, não deve haver nenhum espaço entre um vértice e seu texto, nem entre um link e seu texto. As declarações de gráfico antigas também continuam válidas, então este novo recurso é opcional e tem como objetivo melhorar a legibilidade.
A seguir está a nova declaração de linha de conexão, que é tão válida quanto a antiga.
Copiar
Incorporar
flowchart LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
