Syntaxe du diagramme de flux Mermaid - Tutoriel de génération de diagrammes de flux avec le code Mermaid

Définition de base

Un diagramme de flux est composé de nœuds (formes géométriques) et de lignes de connexion (flèches ou traits). Le code Mermaid définit la manière de construire les nœuds et les lignes de connexion, et prend en charge plusieurs types de flèches, les flèches multidirectionnelles ainsi que les liens arbitraires avec les sous-graphes.

Avertissement Si vous utilisez le mot "end" dans un nœud de diagramme de flux, mettez la première lettre ou le mot entier en majuscules (par exemple : "End" ou "END") ; saisir "end" entièrement en minuscules provoquera une erreur dans le diagramme de flux.

Avertissement Si, lors de la connexion de nœuds de diagramme de flux, vous utilisez la lettre "o" ou "x" comme première lettre, ajoutez un espace avant la lettre ou mettez la lettre en majuscule (par exemple : "dev--- ops", "dev---Ops").

Un nœud (par défaut)

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                --- 
title: Node 
--- 
flowchart LR 
id

Informations

L'id correspond au contenu affiché dans le cadre.

Astuce

Pour la syntaxe de création d'un diagramme de flux, outre flowchart, vous pouvez également utiliser graph .

Un nœud avec du texte

Vous pouvez également définir pour le cadre un texte différent de l'id. Si vous effectuez cette opération plusieurs fois, le système utilisera le dernier texte spécifié pour ce nœud. De plus, si une ligne de connexion est définie ultérieurement pour le nœud, la définition de texte peut être omise ; le texte défini précédemment sera alors utilisé lors du rendu du cadre.

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                --- 
title: Node with text 
--- 
flowchart LR 
    id1[This is the text in the box]

Texte Unicode

Encapsulez le texte Unicode à l'aide de guillemets doubles.

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR 
     id["This ❤ Unicode"]

Format Markdown

