Comment créer un diagramme de flux avec la notation Mermaid

Vous avez du mal à visualiser les processus dans Notion ou GitHub ? La notation Mermaid vous permet de générer des organigrammes en utilisant une syntaxe textuelle simple—parfait pour les développeurs et les rédacteurs techniques.

Ce guide couvre tout, de la syntaxe de base aux raccourcis assistés par IA, ainsi que des alternatives plus simples si le codage n'est pas votre style.

🔍 Ce que vous apprendrez dans ce blog :

✅ Syntaxe de base – Nœuds, flèches et directions

✅ Logique conditionnelle – Branches if/else (%%{if}%%)

✅ Personnalisation du style – Couleurs des formes, bords arrondis

✅ IA + Mermaid – Générer des diagrammes plus rapidement avec les outils d'IA

✅ Alternatives sans code – Outils glisser-déposer comme EdrawMax

Qu'est-ce que la notation Mermaid

Mermaid est un outil de texte vers diagramme qui crée des organigrammes, des diagrammes de séquence et plus encore en utilisant une syntaxe semblable à Markdown. Principaux avantages :

✅ Compatible avec le code – Fonctionne dans GitHub, Notion et VS Code

✅ Compatible avec le contrôle de version – Les diagrammes se mettent à jour avec votre code

✅ Pas d'alignement manuel – Génère automatiquement des mises en page propres

Mermaid vs. PlantUML

Conseil : Pour les non-développeurs, essayez les outils glisser-déposer (comme EdrawMax) pour éviter complètement la syntaxe.

Créer des organigrammes avec la notation Mermaid

Vous pouvez utiliser l'éditeur en ligne Mermaid, un outil basé sur le web, pour créer des diagrammes avec la notation Mermaid. La syntaxe est la même sur toutes les plateformes, donc ce tutoriel s'applique toujours si vous utilisez Notion ou VS Code.

Comment créer des diagrammes en utilisant la notation Mermaid

Visitez le site web de l'éditeur en ligne Mermaid. Vous verrez l'exemple de code et un aperçu du graphique affichés au chargement du site. Vous pouvez également explorer plus d'exemples sous Exemples de diagrammes dans la barre latérale gauche.

Cela facilite le démarrage, même si c'est votre première fois avec Mermaid.

Écrire un organigramme de base en utilisant la syntaxe Mermaid

Maintenant, examinez la syntaxe de base et voyez un exemple en action.

Définir le type d'organigramme et la direction

Chaque organigramme Mermaid commence par le mot-clé « flowchart », suivi de la direction dans laquelle vous voulez que le graphique s'écoule (soit « TD » soit « LR »). Ainsi :

• Utilisez « flowchart TD; » pour créer une mise en page de haut en bas.
• Utilisez « flowchart LR; » si vous préférez une mise en page de gauche à droite.

Ajouter des nœuds et des flèches

Chaque nœud (ou élément) a besoin d'un ID et d'une étiquette. Vous connectez les nœuds en utilisant « --> » pour créer des flèches. Voici un exemple :

A[Texte A] B[Texte B]A -- C[Texte C]B -- D[Texte D]C -- D

Essayez de changer la direction dans la partie (1) de TD (haut en bas) à LR (gauche à droite) pour voir le flux changer en temps réel.

Comment créer des branches conditionnelles dans un organigramme

Ajouter des branches conditionnelles

Pour afficher une condition dans un organigramme, tracez des flèches d'un seul nœud vers deux ou plusieurs nœuds. Cela crée un point de décision. Lorsque vous tracez des flèches d'un nœud vers deux ou plusieurs nœuds, vous créez une branche conditionnelle. Les éléments de syntaxe clés ici sont les accolades « {} » pour les nœuds de décision et les symboles de pipe « | » pour étiqueter les flèches :

Voici un exemple :

ExempleA[Début] --> B(Processus 1)B --> C{Décision}C -->|Oui| D[Processus 2]C -->|Non| E[Processus 3]

Vous pouvez également créer des boucles en reconnectant des flèches à un nœud précédent. Cela aide à représenter des étapes ou des conditions répétées dans le flux. Pour créer des boucles, dirigez vos flèches vers des nœuds antérieurs dans votre organigramme en utilisant la syntaxe de flèche standard « -->. »

Comment personnaliser les formes, les flèches et les couleurs

Changer la forme d'un nœud

Vous pouvez modifier la forme des éléments de votre diagramme en utilisant différents types de crochets autour de votre texte :

