Definizione di base
Un diagramma di flusso è composto da nodi (forme geometriche) e linee di collegamento (frecce o linee). Il codice Mermaid definisce come vengono costruiti i nodi e le linee di collegamento e supporta diversi tipi di freccia, frecce multidirezionali e collegamenti arbitrari con i sottografi.
Avviso Se usi la parola "end" in un nodo del diagramma di flusso, scrivi con la maiuscola la prima lettera o l'intera parola (ad esempio: "End" o "END"); se digiti tutto in minuscolo "end" il diagramma di flusso genererà un errore.
Avviso Se colleghi nodi di un diagramma di flusso usando le lettere "o" o "x" come primo carattere, aggiungi uno spazio prima della lettera oppure scrivi la lettera in maiuscolo (ad esempio: "dev--- ops", "dev---Ops").
Un nodo (predefinito)
Copia
Incorpora
---
title: Node
---
flowchart LR
id
id è ciò che viene mostrato nel riquadro.
Nella sintassi di creazione del diagramma di flusso, oltre a flowchart puoi usare anche graph.
Un nodo con testo
Puoi anche impostare per il riquadro un testo diverso dall'id. Se esegui questa operazione più volte, il sistema adotta il testo specificato per ultimo per quel nodo. Inoltre, se in seguito definisci una linea di collegamento per il nodo, puoi omettere la definizione del testo; durante il rendering del riquadro verrà usato il testo definito in precedenza.
Copia
Incorpora
---
title: Node with text
---
flowchart LR
id1[This is the text in the box]
Testo Unicode
Racchiudi il testo Unicode tra virgolette doppie.
Copia
Incorpora
flowchart LR
id["This ❤ Unicode"]
Formato Markdown
Racchiudi il testo Markdown tra virgolette doppie e backtick
Copia
Incorpora
flowchart LR
markdown["`This **is** _Markdown_`"]
newLines["`Line1
Line 2
Line 3`"]
markdown --> newLines
Direzione
Dichiara la direzione del diagramma di flusso
Indica che il diagramma di flusso è disposto dall'alto verso il basso (TD o TB)
Copia
Incorpora
flowchart TD
Start --> Stop
Le direzioni del diagramma di flusso includono:
- TB - dall'alto verso il basso
- TD - dall'alto verso il basso (uguale a dall'alto verso il basso)
- BT - dal basso verso l'alto
- RL - da destra verso sinistra
- LR - da sinistra verso destra
Forma del nodo
Rettangolo con angoli arrotondati
Copia
Incorpora
flowchart LR
id1(This is the text in the box)
Forma a stadio
Copia
Incorpora
flowchart LR
id1([This is the text in the box])
Sottoprocesso
Copia
Incorpora
flowchart LR
id1[[This is the text in the box]]
Database
Copia
Incorpora
flowchart LR
id1[(Database)]
Cerchio
Copia
Incorpora
flowchart LR
id1((This is the text in the circle))
Forma asimmetrica
Copia
Incorpora
flowchart LR
id1>This is the text in the box]
Rombo
Copia
Incorpora
flowchart LR
id1{This is the text in the box}
Esagono
Copia
Incorpora
flowchart LR
id1{{This is the text in the box}}
Parallelogramma
Copia
Incorpora
flowchart TD
id1[/This is the text in the box/]
Parallelogramma invertito
Copia
Incorpora
flowchart TD
id1[\This is the text in the box\]
Trapezio
Copia
Incorpora
flowchart TD
A[/ProcessOn\]
Trapezio invertito
Copia
Incorpora
flowchart TD
B[\ProcessOn/]
Doppio cerchio
Copia
Incorpora
flowchart TD
id1(((This is the text in the circle)))
Estensione delle forme dei nodi del diagramma di flusso di Mermaid
Mermaid introduce 30 nuove forme per aumentare la flessibilità e la precisione nella creazione dei diagrammi di flusso. Queste nuove forme offrono più opzioni per rappresentare visivamente processi, decisioni, eventi, archivi di dati e altri elementi del diagramma di flusso, migliorando così chiarezza e significato semantico.
Nuova sintassi per la definizione delle forme
Mermaid ora supporta una sintassi generica per definire i tipi di forma, per adattarsi al numero crescente di forme. Questa sintassi ti permette di specificare una forma particolare per un nodo usando un formato chiaro e flessibile.
Copia
Incorpora
A@{ shape: rect }
Questa sintassi crea il nodo A come rettangolo. Il suo rendering è identico a [A] o A.
Elenco completo delle forme dei nodi
Di seguito è riportato l'elenco completo delle nuove forme dei nodi introdotte, con i relativi significati, abbreviazioni e alias:
| Nome semantico | Sintassi grafica | Abbreviazione della sintassi | Alternativa della sintassi | Descrizione dettagliata |
|---|---|---|---|---|
| Scheda | Notched Rectangle | notch-rect | card, notched-rectangle | Rappresenta una scheda |
| Riordino | Hourglass | hourglass | collate | Rappresenta un'operazione di riordino |
| Collegamento di comunicazione | Lightning Bolt | bolt | com-link, lightning-bolt | Collegamento di comunicazione |
| Commento | Curly Brace | brace | brace-l, comment | Aggiunge un commento |
| Commento a destra | Curly Brace | brace-r | Aggiunge un commento | |
| Commento con parentesi graffe su entrambi i lati | Curly Braces | braces | Aggiunge un commento | |
| Input o output di dati | Lean Right | lean-r | in-out, lean-right | Rappresenta un input o un output |
| Input o output di dati | Lean Left | lean-l | lean-left, out-in | Rappresenta un output o un input |
| Database | Cylinder | cyl | cylinder, database, db | Archiviazione database |
| Decisione | Diamond | diam | decision, diamond, question | Passo decisionale |
| Ritardo | Half-Rounded Rectangle | delay | half-rounded-rectangle | Rappresenta un ritardo |
| Memoria ad accesso diretto | Horizontal Cylinder | h-cyl | das, horizontal-cylinder | Memoria ad accesso diretto |
| Memoria su disco | Lined Cylinder | lin-cyl | disk, lined-cylinder | Memoria su disco |
| Visualizzazione | Curved Trapezoid | curv-trap | curved-trapezoid, display | Indica che l'informazione viene visualizzata su schermo, terminale o altri dispositivi |
| Elaborazione suddivisa | Divided Rectangle | div-rect | div-proc, divided-process, divided-rectangle | Forma di elaborazione suddivisa |
| Documento | Document | doc | document | Rappresenta un documento |
| Evento | Rounded Rectangle | rounded | event | Rappresenta un evento |
| Estrazione | Triangle | tri | extract, triangle | Processo di estrazione |
| Biforcazione/Unione | Filled Rectangle | fork | join | Biforcazione o unione in un diagramma di flusso |
| Memoria interna | Window Pane | win-pane | internal-storage, window-pane | Memoria interna |
| Punto di connessione | Filled Circle | f-circ | filled-circle, junction | Punto di connessione |
| Documento con linea | Lined Document | lin-doc | lined-document | Documento con linea |
| Processo con linea/ombreggiatura | Lined Rectangle | lin-rect | lin-proc, lined-process, lined-rectangle, shaded-process | Forma di processo con linea |
| Limite di ciclo | Trapezoidal Pentagon | notch-pent | loop-limit, notched-pentagon | Passo di limite di ciclo |
| File manuale | Flipped Triangle | flip-tri | flipped-triangle, manual-file | Operazione manuale su file |
| Input manuale | Sloped Rectangle | sl-rect | manual-input, sloped-rectangle | Passo di input manuale |
| Operazione manuale | Trapezoid Base Top | trap-t | inv-trapezoid, manual, trapezoid-top | Rappresenta un'attività manuale |
| Documenti multipli | Stacked Document | docs | documents, st-doc, stacked-document | 多个文档 |
| Processi multipli | Stacked Rectangle | st-rect | processes, procs, stacked-rectangle | 多个进程 |
| Forma irregolare | Odd | odd | Forma irregolare | |
| Nastro di carta | Flag | flag | paper-tape | Nastro di carta |
| Condizione di preparazione | Hexagon | hex | hexagon, prepare | Passo di preparazione o condizione |
| Azione prioritaria | Trapezoid Base Bottom | trap-b | priority, trapezoid, trapezoid-bottom | Azione prioritaria |
| Elaborazione | Rectangle | rect | proc, process, rectangle | Forma di elaborazione standard |
| Inizio | Circle | circle | circ | Punto di partenza |
| Inizio | Small Circle | sm-circ | small-circle, start | Piccolo cerchio di partenza |
| Arresto | Double Circle | dbl-circ | double-circle | Rappresenta un punto di arresto |
| Arresto | Framed Circle | fr-circ | framed-circle, stop | Rappresenta un punto di arresto |
| Archiviazione dati | Bow Tie Rectangle | bow-rect | bow-tie-rectangle, stored-data | Archiviazione dati |
| Sottoprocesso | Framed Rectangle | fr-rect | framed-rectangle, subproc, subprocess, subroutine | Sottoprocesso, sottoprogramma |
| Riepilogo | Crossed Circle | cross-circ | crossed-circle, summary | Riepilogo |
| Documento con etichetta | Tagged Document | tag-doc | tagged-document | Documento con etichetta |
| Processo standardizzato | Tagged Rectangle | tag-rect | tag-proc, tagged-process, tagged-rectangle | 已标准进程 |
| Punto finale | Stadium | stadium | pill, terminal | Punto finale |
| Blocco di testo | Text Block | text | Blocco di testo |
Di seguito è riportato un esempio di codice di un diagramma di flusso che utilizza le nuove forme introdotte:
Copia
Incorpora
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
Copia
Incorpora
flowchart TD
A@{ shape: rect, label: "This is a process" }
Evento
Copia
Incorpora
flowchart TD
A@{ shape: rounded, label: "This is an event" }
Sottoprocesso
Copia
Incorpora
flowchart TD
A@{ shape: subproc, label: "This is a subprocess" }
Database (cilindro)
Copia
Incorpora
flowchart TD
A@{ shape: cyl, label: "Database" }
Inizio (cerchio)
Copia
Incorpora
flowchart TD
A@{ shape: circle, label: "Start" }
Forma irregolare
Copia
Incorpora
flowchart TD
A@{ shape: odd, label: "Odd shape" }
Decisione (rombo)
Copia
Incorpora
flowchart TD
A@{ shape: diamond, label: "Decision" }
Condizione di preparazione (esagono)
Copia
Incorpora
flowchart TD
A@{ shape: hex, label: "Prepare conditional" }
Input/output di dati (inclinato a destra)
Copia
Incorpora
flowchart TD
A@{ shape: lean-r, label: "Input/Output" }
Input/output di dati (inclinato a sinistra)
Copia
Incorpora
flowchart TD
A@{ shape: lean-l, label: "Input/Output" }
Azione prioritaria (trapezio)
Copia
Incorpora
flowchart TD
A@{ shape: trap-b, label: "Priority action" }
Operazione manuale (trapezio invertito)
Copia
Incorpora
flowchart TD
A@{ shape: trap-t, label: "Manual operation" }
Arresto (doppio cerchio)
Copia
Incorpora
flowchart TD
A@{ shape: dbl-circ, label: "Stop" }
Blocco di testo
Copia
Incorpora
flowchart TD
A@{ shape: text, label: "This is a text block" }
Scheda (rettangolo con tacca)
Copia
Incorpora
flowchart TD
A@{ shape: notch-rect, label: "Card" }
Processo con linea/ombreggiatura
Copia
Incorpora
flowchart TD
A@{ shape: lin-rect, label: "Lined process" }
Inizio (piccolo cerchio)
Copia
Incorpora
flowchart TD
A@{ shape: sm-circ, label: "Small start" }
Arresto (cerchio con riquadro)
Copia
Incorpora
flowchart TD
A@{ shape: framed-circle, label: "Stop" }
Biforcazione/Unione (rettangolo lungo)
Copia
Incorpora
flowchart TD
A@{ shape: fork, label: "Fork or Join" }
Riordino (clessidra)
Copia
Incorpora
flowchart TD
A@{ shape: hourglass, label: "Collate" }
Commento (parentesi graffe)
Copia
Incorpora
flowchart TD
A@{ shape: comment, label: "Comment" }
Commento a destra (parentesi graffa destra)
Copia
Incorpora
flowchart TD
A@{ shape: brace-r, label: "Comment" }
Commento (con parentesi su entrambi i lati)
Copia
Incorpora
flowchart TD
A@{ shape: braces, label: "Comment" }
Collegamento di comunicazione (fulmine)
Copia
Incorpora
flowchart TD
A@{ shape: bolt, label: "Communication link" }
Documento
Copia
Incorpora
flowchart TD
A@{ shape: doc, label: "Document" }
Ritardo (rettangolo semi-arrotondato)
Copia
Incorpora
flowchart TD
A@{ shape: delay, label: "Delay" }
直接存取存储（水平圆柱）
Copia
Incorpora
flowchart TD
A@{ shape: das, label: "Direct access to storage" }
Memoria su disco (cilindro con scanalatura)
Copia
Incorpora
flowchart TD
A@{ shape: lin-cyl, label: "Disk storage" }
Visualizzazione (forma di visualizzazione)
Copia
Incorpora
flowchart TD
A@{ shape: curv-trap, label: "Display" }
Elaborazione suddivisa (rettangolo suddiviso)
Copia
Incorpora
flowchart TD
A@{ shape: div-rect, label: "Divided process" }
Estrazione (piccolo triangolo)
Copia
Incorpora
flowchart TD
A@{ shape: tri, label: "Extract" }
Memoria interna (pannello finestra)
Copia
Incorpora
flowchart TD
A@{ shape: win-pane, label: "Internal storage" }
Punto di connessione (cerchio pieno)
Copia
Incorpora
flowchart TD
A@{ shape: f-circ, label: "Connect" }
Documento con linea
Copia
Incorpora
flowchart TD
A@{ shape: lin-doc, label: "Lined document" }
Limite di ciclo (pentagono con tacca)
Copia
Incorpora
flowchart TD
A@{ shape: notch-pent, label: "Loop limit" }
File manuale (triangolo capovolto)
Copia
Incorpora
flowchart TD
A@{ shape: flip-tri, label: "Manual file" }
Input manuale (trapezio rettangolo)
Copia
Incorpora
flowchart TD
A@{ shape: sl-rect, label: "Manual input" }
Documenti multipli (documenti impilati)
Copia
Incorpora
flowchart TD
A@{ shape: docs, label: "Multi-document" }
Processi multipli (rettangoli impilati)
Copia
Incorpora
flowchart TD
A@{ shape: processes, label: "Multiple processes" }
Nastro di carta (bandiera)
Copia
Incorpora
flowchart TD
A@{ shape: flag, label: "Paper tape" }
Archiviazione dati (rettangolo a farfalla)
Copia
Incorpora
flowchart TD
A@{ shape: bow-rect, label: "Data stored" }
Riepilogo (cerchio con croce)
Copia
Incorpora
flowchart TD
A@{ shape: cross-circ, label: "Summary" }
Documento con etichetta
Copia
Incorpora
flowchart TD
A@{ shape: tag-doc, label: "Tagged document" }
Processo contrassegnato
Copia
Incorpora
flowchart TD
A@{ shape: tag-rect, label: "Tagged process" }
Forme speciali nei diagrammi di flusso di Mermaid
Mermaid introduce anche le immagini per arricchire i tuoi diagrammi di flusso, permettendoti di includere immagini direttamente nel diagramma, offrendo così più contesto visivo e chiarezza.
Forma immagine
Puoi usare image per inserire un'immagine in un diagramma di flusso; la sintassi per definire un'immagine è la seguente:
Copia
Incorpora
flowchart TD
A@{ img: "https://www.processon.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
Parametro
- img: l'URL dell'immagine da visualizzare.
- label: l'etichetta testuale associata all'immagine, può essere qualsiasi stringa. Se non definita, non verrà mostrata alcuna etichetta.
- pos: la posizione dell'etichetta. Se non definita, l'etichetta per impostazione predefinita sarà posizionata in basso rispetto all'immagine.
- w: la larghezza dell'immagine. Se non definita, il valore predefinito è la larghezza naturale dell'immagine.
- h: l'altezza dell'immagine. Se non definita, il valore predefinito è l'altezza naturale dell'immagine.
- constraint: determina se l'immagine limita la dimensione del nodo. Questa impostazione garantisce inoltre che l'immagine mantenga il suo rapporto d'aspetto originale e regola l'altezza in base alla larghezza. Se non definita, il valore predefinito è off.
Le immagini offrono ai tuoi diagrammi di flusso ulteriore flessibilità e attrattiva visiva, rendendoli più informativi e accattivanti.
Collegamenti tra i nodi
I nodi possono essere collegati tramite linee di collegamento e frecce. Esistono diversi tipi di collegamento ed è anche possibile allegare stringhe di testo ai collegamenti.
Collegamento con freccia
Copia
Incorpora
flowchart LR
A-->B
Un collegamento aperto
Copia
Incorpora
flowchart LR
A --- B
Collegamento con testo
Copia
Incorpora
flowchart LR
A-- This is the text! ---B
oppure
Copia
Incorpora
flowchart LR
A --- | This is the text| B
Collegamento con freccia e testo
Copia
Incorpora
flowchart LR
A-->|text|B
oppure
Copia
Incorpora
flowchart LR
A-- text -->B
Collegamento tratteggiato
Copia
Incorpora
flowchart LR
A-.->B;
Collegamento tratteggiato con testo
Copia
Incorpora
flowchart LR
A-. text .->B;
Collegamento spesso
Copia
Incorpora
flowchart LR
A ==> B
Collegamento spesso con testo
Copia
Incorpora
flowchart LR
A == |text| ==> B
Collegamento invisibile
Copia
Incorpora
flowchart LR
A ~~~ B
Collegamento a catena di link
Copia
Incorpora
flowchart LR
A -- text --> B -- text2 --> C
È anche possibile dichiarare più collegamenti tra nodi sulla stessa riga, come mostrato di seguito:
Copia
Incorpora
flowchart LR
a --> b & c--> d
Puoi anche descrivere le dipendenze, come nel codice seguente:
Copia
Incorpora
flowchart LR
a --> b & c--> d & e--> f
Se descrivi lo stesso grafico con la sintassi di base, sono necessarie 8 righe. Va ricordato che un uso eccessivo di questo metodo può rendere più difficile la lettura dei diagrammi di flusso in formato Markdown.
Copia
Incorpora
flowchart TB
a --> b
a --> c
b --> d
b --> e
c --> d
c --> e
d --> f
e --> f
Aggiungere un ID a una linea di collegamento
Mermaid ora supporta l'aggiunta di un ID alle linee di collegamento, in modo simile all'aggiunta di ID e metadati ai nodi. Questa funzionalità pone le basi per stili, classi e animazioni più avanzate sulle linee di collegamento.
Sintassi:Per aggiungere un ID a una linea di collegamento, anteponi l'ID alla sintassi della linea di collegamento, seguito immediatamente dal carattere @. Ad esempio:
Copia
Incorpora
flowchart LR
A e1@--> B
In questo esempio, e1 è l'ID della linea di collegamento che collega A e B. Puoi usare questo ID nelle definizioni o nelle istruzioni di stile successive, proprio come faresti con un nodo.
Attivare l'animazione
Dopo aver aggiunto un ID a una linea di collegamento, puoi attivare l'animazione della linea di collegamento definendo le sue proprietà:
Copia
Incorpora
flowchart LR
A e1@==> B
e1@{ animate: true }
Questo indica a Mermaid che la linea di collegamento e1 è animata.
Scegliere il tipo di animazione
Nella versione iniziale sono supportate due velocità di animazione: fast e slow. Scegliere un tipo di animazione specifico è un modo semplice per abilitare l'animazione e impostare contemporaneamente la velocità.
Copia
Incorpora
flowchart LR
A e1@--> B
e1@{ animation: fast }
这相当于 e1@{ animate: true, animation: fast }。
Animare con l'istruzione classDef
Puoi anche animare una linea di collegamento assegnandole una classe e poi definendo le proprietà di animazione nell'istruzione classDef. Ad esempio:
Copia
Incorpora
flowchart LR
A e1@--> B
classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
In questo codice:
- e1@--> 创建了一个 ID 为 e1 的连接线
- classDef animate definisce una classe chiamata animate, con proprietà di stile e animazione.
- class e1 animate applica la classe animate alla linea di collegamento e1.
Nota sull'escape della virgola: quando imposti la proprietà stroke-dasharray, ricorda di eseguire l'escape della virgola come ,, poiché la virgola è usata come separatore nelle definizioni di stile di Mermaid.
Nuovi tipi di freccia
Supporto per nuovi tipi di freccia
- Linea di collegamento con cerchio pieno
- Linea di collegamento con contrassegno a croce
Linea di collegamento con cerchio pieno
Copia
Incorpora
flowchart LR
A --o B
Linea di collegamento con contrassegno a croce
Copia
Incorpora
flowchart LR
A --x B
Freccia multidirezionale
È possibile usare frecce multidirezionali, ad esempio:
Copia
Incorpora
flowchart LR
A o--o B
B <--> C
C x--x D
Lunghezza della linea di collegamento
Ogni nodo di un diagramma di flusso, in base ai nodi a cui è collegato, viene assegnato a un livello nel grafico renderizzato, cioè a un livello verticale o orizzontale (a seconda della direzione del diagramma di flusso). Per impostazione predefinita, un collegamento può estendersi su un numero qualsiasi di livelli, ma puoi richiedere che un collegamento sia più lungo degli altri aggiungendo trattini aggiuntivi nella definizione del collegamento.
In questo esempio, nel collegamento dal nodo B al nodo E sono stati aggiunti due trattini extra, facendogli coprire due livelli in più rispetto a un collegamento normale:
Copia
Incorpora
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
Quando l'etichetta di un collegamento è scritta al centro del collegamento, è necessario aggiungere trattini extra a destra del collegamento. Questo esempio è equivalente a quello precedente:
Copia
Incorpora
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B -- No ----> E[End]
Per le linee puntinate o i collegamenti spessi, il carattere da aggiungere è il segno di uguale o il punto, come mostrato nella tabella seguente:
| Lunghezza | 1 | 2 | 3 |
|---|---|---|---|
| Collegamento normale | --- | ---- | ----- |
| Collegamento normale con freccia | --> | ---> | ----> |
| Collegamento spesso | === | ==== | ===== |
| Collegamento spesso con freccia | ==> | ===> | ====> |
| Linea puntinata | -.- | -..- | -...- |
| Linea puntinata con freccia | -.- | -..-> | -...-> |
Caratteri speciali
Puoi racchiudere il testo tra virgolette per renderizzare caratteri più problematici. Come nell'esempio seguente:
Copia
Incorpora
flowchart LR
id1["This is the (text) in the box"]
Codifica di entità per l'escape dei caratteri
Puoi eseguire l'escape dei caratteri usando la sintassi dell'esempio.
Copia
Incorpora
flowchart LR
A["A double quote:#quot;"] --> B["A dec char:#9829;"]
I numeri forniti sono decimali, quindi # può essere codificato come #35. È supportato anche l'uso dei nomi di carattere HTML.
Sottografo
Copia
Incorpora
subgraph title
graph definition
end
Di seguito un esempio:
Copia
Incorpora
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
Puoi anche impostare un id per il sottografo.
Copia
Incorpora
flowchart TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
Diagramma di flusso
Usando i diagrammi di tipo diagramma di flusso, puoi anche impostare linee di collegamento da e verso il sottografo, come nel diagramma di flusso seguente.
Copia
Incorpora
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
Direzione del sottografo
Quando usi il tipo diagramma di flusso, puoi usare l'istruzione di direzione per impostare la direzione di rendering del sottografo, come mostrato di seguito:
Copia
Incorpora
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
Limitazioni
Se qualsiasi nodo del sottografo è collegato all'esterno, la direzione del sottografo viene ignorata. In caso contrario, il sottografo eredita la direzione del grafico padre:
Copia
Incorpora
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
Stringhe Markdown
Le stringhe Markdown migliorano i diagrammi di flusso e le mappe mentali offrendo un tipo di stringa più flessibile, supportando opzioni di formattazione del testo come grassetto e corsivo e la possibilità di andare a capo automaticamente all'interno delle etichette.
Copia
Incorpora
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
- Per rendere il testo in grassetto, usa due asterischi (**) prima e dopo il testo.
- Il corsivo si ottiene usando un singolo asterisco (*) prima e dopo il testo.
- Per le stringhe tradizionali, devi aggiungere il tag <br> per andare a capo nel testo all'interno di un nodo. Tuttavia, le stringhe Markdown vanno a capo automaticamente quando il testo è troppo lungo ed è sufficiente usare un carattere di nuova riga invece del tag <br> per iniziare una nuova riga.
Questa funzionalità si applica alle etichette dei nodi, alle etichette delle linee di collegamento e alle etichette dei sottografi
È possibile disabilitare l'andata a capo automatica usando una sintassi specifica
Copia
Incorpora
---
config:
markdownAutoWrap: false
---
graph LR
Commento
Puoi inserire commenti in un diagramma di flusso; l'editor li ignorerà. I commenti devono occupare una riga propria e devono iniziare con il doppio segno di percentuale (%%). Qualsiasi testo dal commento fino alla riga successiva sarà considerato un commento, inclusa qualsiasi sintassi del diagramma di flusso.
Copia
Incorpora
flowchart LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
Stili e classi
Stile dei collegamenti
Puoi impostare lo stile dei collegamenti. Ad esempio, potresti voler dare uno stile a un collegamento che si muove all'indietro nel processo; poiché i collegamenti non hanno un ID come i nodi, devi decidere in altro modo quale stile debba usare ciascun collegamento. Usa il numero d'ordine al momento della definizione del collegamento, oppure usa il valore predefinito per applicarlo a tutti i collegamenti.
Copia
Incorpora
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
Puoi anche aggiungere uno stile a più collegamenti separando i numeri dei collegamenti con virgole in un'unica istruzione:
Copia
Incorpora
linkStyle 1,2,7 color:blue;
Impostare lo stile della curva della linea di collegamento
Se il metodo predefinito non soddisfa le tue esigenze, puoi impostare uno stile di curva per le linee di collegamento tra gli elementi. Gli stili di curva disponibili includono basis, bumpX, bumpY, cardinal, catmullRom, linear, monotoneX, monotoneY, natural, step, stepAfter e stepBefore.
Nell'esempio seguente, un diagramma da sinistra a destra usa lo stile di curva stepBefore.
Copia
Incorpora
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR
Impostare lo stile dei nodi
Puoi impostare uno stile specifico per un nodo, ad esempio un bordo più spesso o un colore di sfondo diverso.
Copia
Incorpora
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
Più comodo che definire lo stile ogni volta è definire una classe di stile e applicarla ai nodi che devono avere un aspetto diverso.
La definizione della classe è la seguente:
Copia
Incorpora
classDef className fill:pink,stroke:#333,stroke-width:4px;
Inoltre, puoi definire lo stile per più classi in un'unica istruzione:
Copia
Incorpora
classDef firstClassName,secondClassName font-size:12pt;
L'operazione per allegare una classe a un nodo è la seguente:
Copia
Incorpora
class nodeId1 className;
Puoi anche allegare una classe a un elenco di nodi in un'unica istruzione:
Copia
Incorpora
class nodeId1,nodeId2 className;
Per aggiungere una classe puoi usare l'operatore ::: per allegare il nome della classe a un nodo, come mostrato di seguito:
Copia
Incorpora
flowchart LR
A:::someclass --> B
classDef someclass fill:#f96
Questa forma può essere usata quando si dichiarano più collegamenti tra nodi:
Copia
Incorpora
flowchart LR
A:::foo & B:::bar --> C:::foobar
classDef foo stroke:#f00
classDef bar stroke:#0f0
classDef foobar stroke:#00f
- Nella dichiarazione del grafico, ora le istruzioni possono anche non terminare con un punto e virgola. Dalla versione 0.2.16, terminare le istruzioni del grafico con un punto e virgola è solo opzionale. Pertanto, la seguente dichiarazione del grafico è valida quanto quella vecchia.
- Tra vertici e collegamenti è consentito uno spazio. Tuttavia, non deve esserci alcuno spazio tra un vertice e il suo testo né tra un collegamento e il suo testo. Anche la vecchia dichiarazione del grafico rimane valida, quindi questa nuova funzionalità è opzionale e mira a migliorare la leggibilità.
Di seguito è riportata la nuova dichiarazione della linea di collegamento, che è valida quanto quella vecchia.
Copia
Incorpora
flowchart LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
