Diagrammes de flux
Expression graphique
Cartes mentales
Expression structurée
Notes
Expression efficace
Carte arborescente
Diagramme de parenthèses
Mode par défaut
Mermaid est un outil qui génère des diagrammes à partir d'une syntaxe textuelle. En écrivant un simple code Mermaid, vous pouvez créer toutes sortes de diagrammes : diagrammes de flux, diagrammes de séquence, diagrammes de classes, diagrammes d'états, diagrammes ER, diagrammes de Gantt, cartes mentales, diagrammes d'architecture, etc.
Contrairement aux outils de dessin classiques par glisser-déposer, Mermaid décrit principalement par du code les nœuds, les relations, l'ordre chronologique et les structures de données d'un diagramme. Après modification du code, le diagramme est régénéré automatiquement : Mermaid est donc particulièrement adapté aux documents techniques, à la conception de produits, à la gestion de projet, au développement logiciel et à l'organisation des connaissances.
Cet article présente la syntaxe de base de Mermaid et récapitule ce que l'éditeur Mermaid prend en charge pour le rendu : types de diagrammes, syntaxe de déclaration, exemples de code et cas d'usage. Si vous souhaitez écrire et prévisualiser du code Mermaid directement en ligne, vous pouvez essayer gratuitement l'éditeur Mermaid en ligne de ProcessOn.
Mermaid est un outil qui génère des diagrammes à partir d'une syntaxe textuelle. Le code ci-dessous permet de générer un simple diagramme de flux Mermaid :
flowchart TD
A[Start] --> B[Enter information]
B --> C{ Completed?}
C -->|Yes| D[End]
C -->|No| B
Rendu obtenu ci-dessous :
où : flowchart TD sert à déclarer la création d'un diagramme de flux organisé de haut en bas.
La logique de fonctionnement de Mermaid peut se résumer ainsi :
Écrire du code Mermaid → analyser le code → rendu du diagramme → modifier le code → le diagramme est mis à jour en temps réel.
Par conséquent, l'une des clés pour apprendre Mermaid est de comprendre la syntaxe de déclaration propre à chaque type de diagramme.
Chaque type de diagramme utilise une syntaxe de déclaration Mermaid différente ; les graphiques Mermaid les plus courants comprennent :
| Type de diagramme | Syntaxe de déclaration Mermaid | Usages courants |
| Diagramme de flux | flowchart | Processus métier, algorithmes, workflow |
| Diagramme de séquence | sequenceDiagram | Interactions système, appels API |
| Diagramme de classes | classDiagram | Structure logicielle, modélisation orientée objet |
| Diagramme d'états | stateDiagram-v2 | Transitions d'états, machines à états |
| Diagramme ER | erDiagram | Relations entre entités d'une base de données |
| Diagramme de Gantt | gantt | Planification de projet, avancement des tâches |
| Diagramme de parcours utilisateur | journey | Expérience utilisateur, parcours client |
| Carte mentale | mindmap | Organisation des connaissances, brainstorming |
| Chronologie | timeline | Frise chronologique, événements historiques |
| Diagramme circulaire | pie | Proportions, analyse de composition |
| Diagramme à quadrants | quadrantChart | Classification, priorité, analyse de positionnement |
| Diagramme Git | gitGraph | Branches Git, commits, fusions |
| Diagramme de Sankey | sankey-beta | Flux de données, de ressources et de trafic |
| Diagramme XY | xychart-beta | Tendances des données, comparaison de valeurs |
| Diagramme radar | radar | Comparaison d'indicateurs multidimensionnels |
| Diagramme C4 | C4Context, etc. | Modélisation d'architecture logicielle |
| Diagramme d'architecture | architecture-beta | Architecture système, services et ressources |
| Diagramme kanban | kanban | Gestion des tâches et des états de travail |
| Diagramme de blocs | block-beta | Modules, structure et relations système |
| Diagramme de paquets | packet-beta | Structure des paquets réseau |
| Diagramme d'exigences | requirementDiagram | Analyse des exigences et relations entre exigences |
Selon les versions de l'éditeur Mermaid, la prise en charge de la syntaxe et des fonctionnalités des diagrammes peut varier ; en pratique, référez-vous à la syntaxe prise en charge par votre éditeur.
Syntaxe de base
Mermaid utilise la déclaration flowchart pour créer un diagramme de flux. La syntaxe la plus simple :
flowchart TD
A[Start] --> B[Arrange]
B --> C[End]
Résultat du rendu
où :
Un diagramme de flux Mermaid peut aussi utiliser LR (de gauche à droite), RL (de droite à gauche), BT (de bas en haut) et d'autres réglages de direction. Par exemple :
flowchart LR
A[Start] --> B[Arrange] --> C[End]
Indique un diagramme de flux disposé de gauche à droite.
Syntaxe courante
| Syntaxe | Diagramme | Signification |
| (text) | Rectangle arrondi | Indique le début, la fin ou une opération générale d'un processus |
| [text] | Rectangle | Indique une étape, une tâche ou un traitement précis |
| {text} | Losange | Indique une décision ou une branche conditionnelle |
| ((text)) | Cercle | Indique un point de connexion ou un événement |
| [[text]] | Double rectangle | Indique l'appel d'un sous-processus ou d'un sous-module |
| [(text)] | Cylindre | Indique un nœud de base de données |
| >text] | Forme asymétrique | Indique une entrée/sortie |
| [/text/] | Parallélogramme | Indique des données d'entrée ou de sortie |
| --> | Flèche | Indique le sens du flux |
| --- | Liaison sans flèche | Indique une relation d'association |
| -.-> | Flèche en pointillés | Indique un flux optionnel ou une relation de référence |
| ==> | Flèche épaisse | Indique un flux prioritaire ou une association forte |
Pour consulter la syntaxe détaillée de génération d'un diagramme de flux Mermaid, rendez-vous sur la page suivante : https://www.processon.io/fr/mermaid/flowchart
Les diagrammes de flux conviennent aux processus métier, aux workflows, aux flux algorithmiques, aux flux système et aux flux de décision, essayez gratuitement l'éditeur Mermaid en ligne pour les diagrammes de flux.
Syntaxe de base
Mermaid utilise la déclaration sequenceDiagram pour créer un diagramme de séquence. L'exemple le plus simple :
sequenceDiagram
Alice->>John: Hello John
John-->>Alice: Hello Alice
Rendu
où :
Syntaxe courante
| Syntaxe | Diagramme | Signification |
| sequenceDiagram | Diagramme de séquence | Crée un diagramme de séquence |
| A->B: message | Ligne continue | Indique un appel de message synchrone ou une interaction ordinaire |
| A-->B: message | Ligne pointillée | Indique un message de retour ou une interaction faiblement liée |
| A->>B: message | Flèche pleine | indique un appel de message asynchrone |
| A-->>B: message | Flèche en pointillés | indique une réponse asynchrone ou un message de retour |
| participant A | Participant | Définit les objets, acteurs ou systèmes d'une interaction |
| actor A | Acteur | Indique un participant actif tel qu'un utilisateur ou un système externe |
| activate A | Bloc d'activation | Indique qu'un objet commence à traiter une requête |
| deactivate A | Fin d'activation | Indique qu'un objet termine son traitement en cours |
| loop text | Bloc de boucle | Indique un processus d'interaction répété |
| alt text | Branche conditionnelle | Indique des chemins d'interaction selon différentes conditions |
| opt text | Flux optionnel | Indique une interaction susceptible d'être exécutée |
| par text | Bloc parallèle | Indique l'exécution simultanée de plusieurs opérations |
Pour consulter la syntaxe détaillée de génération d'un diagramme de séquence Mermaid, rendez-vous sur la page suivante : https://www.processon.io/fr/mermaid/sequence-diagram
Les diagrammes de séquence permettent de décrire les interactions chronologiques entre un utilisateur et un système, entre systèmes ou entre services, essayez gratuitement l'éditeur Mermaid en ligne pour les diagrammes de séquence.
Syntaxe de base
Mermaid utilise la déclaration classDiagram pour créer un diagramme de classes.
classDiagram
Animal <|-- Duck
Animal <|-- Fish
class Animal {
+String name
+eat()
}
class Duck {
+swim()
}
Rendu
où :
Syntaxe courante
| Syntaxe | Diagramme | Signification |
| classDiagram | Diagramme de classes | Crée un diagramme de classes |
| class ClassName | Classe | Définit un objet de classe |
| ClassName : attribute | Attribut | Indique les variables membres d'une classe |
| ClassName : method() | Méthode | Définit une méthode de classe |
| <|-- | Triangle creux+ Ligne continue | indique une relation d'héritage |
| <|.. | Triangle creux+ Ligne pointillée | Indique une relation d'implémentation |
| *-- | Losange plein+ Ligne continue | Indique une relation de composition |
| o-- | Losange creux+ Ligne continue | Indique une relation d'agrégation |
| --> | Flèche pleine | Indique une relation d'association |
| ..> | Flèche en pointillés | Indique une relation de dépendance |
| -- | Ligne continue | Indique une relation de liaison simple |
| +attribute | Signe plus | indique un attribut ou une méthode public |
| -attribute | Signe moins | Indique un attribut ou une méthode privé |
Les symboles tels que +, - ou # placés devant les membres d'une classe indiquent différentes visibilités.
Pour consulter la syntaxe détaillée de génération d'un diagramme de classes Mermaid, rendez-vous sur la page suivante : https://www.processon.io/fr/mermaid/class-diagram
Les diagrammes de classes conviennent à la conception logicielle, à la modélisation orientée objet et à l'analyse de la structure des programmes, essayez gratuitement l'éditeur Mermaid en ligne pour les diagrammes de classes.
Syntaxe de base
Mermaid utilise la déclaration stateDiagram-v2 pour créer un diagramme d'états.
stateDiagram-v2
state "Pending Payment" as Pending
[*] --> Pending
Pending --> Paid
Paid --> Shipped
Shipped --> Completed
Completed--> [*]
Rendu
où :
Syntaxe courante
| Syntaxe | Diagramme | Signification |
| stateDiagram-v2 | Diagramme d'états | Crée un diagramme d'états |
| state StateName | Rectangle arrondi | Définit un nœud d'état de base |
| state StateName : text | Rectangle arrondi avec texte | Ajoute un texte descriptif à un état |
| [*] | Petit point plein ou double anneau | Indique le début ou la fin d'un état |
| [*] --> StateName | Flèche de début | indique l'entrée dans le premier état |
| StateName --> [*] | Flèche de fin | indique la fin du flux d'états |
| A --> B | Flèche pleine | indique une transition d'état |
| A --> B: event | Flèche pleine avec libellé | Transition d'état avec événement déclencheur |
| state StateName { ... } | Rectangle arrondi imbriqué | Définit un état composite |
| state Node <<choice>> | Losange | Nœud de choix ou de décision |
| state Fork <<fork>> | Ligne de séparation horizontale épaisse | Indique le début d'un flux parallèle |
| state Join <<join>> | Ligne de séparation horizontale épaisse | Indique la fin et la fusion d'un flux parallèle |
Pour consulter la syntaxe détaillée de génération d'un diagramme d'états Mermaid, rendez-vous sur la page suivante : https://www.processon.io/fr/mermaid/state-diagram
Les diagrammes d'états conviennent pour représenter les états d'une commande, d'un workflow, d'un utilisateur, d'un système ainsi que les machines à états, essayez gratuitement l'éditeur Mermaid en ligne pour les diagrammes d'états.
Syntaxe de base
Mermaid utilise la déclaration erDiagram pour créer un diagramme entité-relation, c'est-à-dire un diagramme ER.
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ PRODUCT : contains
Rendu
où :
Syntaxe courante
| Syntaxe | Diagramme | Signification |
| erDiagram | Diagramme ER | Crée un diagramme ER |
| ENTITY { } | Rectangle | Définit une entité |
| type field | Marqueur d'attribut | Définit un attribut d'entité |
| type field PK | Clé primaire | Définit la clé primaire d'une entité |
| type field FK | Clé étrangère | Définit la clé étrangère d'une entité |
| type field UK | Clé unique | Définit un champ à contrainte d'unicité |
| || | Un | Exactement un |
| o| | Zéro ou un | Zéro ou un |
| |{ | Un ou plusieurs | Au moins un |
| o{ | Zéro, un ou plusieurs | Zéro ou plusieurs |
Pour consulter la syntaxe détaillée de génération d'un diagramme ER Mermaid, rendez-vous sur la page suivante : https://www.processon.io/fr/mermaid/er-diagram
Les diagrammes ER peuvent représenter des entités, des attributs ainsi que les relations entre entités, et servent souvent à la conception de bases de données, essayez gratuitement l'éditeur Mermaid en ligne pour les diagrammes ER.
Syntaxe de base
Mermaid utilise la déclaration mindmap pour créer une carte mentale.
mindmap
root((Mermaid))
Flowchart
Sequence diagram
Class diagram
Gantt chart
Mind map
Rendu
où :
Syntaxe courante
| Syntaxe | Diagramme | Signification |
| mindmap | Carte mentale | Crée une carte mentale |
| root[text] | Rectangle | Sujet racine rectangulaire |
| root(text) | Rectangle arrondi | Sujet racine en rectangle arrondi |
| root((text)) | Cercle | Sujet racine circulaire |
| root{{text}} | Hexagone | Sujet racine hexagonal |
| root)text( | Bulle | Sujet racine en bulle |
| [text] | Rectangle | Nœud rectangulaire |
| (text) | Rectangle arrondi | Nœud en rectangle arrondi |
| ((text)) | Cercle | Nœud circulaire |
| {{text}} | Hexagone | Nœud hexagonal |
| )text( | Bulle | Nœud en bulle |
Pour consulter la syntaxe détaillée de génération d'une carte mentale Mermaid, rendez-vous sur la page suivante : https://www.processon.io/fr/mermaid/mindmap
Les cartes mentales représentent principalement les relations hiérarchiques par l'indentation, ce qui les rend très adaptées à l'organisation des connaissances, au brainstorming, aux notes de cours et à l'architecture de l'information, essayez gratuitement l'éditeur Mermaid en ligne pour les cartes mentales.
Syntaxe de base
Mermaid utilise la déclaration gantt pour créer un diagramme de Gantt.
gantt
title Project Plan
dateFormat YYYY-MM-DD
section Design
Requirements Analysis:a1, 2026-01-01, 3d
UI Design:after a1, 2d
section Development
Front-end Development:2026-01-06, 4d
Back-end Development:2026-01-07, 4d
Rendu
où :
Syntaxe courante
| Syntaxe | Diagramme | Signification |
| gantt | Diagramme de Gantt | Crée un diagramme de Gantt |
| title text | Titre | Définit le titre du diagramme de Gantt |
| dateFormat text | Identifiant de configuration des dates | Définit le format d'analyse des dates de la chronologie |
| section text | Barre de titre des blocs de regroupement | Répartit les groupes de tâches |
| TaskName : id, startDate, endDate | Barre de tâche horizontale | Définit les attributs associés à une tâche |
| startDate | Barre de tâche horizontale | Définit la date de début |
| endDate | Barre de tâche horizontale | Définit la date de fin |
| duration | Barre de tâche horizontale | Définit la durée d'une tâche |
| id | Personnalisé | Définit l'identifiant d'une tâche |
| after id | Barre de tâche horizontale | Définit une tâche qui démarre après une tâche précédente |
| 16d, 2w | Barre de tâche horizontale | Indique des jours ou des semaines |
| milestone, date | Losange plein | Définit un jalon |
Pour consulter la syntaxe détaillée de génération d'un diagramme de Gantt Mermaid, rendez-vous sur la page suivante : https://www.processon.io/fr/mermaid/gantt
Les diagrammes de Gantt Mermaid conviennent à la planification de projet, à l'organisation des tâches, au suivi du développement et à la gestion de projet, essayez gratuitement l'éditeur Mermaid en ligne pour les diagrammes de Gantt.
Syntaxe de base
Mermaid utilise la déclaration journey pour créer un diagramme de parcours utilisateur.
journey
title User purchases a product
section Browse
Search for products: 5: User
View details: 4: User
section Place order
Add to cart: 5: User
Complete payment: 3: User
Rendu
où :
Syntaxe courante
| Syntaxe | Diagramme | Signification |
| journey | Diagramme de parcours utilisateur | Crée un diagramme de parcours utilisateur |
| title text | Titre | Titre du diagramme de parcours utilisateur |
| section text | Bloc de section | Répartit les regroupements d'étapes du parcours |
| TaskName:num:Actor | Nœuds de parcours + axe d'échelle de satisfaction | Définit les tâches d'interaction, la note de satisfaction et les acteurs impliqués dans une étape |
| num (1~5) | Note de satisfaction | 1 est la note minimale, 5 la meilleure |
| Me, Cat | Acteur | Définit les différents acteurs participant à cette tâche |
Pour consulter la syntaxe détaillée de génération d'un diagramme de parcours utilisateur Mermaid, rendez-vous sur la page suivante : https://www.processon.io/fr/mermaid/user-journey-diagram
Les diagrammes de parcours utilisateur permettent d'analyser les différentes étapes et expériences vécues par un client, du premier contact avec le produit jusqu'à l'atteinte de son objectif, essayez gratuitement l'éditeur Mermaid en ligne pour les diagrammes de parcours utilisateur.
Syntaxe de base
Mermaid utilise la déclaration timeline pour créer une chronologie.
timeline
title Mermaid Development History
2019 : Project Development
2020 : Feature Expansion
2021 : More Diagram Types
Rendu
où :
Syntaxe courante
| Syntaxe | Diagramme | Signification |
| timeline | Chronologie | Crée une chronologie |
| title text | Titre | Définit le titre de la chronologie |
| section text | Bloc de section | Répartit les regroupements de périodes |
| date : Event1 | Événement | Définit l'événement associé à un instant donné |
| : Event2 | Événements multiples | Plusieurs événements associés au même instant |
| Espace | Saut de ligne | Renvoie à la ligne les descriptions d'événements trop longues |
Pour consulter la syntaxe détaillée de génération d'une chronologie Mermaid, rendez-vous sur la page suivante : https://www.processon.com/mermaid/timeline
Les chronologies conviennent pour présenter des événements historiques, l'évolution d'un projet, les itérations d'un produit et des informations chronologiques, essayez gratuitement l'éditeur Mermaid en ligne pour les chronologies.
Syntaxe de base
Mermaid utilise la déclaration quadrantChart pour créer un diagramme à quadrants.
quadrantChart
title Product Positioning
x-axis Low Price--> High Price
y-axis Low Quality--> High Quality
quadrant-1 High-end
quadrant-2 Quality-focused
quadrant-3 Basic
quadrant-4 Value-for-money
Product A: [0.8, 0.7]
Product B: [0.3, 0.8]
Rendu
où :
Pour consulter la syntaxe détaillée de génération d'un diagramme à quadrants Mermaid, rendez-vous sur la page suivante : https://www.processon.io/fr/mermaid/quadrant-chart
Les diagrammes à quadrants conviennent au positionnement de produit, à l'analyse des priorités, à l'analyse concurrentielle et à la classification bidimensionnelle, essayez gratuitement l'éditeur Mermaid en ligne pour les diagrammes à quadrants.
Syntaxe de base
Le diagramme kanban Mermaid sert à organiser les tâches selon leur statut, par exemple à faire, en cours et terminé. Une structure typique peut s'écrire :
kanban
Todo
Task A
Task B
Doing
Task C
Done
Task D
Rendu
où ;：
Pour consulter la syntaxe détaillée de génération d'un diagramme kanban Mermaid, rendez-vous sur la page suivante : https://www.processon.io/fr/mermaid/kanban
Le diagramme kanban convient à la gestion de projet, au suivi des tâches, aux processus de développement et à la gestion des workflows, essayez gratuitement l'éditeur Mermaid en ligne pour les diagrammes kanban.
Syntaxe de base
Le diagramme d'exigences peut servir à représenter les relations entre les exigences, les fonctions et les éléments système, Mermaid utilise la déclaration requirementDiagram pour créer un diagramme d'exigences.
requirementDiagram
requirement userRequirement {
id: 1
text: Customers can purchase products
risk: low
verifymethod: test
}
Rendu
où :
Syntaxe courante
| Syntaxe | Diagramme | Signification |
| requirementDiagram | Diagramme d'exigences | Crée un diagramme d'exigences |
| Requirement name { } | Exigence | Définit une exigence de base |
| functionalRequirement name { } | Fonction | Définit une exigence fonctionnelle |
| interfaceRequirement name { } | Interface | Définit une exigence d'interface |
| performanceRequirement name { } | Performance | Définit une exigence de performance |
| physicalRequirement name { } | Physique | Définit une exigence physique |
| element name {type: name docRef: name} | Élément | Définit des éléments d'entité tels que système / composant / test |
| X - satisfies -> Y | Flèche en pointillés | L'entité satisfait l'exigence correspondante |
| X - contains -> Y | Ligne continue, avec un embout circulaire en croix au point de départ | Une exigence contient une autre exigence |
| X - derives -> Y | Flèche en pointillés | Une exigence dérive d'une autre exigence |
| X - copies -> Y | Flèche en pointillés | Une exigence copie une autre exigence |
| X - traces -> Y | Flèche en pointillés | Association de traçabilité bidirectionnelle entre exigences |
Pour consulter la syntaxe détaillée de création d'un diagramme d'exigences Mermaid, rendez-vous sur la page suivante : https://www.processon.io/fr/mermaid/requirement-diagram
Le diagramme d'exigences convient à l'analyse des besoins produit, à l'ingénierie système et à la traçabilité des exigences, essayez gratuitement l'éditeur Mermaid en ligne pour les diagrammes d'exigences.
Syntaxe de base
Mermaid utilise la déclaration pie pour créer un diagramme circulaire.
pie showData
title Population Share by Continent
"Asia" : 59.5
"Africa" : 18.0
"Europe" : 9.0
"North America" : 7.5
"South America" : 5.5
"Oceania" : 0.5
Rendu
où :
Pour consulter la syntaxe détaillée de génération d'un diagramme circulaire Mermaid, rendez-vous sur la page suivante : https://www.processon.io/fr/mermaid/pie-chart
Le diagramme circulaire convient pour représenter des proportions et des relations de composition, essayez gratuitement l'éditeur Mermaid en ligne pour les diagrammes circulaires.
Syntaxe de base
Le diagramme de Sankey sert principalement à représenter les flux de trafic, de ressources, de capitaux ou de données entre différents nœuds, Mermaid utilise la déclaration sankey-beta pour créer un diagramme de Sankey.
sankey-beta
A,B,50
A,C,30
B,D,20
C,D,30
Rendu
où :
Pour consulter la syntaxe détaillée de génération d'un diagramme de Sankey Mermaid, rendez-vous sur la page suivante : https://www.processon.io/fr/mermaid/sankey-diagram
Le diagramme de Sankey est un type de graphique de visualisation qui montre les flux d'un ensemble de valeurs vers un autre, essayez gratuitement l'éditeur Mermaid en ligne pour les diagrammes de Sankey.
Syntaxe de base
Mermaid utilise la déclaration xychart-beta pour créer un diagramme XY.
xychart-beta
title "Monthly Sales Data"
x-axis "Month"["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
y-axis " Sales (million)" 0 --> 100
line [20, 30, 40, 35, 50, 60]
bar [30, 50, 35, 20, 45, 40]
Rendu
où :
Syntaxe courante
| Syntaxe | Diagramme | Signification |
| xychart-beta | Graphique en coordonnées XY | Crée un graphique en coordonnées XY |
| xychart-beta horizontal | Graphique en coordonnées XY horizontal | Crée un graphique en coordonnées XY horizontal |
| title "name" | Titre | Définit le titre du diagramme XY |
| x-axis "axisTitle" [a,b,c] | Axe X | Définit les catégories et le titre de l'axe horizontal |
| y-axis "axisTitle" min --> max | Axe Y | Définit la plage et le titre de l'axe vertical |
| y-axis "axisTitle" | Axe Y avec titre uniquement | Définit uniquement le nom de l'axe vertical, la plage de valeurs s'adapte automatiquement |
| bar [num1, num2, num3] | Graphique en barres | Définit la série de données du graphique en barres |
| line [num1, num2, num3] | Graphique en courbes | Définit la série de données du graphique en courbes |
Pour consulter la syntaxe détaillée de génération d'un diagramme XY Mermaid, rendez-vous sur la page suivante : https://www.processon.io/fr/mermaid/xy-chart
Le diagramme XY convient pour présenter l'évolution de données, des comparaisons de valeurs et une visualisation de données simple, essayez gratuitement l'éditeur Mermaid en ligne pour les diagrammes XY.
Syntaxe de base
Le diagramme radar convient pour comparer les performances de plusieurs objets sur plusieurs dimensions, par exemple une évaluation des compétences, des indicateurs produit ou une comparaison de solutions. Mermaid utilise la déclaration radar-beta pour créer un diagramme radar.
radar-beta
title "Competency Assessment Radar Chart"
axis a["Communication Skills"], b["Logical Thinking"], c["Team Collaboration"], d["Technical Skills"]
curve A["Chenlaoda"] {80, 90, 70, 85}
curve B["Wangxiaoer"] {60, 70, 90, 80}
Rendu
où :
Syntaxe courante
| Syntaxe | Diagramme | Signification |
| radar-beta | Diagramme radar | Crée un diagramme radar |
| title "name" | Titre | Définit le titre du diagramme radar, juste après radar-beta |
| title "name" | Titre | Définit le titre du diagramme radar, placé avant radar-beta, avec 3 tirets au-dessus et en dessous |
| axis id ["axisTitle"] | Axe de dimension | Définit les dimensions et les noms du diagramme radar |
| curve id ["name"]{[values]} | Courbe de données | définit le nom de la série de données et les valeurs de chaque dimension |
| max value | Valeur maximale | Définit la valeur maximale de la plage de valeurs du diagramme radar |
| min value | Valeur minimale | Définit la valeur minimale de la plage de valeurs du diagramme radar |
Pour consulter la syntaxe détaillée de génération d'un diagramme radar Mermaid, rendez-vous sur la page suivante : https://www.processon.io/fr/mermaid/radar-chart
Le diagramme radar est particulièrement utile aux développeurs, aux data scientists et aux ingénieurs qui doivent représenter des données de manière claire et concise dans un format circulaire, essayez gratuitement l'éditeur Mermaid en ligne pour les diagrammes radar.
Syntaxe de base
Mermaid utilise la déclaration gitGraph pour créer un diagramme Git.
gitGraph
commit
branch develop
checkout develop
commit
checkout main
merge develop
Rendu
où :
Pour consulter la syntaxe détaillée de génération d'un diagramme Git Mermaid, rendez-vous sur la page suivante : https://www.processon.io/fr/mermaid/git-graph
Le diagramme Git convient pour représenter les processus de gestion de versions tels que les commits Git, la création de branches, le changement de branche et la fusion, essayez gratuitement l'éditeur Mermaid en ligne pour les diagrammes Git.
Syntaxe de base
Le diagramme C4 Mermaid sert à la modélisation d'architecture logicielle ; il permet de décrire à différents niveaux les systèmes logiciels, les conteneurs, les composants et leurs relations.
C4Context
title C4 Diagram of the Business System
Person(user, " User", " System user")
System(system, " Business System", " Core business system")
Rel(user, system, "Uses")
Rendu
où :
Syntaxe courante
| Syntaxe | Diagramme | Signification |
| C4Context | Diagramme de contexte système | Crée un diagramme de contexte système C4 |
| C4Container | Diagramme de conteneurs | Crée un diagramme de conteneurs C4 |
| C4Component | Diagramme de composants | Crée un diagramme de composants C4 |
| C4Dynamic | Diagramme d'interaction dynamique | Crée un diagramme d'interaction dynamique C4 |
| C4Deployment | Diagramme de déploiement | Crée un diagramme de déploiement C4 |
| title | Titre | Définit le titre du diagramme C4 |
| Person(alias, "label", "description") | Personne | Indique l'utilisateur ou le rôle qui utilise le système |
| Person_Ext(alias, "label", "description") | Personne externe | Indique une personne ou un rôle organisationnel externe au système qui participe aux interactions |
| System(alias, "label", "description") | Nœud système | Indique le système logiciel à analyser |
| System_Ext(alias, "label", "description") | Nœud de système externe | Indique un service tiers ou un système logiciel externe dont dépend le système |
| System_Boundary(alias, "label") | Limite du système | Indique le périmètre du système |
| Container(alias, "label", "technology") | Conteneur | Indique une unité logicielle exécutable de façon autonome à l'intérieur du système |
| Container_Boundary(alias, "label") | Limite de conteneur | Indique le périmètre d'un conteneur ou d'un service |
Pour consulter la syntaxe détaillée de génération d'un diagramme C4 Mermaid, rendez-vous sur la page suivante : https://www.processon.io/fr/mermaid/c4-diagram
Le diagramme C4 convient à la conception d'architecture logicielle, à l'analyse système et aux documents techniques, essayez gratuitement l'éditeur Mermaid en ligne pour les diagrammes C4.
Syntaxe de base
Mermaid utilise la déclaration architecture-beta pour créer un diagramme d'architecture.
architecture-beta
group api(cloud)[API server]
service server(server)[server] in api
service database(database)[databasa] in api
server:R --> L:database
Rendu
où :
Pour consulter la syntaxe détaillée de génération d'un diagramme d'architecture Mermaid, rendez-vous sur la page suivante : https://www.processon.io/fr/mermaid/architecture-diagram
Le diagramme d'architecture convient pour représenter les relations entre serveurs, bases de données, services cloud, services applicatifs et différents composants système, essayez gratuitement l'éditeur Mermaid en ligne pour les diagrammes d'architecture.
Syntaxe de base
Le diagramme de blocs décrit la structure d'un système principalement au moyen de modules et de relations de connexion, Mermaid utilise la déclaration block-beta pour créer un diagramme de blocs.
block-beta
A space B
A["User"] --> B["Application"]
B space C
B --> C["Database"]
Rendu
où :
Pour consulter la syntaxe détaillée de génération d'un diagramme de blocs Mermaid, rendez-vous sur la page suivante : https://www.processon.io/fr/mermaid/block-diagram
Le diagramme de blocs convient aux modules système, aux structures fonctionnelles, à l'architecture technique et aux relations entre composants, essayez gratuitement l'éditeur Mermaid en ligne pour les diagrammes de blocs.
Diagramme de paquets Mermaid
Syntaxe de base
Le diagramme de paquets sert principalement à représenter les champs et les longueurs d'un paquet réseau ou d'une structure de données de protocole, Mermaid utilise la déclaration packet-beta pour créer un diagramme de paquets.
packet-beta
0-7: "Version"
8-15: "Type"
16-31: "Length"
Rendu
où :
Le diagramme de paquets convient aux protocoles réseau, aux structures de paquets et aux documents de spécification technique, essayez gratuitement l'éditeur Mermaid en ligne pour les diagrammes de paquets.
Ne pas connaître la syntaxe Mermaid ne signifie pas que vous ne pouvez pas utiliser Mermaid pour générer des graphiques. Vous pouvez procéder de plusieurs façons :
Gratuitement, utiliser les modèles Mermaid
Choisissez d'abord un modèle proche de votre besoin, puis modifiez les nœuds, les textes et les relations. Cette approche convient aux utilisateurs qui découvrent Mermaid.
Générer du code Mermaid avec l'IA
Vous pouvez décrire le diagramme souhaité en langage naturel, par exemple :
Créez un processus de traitement des commandes e-commerce, incluant la commande par l'utilisateur, le paiement, la vérification du stock, l'expédition et la finalisation de la commande.
L'IA peut générer du code Mermaid à partir de cette description, puis vous le modifiez selon vos besoins réels.
Vérifier et corriger le code avec l'IA
Si du code Mermaid présente une erreur de syntaxe, vous pouvez demander à l'IA d'identifier le problème et de corriger le code.
Générer du code par reconnaissance d'image
Pour un diagramme de flux, un diagramme d'architecture ou tout autre graphique structuré existant, vous pouvez essayer de générer du code Mermaid par reconnaissance d'image, puis continuer à le modifier.
Un éditeur Mermaid en ligne doit généralement résoudre trois problèmes essentiels : L'écriture du code, l'aperçu du diagramme et l'export du résultat. En outre, les modèles et l'IA peuvent aussi abaisser la barrière d'accès à Mermaid.
Avec l'éditeur Mermaid en ligne de ProcessOn, vous pouvez directement, dans le navigateur :
Ainsi, pour les utilisateurs qui créent fréquemment des diagrammes Mermaid, l'éditeur en ligne ProcessOn Mermaid permet de regrouper l'écriture du code Mermaid, la génération de graphiques, la retouche et la modification, l'export et le partage dans un seul environnement de travail.
Qu'il s'agisse de diagrammes de flux, de séquence ou de classes Mermaid, ou bien de diagrammes de Gantt, de cartes mentales, de diagrammes à quadrants, de Sankey, Git, C4 et d'architecture, tout peut être créé avec la syntaxe Mermaid et modifié.
Venez utiliser l'éditeur Mermaid en ligne pour écrire du code Mermaid en ligne et générer des diagrammes !
La syntaxe Mermaid est-elle difficile à apprendre ?
La syntaxe de base de Mermaid est relativement simple : la plupart des diagrammes demandent seulement de maîtriser les écritures de base telles que la déclaration du diagramme, les nœuds, les liaisons et les textes. Par exemple, sequenceDiagram sert à déclarer un diagramme de séquence et flowchart à déclarer un diagramme de flux. Les règles de syntaxe varient d'un type de diagramme à l'autre ; les diagrammes complexes nécessitent d'apprendre plus en détail les paramètres et configurations correspondants.
Pourquoi le diagramme ne se génère-t-il pas lorsque le code Mermaid est erroné ?
Mermaid est assez sensible à la structure de la syntaxe. Les causes fréquentes sont : une déclaration de diagramme erronée, une syntaxe de nœud ou de liaison incomplète, une indentation ou des caractères spéciaux mal traités, ou encore l'utilisation d'une syntaxe non prise en charge par la version actuelle de Mermaid.
Quelle est la différence entre Mermaid et les logiciels de dessin traditionnels ?
Mermaid décrit principalement les diagrammes au moyen de code textuel, tandis que les logiciels de dessin traditionnels les créent en glissant-déposant des formes, des liaisons et en ajustant les styles.
Les diagrammes Mermaid peuvent-ils être enregistrés et réutilisés ?
Oui. Le contenu essentiel d'un diagramme Mermaid est du code textuel ; vous pouvez donc enregistrer ce code dans un fichier Markdown, un fichier de code ou tout autre document prenant en charge Mermaid, puis le rendre à nouveau en cas de besoin.
C'est aussi une différence importante entre Mermaid et un diagramme sous forme de simple image : Une image conserve le résultat final, tandis que le code Mermaid conserve en même temps les informations de structure du diagramme.
Quel est le rapport entre Mermaid et Markdown ?
Mermaid est souvent utilisé avec Markdown, mais il ne s'agit pas de la même syntaxe.
Markdown sert principalement à rédiger du texte structuré, tandis que Mermaid sert à générer des diagrammes par du code. Dans un éditeur Markdown prenant en charge Mermaid, vous pouvez intégrer du code Mermaid dans un document Markdown, afin de réunir le diagramme et les explications textuelles dans un même document.
Suivant le tutoriel pour essayer
Gratuit à utiliser ProcessOn