• [Texte] : Carré
• (Texte) : Rectangle arrondi
• {Texte} : Losange (pour les décisions)
• [(Texte)] : Cylindre
• ((Texte)) : Cercle

Par exemple, vous pouvez créer un organigramme tel que celui ci-dessous avec différentes formes :

Exempleflowchart TDA[Rectangle] --> B(Rectangle arrondi)B --> C{Losange}C --> D[(Cylindre)]D --> E((Cercle))

Personnaliser les styles de flèches

Vous pouvez modifier le style de ligne des flèches en changeant les symboles dans la notation de flèche. Vous pouvez également ajouter du texte aux flèches avec la syntaxe (exemple) suivante :

Exemple« A ==> B; » : Flèche en gras« B -.-> C; » : Flèche pointillée« B --> |Texte| C; » : Flèche avec texte

Définir les couleurs

Vous pouvez définir des couleurs pour l'ensemble du nœud ou des flèches individuelles :

Pour changer le thème général, utilisez ce code :

Code%%{init: {'theme': 'forest'}}%%Pour utiliser un style pour une flèche spécifique :linkStyle 2 stroke:red,stroke-width:4px

Comme l'éditeur en ligne Mermaid se met à jour en temps réel, vous verrez instantanément si quelque chose ne va pas—un message d'erreur ou un diagramme cassé. Ne vous inquiétez pas si cela prend quelques essais. Tester différents styles fait partie de l'apprentissage de la syntaxe Mermaid.

Utiliser l'IA pour générer la syntaxe Mermaid

La syntaxe Mermaid est assez simple, mais si vous ne voulez pas apprendre la structure, vous pouvez toujours créer des organigrammes en combinant Mermaid avec des outils d'IA et en les copiant-collant ensuite.

Voici comment :

Étape 1

Ouvrez un chatbot IA (comme Claude ou ChatGPT) et décrivez l'organigramme souhaité. Demandez à l'IA de générer du code Mermaid. Un exemple de prompt serait : « Créez un organigramme du processus d'inscription utilisateur en utilisant la syntaxe Mermaid. »

Étape 2

Copiez et collez le code généré dans l'éditeur en ligne Mermaid pour voir le graphique.

Étape 3

Si quelque chose semble incorrect, demandez à l'IA de modifier ou d'éditer le code jusqu'à ce que le graphique soit correct.

Cette approche facilite la génération de diagrammes même si vous êtes novice avec Mermaid.

EdrawMax : Un outil dédié pour créer des organigrammes

La syntaxe Mermaid est excellente pour créer rapidement des organigrammes en utilisant du texte. Mais si vous recherchez une interface plus intuitive ou une édition plus flexible, envisagez d'utiliser EdrawMax.

Voici comment il se compare à la syntaxe Mermaid :

Note G2 : 4,5/5 (Plus de 2360 réponses)

100% sûr | Sans annonces | Propulsé par l'IA

Fonctionnalités IA d'EdrawMax

Un autre avantage clé d'EdrawMax est ses fonctionnalités alimentées par IA, en particulier la carte mentale/diagramme en un clic. EdrawMax vous permet de générer des diagrammes à partir de prompts IA directement dans le logiciel. Cela inclut les organigrammes et de nombreux autres types de diagrammes.

Il comprend également une assistance au dessin. Les diagrammes sont faciles à modifier et vous pouvez changer le design à l'aide de menus en un clic.

Vous pouvez également ajuster les diagrammes à l'aide du menu contextuel ou des options de design en un clic. Cela rend l'édition beaucoup plus rapide, en particulier pour les flux complexes.

Pour les organigrammes complexes ou axés sur le design, EdrawMax est un choix solide. Mais si vous recherchez la vitesse ou souhaitez une intégration fluide du contrôle de version, la syntaxe Mermaid fonctionne toujours bien. Utilisez l'outil qui correspond à votre objectif.

Quand utiliser quoi ?

Si vous travaillez sur de la documentation technique ou avez besoin d'un contrôle de version, Mermaid est un choix judicieux, en particulier pour les développeurs et ingénieurs. Mais si vous voulez plus de contrôle visuel, de meilleures options de design et une personnalisation plus facile, EdrawMax est un meilleur outil. Il est idéal pour créer rapidement des organigrammes soignés et professionnels.

Essayez la version gratuite d'EdrawMax maintenant et voyez si elle correspond à votre flux de travail !