Encapsulez le texte Markdown à l'aide de guillemets doubles et de backticks

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR
    markdown["`This **is** _Markdown_`"]
    newLines["`Line1
    Line 2
    Line 3`"]
    markdown --> newLines

Direction

Déclare la direction du diagramme de flux

Indique que le diagramme de flux est organisé de haut en bas (TD ou TB)

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    Start --> Stop

Les directions du diagramme de flux comprennent :

TB - de haut en bas
TD - de haut en bas (identique à de haut en bas)
BT - de bas en haut
RL - de droite à gauche
LR - de gauche à droite

Formes des nœuds

Rectangle aux coins arrondis

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR
    id1(This is the text in the box)

Forme de stade

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR
    id1([This is the text in the box])

Sous-processus

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR
    id1[[This is the text in the box]]

Base de données

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR
    id1[(Database)]

Cercle

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR
    id1((This is the text in the circle))

Forme asymétrique

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR
    id1>This is the text in the box]

Losange

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR
    id1{This is the text in the box}

Hexagone

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR
    id1{{This is the text in the box}}

Parallélogramme

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    id1[/This is the text in the box/]

Parallélogramme inversé

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    id1[\This is the text in the box\]

Trapèze

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    A[/ProcessOn\]

Trapèze inversé

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    B[\ProcessOn/]

Double cercle

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    id1(((This is the text in the circle)))

Extension des formes de nœuds du diagramme de flux Mermaid

Mermaid a introduit 30 nouvelles formes afin d'améliorer la flexibilité et la précision de la création de diagrammes de flux. Ces nouvelles formes offrent davantage d'options pour représenter visuellement des processus, des décisions, des événements, des stockages de données et d'autres éléments dans un diagramme de flux, ce qui améliore la clarté et la sémantique.

Nouvelle syntaxe de définition des formes

Mermaid prend désormais en charge une syntaxe générale pour définir les types de formes, afin de s'adapter au nombre croissant de formes. Cette syntaxe vous permet de spécifier une forme particulière pour un nœud à l'aide d'un format clair et flexible.

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            A@{ shape: rect }

Cette syntaxe crée le nœud A sous forme de rectangle. Son rendu est identique à [A] ou A.

Liste complète des formes de nœuds

Voici la liste complète des formes de nœuds nouvellement introduites, avec leurs significations, abréviations et alias correspondants :

Nom sémantique	Syntaxe graphique	Abréviation de la syntaxe	Alternative de syntaxe	Description détaillée
Carte	Notched Rectangle	notch-rect	card, notched-rectangle	Représente une carte
Tri	Hourglass	hourglass	collate	Représente une opération de tri
Lien de communication	Lightning Bolt	bolt	com-link, lightning-bolt	Lien de communication
Commentaire	Curly Brace	brace	brace-l, comment	Ajouter un commentaire
Commentaire à droite	Curly Brace	brace-r		Ajouter un commentaire
Commentaire avec accolades des deux côtés	Curly Braces	braces		Ajouter un commentaire
Entrée ou sortie de données	Lean Right	lean-r	in-out, lean-right	Représente une entrée ou une sortie
Entrée ou sortie de données	Lean Left	lean-l	lean-left, out-in	Représente une sortie ou une entrée
Base de données	Cylinder	cyl	cylinder, database, db	Stockage de base de données
Décision	Diamond	diam	decision, diamond, question	Étape de décision
Délai	Half-Rounded Rectangle	delay	half-rounded-rectangle	Représente un délai
Stockage à accès direct	Horizontal Cylinder	h-cyl	das, horizontal-cylinder	Stockage à accès direct
Stockage sur disque	Lined Cylinder	lin-cyl	disk, lined-cylinder	Stockage sur disque
Affichage	Curved Trapezoid	curv-trap	curved-trapezoid, display	Représente l'affichage d'informations sur un écran, un terminal ou un autre dispositif
Traitement fractionné	Divided Rectangle	div-rect	div-proc, divided-process, divided-rectangle	Forme de traitement fractionné
Document	Document	doc	document	Représente un document
Événement	Rounded Rectangle	rounded	event	Représente un événement
Extraction	Triangle	tri	extract, triangle	Processus d'extraction
Bifurcation/fusion	Filled Rectangle	fork	join	Bifurcation ou fusion dans un diagramme de flux
Stockage interne	Window Pane	win-pane	internal-storage, window-pane	Stockage interne
Point de connexion	Filled Circle	f-circ	filled-circle, junction	Point de connexion
Document avec ligne	Lined Document	lin-doc	lined-document	Document avec ligne
Processus ligne/ombre	Lined Rectangle	lin-rect	lin-proc, lined-process, lined-rectangle, shaded-process	Forme de processus avec lignes
Limite de boucle	Trapezoidal Pentagon	notch-pent	loop-limit, notched-pentagon	Étape de limite de boucle
Fichier manuel	Flipped Triangle	flip-tri	flipped-triangle, manual-file	Opération de fichier manuel
Entrée manuelle	Sloped Rectangle	sl-rect	manual-input, sloped-rectangle	Étape de saisie manuelle
Opération manuelle	Trapezoid Base Top	trap-t	inv-trapezoid, manual, trapezoid-top	Représente une tâche manuelle
Documents multiples	Stacked Document	docs	documents, st-doc, stacked-document	多个文档
Processus multiples	Stacked Rectangle	st-rect	processes, procs, stacked-rectangle	多个进程
Forme irrégulière	Odd	odd		Forme irrégulière
Ruban papier	Flag	flag	paper-tape	Ruban papier
Condition préalable	Hexagon	hex	hexagon, prepare	Étape de préparation ou de condition
Action prioritaire	Trapezoid Base Bottom	trap-b	priority, trapezoid, trapezoid-bottom	Action prioritaire
Traitement	Rectangle	rect	proc, process, rectangle	Forme de traitement standard
Début	Circle	circle	circ	Point de départ
Début	Small Circle	sm-circ	small-circle, start	Point de départ en petit cercle
Arrêt	Double Circle	dbl-circ	double-circle	Représente un point d'arrêt
Arrêt	Framed Circle	fr-circ	framed-circle, stop	Représente un point d'arrêt
Stockage de données	Bow Tie Rectangle	bow-rect	bow-tie-rectangle, stored-data	Stockage de données
Sous-processus	Framed Rectangle	fr-rect	framed-rectangle, subproc, subprocess, subroutine	Sous-processus, sous-programme
Résumé	Crossed Circle	cross-circ	crossed-circle, summary	Résumé
Document balisé	Tagged Document	tag-doc	tagged-document	Document balisé
Processus standardisé	Tagged Rectangle	tag-rect	tag-proc, tagged-process, tagged-rectangle	已标准进程
Point final	Stadium	stadium	pill, terminal	Point final
Bloc de texte	Text Block	text		Bloc de texte

Voici un exemple de code de diagramme de flux utilisant les nouvelles formes introduites :

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                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"}

Processus

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    A@{ shape: rect, label: "This is a process" }

Événement

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    A@{ shape: rounded, label: "This is an event" }

Sous-processus

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    A@{ shape: subproc, label: "This is a subprocess" }

Base de données (cylindre)

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    A@{ shape: cyl, label: "Database" }

Début (cercle)

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    A@{ shape: circle, label: "Start" }

Forme irrégulière

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    A@{ shape: odd, label: "Odd shape" }

Décision (losange)

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    A@{ shape: diamond, label: "Decision" }

Condition préalable (hexagone)

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    A@{ shape: hex, label: "Prepare conditional" }

Entrée/sortie de données (inclinée vers la droite)

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    A@{ shape: lean-r, label: "Input/Output" }

Entrée/sortie de données (inclinée vers la gauche)

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    A@{ shape: lean-l, label: "Input/Output" }

Action prioritaire (trapèze)

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    A@{ shape: trap-b, label: "Priority action" }

Opération manuelle (trapèze inversé)

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    A@{ shape: trap-t, label: "Manual operation" }

Arrêt (double cercle)

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    A@{ shape: dbl-circ, label: "Stop" }

Bloc de texte

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    A@{ shape: text, label: "This is a text block" }

Carte (rectangle échancré)

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    A@{ shape: notch-rect, label: "Card" }

Processus avec ligne/ombre

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    A@{ shape: lin-rect, label: "Lined process" }

Début (petit cercle)

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    A@{ shape: sm-circ, label: "Small start" }

Arrêt (cercle encadré)

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    A@{ shape: framed-circle, label: "Stop" }

Bifurcation/fusion (rectangle long)

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    A@{ shape: fork, label: "Fork or Join" }

Tri (sablier)

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    A@{ shape: hourglass, label: "Collate" }

Commentaire (accolades)

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    A@{ shape: comment, label: "Comment" }

Commentaire à droite (accolade à droite)

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    A@{ shape: brace-r, label: "Comment" }

Commentaire (parenthèses des deux côtés)

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    A@{ shape: braces, label: "Comment" }

Lien de communication (éclair)

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    A@{ shape: bolt, label: "Communication link" }

Document

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    A@{ shape: doc, label: "Document" }

Délai (rectangle à coins semi-arrondis)

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    A@{ shape: delay, label: "Delay" }

直接存取存储（水平圆柱）

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    A@{ shape: das, label: "Direct access to storage" }

Stockage sur disque (cylindre rainuré)

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    A@{ shape: lin-cyl, label: "Disk storage" }

Affichage (forme d'affichage)

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    A@{ shape: curv-trap, label: "Display" }

Traitement fractionné (rectangle fractionné)

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    A@{ shape: div-rect, label: "Divided process" }

Extraction (petit triangle)

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    A@{ shape: tri, label: "Extract" }

Stockage interne (panneau de fenêtre)

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    A@{ shape: win-pane, label: "Internal storage" }

Point de connexion (cercle plein)

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    A@{ shape: f-circ, label: "Connect" }

Document avec ligne

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
   A@{ shape: lin-doc, label: "Lined document" }

Limite de boucle (pentagone échancré)

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
   A@{ shape: notch-pent, label: "Loop limit" }

Fichier manuel (triangle inversé)

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
   A@{ shape: flip-tri, label: "Manual file" }

Entrée manuelle (trapèze rectangle)

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
   A@{ shape: sl-rect, label: "Manual input" }

Documents multiples (documents empilés)

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
   A@{ shape: docs, label: "Multi-document" }

Processus multiples (rectangles empilés)

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
   A@{ shape: processes, label: "Multiple processes" }

Ruban papier (drapeau)

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
   A@{ shape: flag, label: "Paper tape" }

Stockage de données (rectangle en nœud papillon)

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
   A@{ shape: bow-rect, label: "Data stored" }

Résumé (cercle avec croix)

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
   A@{ shape: cross-circ, label: "Summary" }

Document balisé

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
   A@{ shape: tag-doc, label: "Tagged document" }

Processus marqué

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
   A@{ shape: tag-rect, label: "Tagged process" }

Formes spéciales dans les diagrammes de flux Mermaid

Mermaid introduit également des images pour enrichir vos diagrammes de flux, en vous permettant d'inclure directement des images dans le diagramme, ce qui offre davantage de contexte visuel et de clarté.

Forme d'image

Vous pouvez utiliser image pour insérer une image dans un diagramme de flux ; la syntaxe de définition d'une image est la suivante :

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            flowchart TD
   A@{ img: "https://www.processon.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }

Paramètre

img : l'adresse URL de l'image à afficher.
label : l'étiquette textuelle associée à l'image, qui peut être n'importe quelle chaîne de caractères. Si elle n'est pas définie, aucune étiquette ne sera affichée.
pos : la position de l'étiquette. Si elle n'est pas définie, l'étiquette est placée par défaut en bas de l'image.
w : la largeur de l'image. Si elle n'est pas définie, la largeur naturelle de l'image est utilisée par défaut.
h : la hauteur de l'image. Si elle n'est pas définie, la hauteur naturelle de l'image est utilisée par défaut.
constraint : détermine si l'image limite la taille du nœud. Ce paramètre garantit également que l'image conserve son rapport d'aspect d'origine et ajuste sa hauteur en fonction de la largeur. Si elle n'est pas définie, la valeur par défaut est off .

Les images offrent une flexibilité et un attrait visuel supplémentaires à vos diagrammes de flux, les rendant plus informatifs et plus attrayants.

Connexions entre les nœuds

Les nœuds peuvent être reliés par des lignes de connexion et des flèches. Il existe différents types de liens, et des chaînes de caractères peuvent également être attachées aux liens.

Lien avec flèche

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR
   A-->B

Un lien ouvert

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR
    A --- B

Lien avec texte

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR
   A-- This is the text! ---B

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR
    A --- | This is the text| B

Lien avec flèche et texte

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR
   A-->|text|B

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR
   A-- text -->B

Lien en pointillés

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR
   A-.->B;

Lien en pointillés avec texte

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR
   A-. text .->B;

Lien épais

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR
   A ==> B

Lien épais avec texte

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR
   A == |text| ==> B

Lien invisible

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR
   A ~~~ B

Enchaînement de liens

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR
   A -- text --> B -- text2 --> C

Vous pouvez également déclarer plusieurs liens de nœuds sur la même ligne, comme indiqué ci-dessous :

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR
   a --> b & c--> d

Vous pouvez aussi décrire une dépendance, comme dans le code ci-dessous :

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR
   a --> b & c--> d & e--> f

Si vous décriviez le même graphique avec la syntaxe de base, il faudrait 8 lignes. Rappelons qu'un usage excessif de cette méthode peut rendre les diagrammes de flux au format Markdown plus difficiles à lire.

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TB
   a --> b
   a --> c
   b --> d
   b --> e
   c --> d
   c --> e
   d --> f
   e --> f

Ajouter un ID à une ligne de connexion

Mermaid prend désormais en charge l'ajout d'un ID aux lignes de connexion, de manière similaire à l'attachement d'un ID et de métadonnées aux nœuds. Cette fonctionnalité ouvre la voie à des styles, des classes et des animations plus avancés sur les lignes de connexion.

Syntaxe :

Pour ajouter un ID à une ligne de connexion, faites précéder la syntaxe de la ligne de connexion d'un ID, suivi immédiatement du caractère @. Par exemple :

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR
   A e1@--> B

Dans cet exemple, e1 est l'ID de la ligne de connexion reliant A et B. Vous pouvez utiliser cet ID dans les définitions ou les instructions de style ultérieures, comme vous le feriez pour un nœud.

Activer l'animation

Après avoir ajouté un ID à une ligne de connexion, vous pouvez activer son animation en définissant ses propriétés :

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR
   A e1@==> B
    e1@{ animate: true }

Cela indique à Mermaid que la ligne de connexion e1 est animée.

Choisir le type d'animation

Dans la version initiale, deux vitesses d'animation sont prises en charge : fast et slow. Choisir un type d'animation spécifique est un moyen simple d'activer l'animation et d'en définir la vitesse en une seule fois.

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR
  A e1@--> B
  e1@{ animation: fast }

这相当于 e1@{ animate: true, animation: fast }。

Animer à l'aide de l'instruction classDef

Vous pouvez également animer une ligne de connexion en lui affectant une classe, puis en définissant les propriétés d'animation dans une instruction classDef. Par exemple :

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR
  A e1@--> B
  classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
  class e1 animate

Dans ce code :

e1@--> 创建了一个 ID 为 e1 的连接线
classDef animate définit une classe nommée animate, dotée de propriétés de style et d'animation.
class e1 animate applique la classe animate à la ligne de connexion e1.

Remarque sur l'échappement des virgules : lors de la définition de la propriété stroke-dasharray, n'oubliez pas d'échapper la virgule sous la forme , , car la virgule sert de séparateur dans les définitions de style de Mermaid.

Nouveaux types de flèches

Prise en charge de nouveaux types de flèches

Ligne de connexion avec cercle plein
Ligne de connexion avec marque en croix

Ligne de connexion avec cercle plein

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR
    A --o B

Ligne de connexion avec marque en croix

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR
    A --x B

Flèche multidirectionnelle

Vous pouvez utiliser des flèches multidirectionnelles, par exemple :

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR
    A o--o B
    B <--> C
    C x--x D

Longueur des lignes de connexion

Dans un diagramme de flux, chaque nœud se voit attribuer un rang dans le graphique rendu (un niveau vertical ou horizontal, selon la direction du diagramme) en fonction des nœuds auxquels il est connecté. Par défaut, un lien peut franchir un nombre quelconque de rangs, mais vous pouvez demander qu'un lien soit plus long que les autres en ajoutant des tirets supplémentaires dans la définition de la connexion.

Dans cet exemple, deux tirets supplémentaires sont ajoutés à la connexion allant du nœud B au nœud E, ce qui lui fait franchir deux rangs de plus qu'un lien ordinaire :

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]

Remarque : une connexion peut être plus longue que le nombre de rangs demandé, afin de s'adapter à d'autres contraintes du moteur de rendu.

Lorsque l'étiquette de connexion est écrite au milieu de la connexion, des tirets supplémentaires doivent être ajoutés à droite de la connexion. Cet exemple est équivalent au précédent :

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B -- No ----> E[End]

Pour les traits pointillés ou les liens épais, les caractères à ajouter sont le signe égal ou le point, comme indiqué dans le tableau ci-dessous :

Longueur	1	2	3
Connexion normale	---	----	-----
Connexion normale avec flèche	-->	--->	---->
Connexion épaisse	===	====	=====
Connexion épaisse avec flèche	==>	===>	====>
Ligne pointillée	-.-	-..-	-...-
Ligne pointillée avec flèche	-.-	-..->	-...->

Caractères spéciaux

Vous pouvez placer le texte entre guillemets afin de rendre des caractères plus délicats. Comme dans l'exemple ci-dessous :

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR
    id1["This is the (text) in the box"]

Encodage d'entité pour l'échappement des caractères

Vous pouvez échapper des caractères à l'aide de la syntaxe de l'exemple.

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR
   A["A double quote:#quot;"] --> B["A dec char:#9829;"]

Le nombre donné est décimal ; ainsi # peut être codé sous la forme #35. L'utilisation des noms de caractères HTML est également prise en charge.

Sous-graphe

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            subgraph title
    graph definition
end

Voici un exemple :

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

Vous pouvez également définir un id pour le sous-graphe.

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart TB
    c1-->a2
    subgraph ide1 [one]
    a1-->a2
    end

Diagramme de flux

Avec les diagrammes de type flowchart, vous pouvez également définir des lignes de connexion vers et depuis un sous-graphe, comme dans le diagramme de flux ci-dessous.

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                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

Direction du sous-graphe

Lorsque vous utilisez le type flowchart, vous pouvez utiliser une instruction de direction pour définir la direction de rendu du sous-graphe, comme indiqué ci-dessous :

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                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

Limitations

Si l'un des nœuds du sous-graphe est relié à l'extérieur, la direction du sous-graphe est ignorée. Sinon, le sous-graphe hérite de la direction du graphe parent :

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                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

Chaînes de caractères Markdown

Les chaînes de caractères Markdown améliorent les diagrammes de flux et les cartes mentales en offrant un type de chaîne plus flexible, prenant en charge des options de mise en forme du texte telles que le gras et l'italique, ainsi que le retour à la ligne automatique du texte dans les étiquettes.

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                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

Pour mettre le texte en gras, utilisez deux astérisques (**) avant et après le texte.
L'italique s'obtient en plaçant un astérisque simple (*) avant et après le texte.
Pour les chaînes de caractères traditionnelles, vous devez ajouter la balise <br> pour que le texte passe à la ligne dans un nœud. Toutefois, les chaînes Markdown passent automatiquement à la ligne lorsque le texte est trop long, et il suffit d'utiliser un caractère de retour à la ligne plutôt que la balise <br> pour commencer une nouvelle ligne.

Cette fonctionnalité s'applique aux étiquettes de nœuds, aux étiquettes de lignes de connexion et aux étiquettes de sous-graphes

Le retour à la ligne automatique peut être désactivé en utilisant une syntaxe spécifique

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                ---
config:
  markdownAutoWrap: false
---
graph LR

Commentaire

Vous pouvez saisir des commentaires dans un diagramme de flux ; l'éditeur les ignorera. Un commentaire doit occuper une ligne à lui seul et commencer par un double signe de pourcentage (%%). Tout texte allant du début du commentaire jusqu'à la ligne suivante est considéré comme un commentaire, y compris toute syntaxe de diagramme.

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR
 %% this is a comment A -- text --> B{node}
   A -- text --> B -- text2 --> C

Styles et classes

Style des liens

Vous pouvez définir le style des liens. Par exemple, vous pouvez souhaiter styliser un lien qui revient en arrière dans le flux ; comme les liens n'ont pas d'ID contrairement aux nœuds, il faut déterminer autrement le style à appliquer au lien. Utilisez le numéro d'ordre défini lors de la définition du lien, ou utilisez une valeur par défaut pour l'appliquer à tous les liens.

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;

Vous pouvez également appliquer un style à plusieurs liens en séparant leurs numéros par des virgules dans une même instruction :

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            linkStyle 1,2,7 color:blue;

Définir le style de courbe des lignes de connexion

Si la méthode par défaut ne répond pas à vos besoins, vous pouvez définir un style de courbe pour les lignes de connexion entre les éléments. Les styles de courbe disponibles sont basis, bumpX, bumpY, cardinal, catmullRom, linear, monotoneX, monotoneY, natural, step, stepAfter et stepBefore.

Dans l'exemple ci-dessous, un diagramme de gauche à droite utilise le style de courbe stepBefore.

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            %%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
 graph LR

Définir le style des nœuds

Vous pouvez appliquer un style particulier à un nœud, par exemple une bordure plus épaisse ou une couleur de fond différente.

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                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

Plutôt que de définir un style à chaque fois, il est plus pratique de définir une classe de style et de l'attacher aux nœuds qui nécessitent une apparence différente.

La définition d'une classe se présente comme suit :

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            classDef className fill:pink,stroke:#333,stroke-width:4px;

En outre, vous pouvez définir un style pour plusieurs classes dans une même instruction :

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            classDef firstClassName,secondClassName font-size:12pt;

L'attachement d'une classe à un nœud se fait comme suit :

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            class nodeId1 className;

Vous pouvez également attacher une classe à une liste de nœuds dans une même instruction :

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            class nodeId1,nodeId2 className;

L'ajout d'une classe peut se faire à l'aide de l'opérateur ::: pour attacher le nom de classe à un nœud, comme indiqué ci-dessous :

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR
    A:::someclass --> B
    classDef someclass fill:#f96

Cette forme peut être utilisée lors de la déclaration de plusieurs liens entre des nœuds :

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR
    A:::foo & B:::bar --> C:::foobar
    classDef foo stroke:#f00
    classDef bar stroke:#0f0
    classDef foobar stroke:#00f

Dans les déclarations de graphiques, les instructions peuvent désormais aussi ne pas se terminer par un point-virgule. Depuis la version 0.2.16, terminer une instruction de graphique par un point-virgule n'est qu'optionnel. Par conséquent, la déclaration de graphique ci-dessous est tout aussi valide que l'ancienne.
Un espace est autorisé entre les sommets et les liens. Toutefois, il ne doit y avoir aucun espace entre un sommet et son texte, ni entre un lien et son texte. L'ancienne déclaration de graphique reste également valide ; cette nouvelle fonctionnalité est donc optionnelle et vise à améliorer la lisibilité.

Voici la nouvelle déclaration de ligne de connexion, tout aussi valide que l'ancienne.

Code

                            
                                
                                    
                                    Copier
                                
                                
                                    
                                    Intégrer
                                
                            
                            
                                flowchart LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

Diagramme de fluxSyntaxe

Définition de base

Un nœud (par défaut)

Un nœud avec du texte

Texte Unicode

Format Markdown

Direction

Formes des nœuds

Rectangle aux coins arrondis

Forme de stade

Sous-processus

Base de données

Cercle

Forme asymétrique

Losange

Hexagone

Parallélogramme

Parallélogramme inversé

Trapèze

Trapèze inversé

Double cercle

Extension des formes de nœuds du diagramme de flux Mermaid

Liste complète des formes de nœuds

Processus

Événement

Sous-processus

Base de données (cylindre)

Début (cercle)

Forme irrégulière

Décision (losange)

Condition préalable (hexagone)

Entrée/sortie de données (inclinée vers la droite)

Entrée/sortie de données (inclinée vers la gauche)

Action prioritaire (trapèze)

Opération manuelle (trapèze inversé)

Arrêt (double cercle)

Bloc de texte

Carte (rectangle échancré)

Processus avec ligne/ombre

Début (petit cercle)

Arrêt (cercle encadré)

Bifurcation/fusion (rectangle long)

Tri (sablier)

Commentaire (accolades)

Commentaire à droite (accolade à droite)

Commentaire (parenthèses des deux côtés)

Lien de communication (éclair)

Document

Délai (rectangle à coins semi-arrondis)

直接存取存储（水平圆柱）

Stockage sur disque (cylindre rainuré)

Affichage (forme d'affichage)

Traitement fractionné (rectangle fractionné)

Extraction (petit triangle)

Stockage interne (panneau de fenêtre)

Point de connexion (cercle plein)

Document avec ligne

Limite de boucle (pentagone échancré)

Fichier manuel (triangle inversé)

Entrée manuelle (trapèze rectangle)

Documents multiples (documents empilés)

Processus multiples (rectangles empilés)

Ruban papier (drapeau)

Stockage de données (rectangle en nœud papillon)

Résumé (cercle avec croix)

Document balisé

Processus marqué

Formes spéciales dans les diagrammes de flux Mermaid

Forme d'image

Paramètre

Connexions entre les nœuds

Lien avec flèche

Un lien ouvert

Lien avec texte

Lien avec flèche et texte

Lien en pointillés

Lien en pointillés avec texte

Lien épais

Lien épais avec texte

Lien invisible