Comment créer un diagramme swimlane avec Mermaid

Dans les entreprises, il est courant que plusieurs départements travaillent sur un même processus avec des rôles différents. Dans de tels cas, il est judicieux d'utiliser des diagrammes de couloirs to clarifier le processus étape par étape et les rôles réels de chaque équipe.

En divisant les couloirs pour chaque département et personne responsable avec le flux du processus, vous pouvez saisir la répartition du travail et plus encore d'un seul coup d'œil. Cela aide également à standardiser et à améliorer le flux de travail, en renforçant la communication entre les équipes.

Cet article vous apprendra comment créer ou dessiner un couloir avec l'aide de Mermaid et quelques exemples que vous pouvez facilement copier.

Pourquoi dessiner un couloir Mermaid

Inconvénients des outils conventionnels

Dans un exemple réel, une équipe de vente a rencontré plusieurs problèmes lors de l'utilisation de PowerPoint pour créer un diagramme de couloirs pour le traitement des commandes :

• Surcharge d'édition : Lorsque l'équipe logistique a ajouté une nouvelle étape de contrôle qualité, elle a dû repositionner manuellement chaque connecteur.
• Problèmes de collaboration : Un mauvais contrôle de version a conduit l'équipe de support client à travailler à partir d'un diagramme de processus obsolète.
• Problèmes d'impression : Les titres et le contenu sont souvent mal alignés lors de l'impression.

Ce que Mermaid fait de mieux

Mermaid est un outil de diagramme basé sur du texte qui résout beaucoup de ces points douloureux grâce aux fonctionnalités suivantes :

• Suivi de version : Fonctionne avec Git pour conserver un historique clair de tous les changements de votre couloir.
• Sans frais : L'éditeur Mermaid est complètement gratuit à utiliser.

Limitations de Mermaid

Cependant, Mermaid n'est pas sans inconvénients. Pour les couloirs, il n'est pas facile d'aligner tout parfaitement, surtout lorsqu'on essaie de formater les couloirs proprement, mais il vous permet toujours de montrer les processus et les départements dans un seul diagramme.

Comme Mermaid utilise du code pour construire des diagrammes, il y a une courbe d'apprentissage. C'est une bonne option pour ceux qui sont à l'aise avec l'écriture de code. Mais si cela semble trop d'effort, il existe des options plus faciles.

Des outils comme EdrawMax ou Visio vous permettent de construire des couloirs en glissant-déposant des formes et des modèles—aucun code requis.

Comment dessiner des couloirs dans Mermaid

Syntaxe de base

Pour dessiner des couloirs dans Mermaid, commencez par écrire un organigramme simple en utilisant ce format :

flowchart LRsubgraph Department AA[Step 1]endsubgraph Department BB[Step 2]endsubgraph Department Csubgraph Sub-Dept C1C[Step 3]endsubgraph Sub-Dept C2D[Step 4]endendA --> B --> CD --> B

Voici une analyse des codes utilisés dans la syntaxe pour une meilleure compréhension :

Flowchart LR

Cela indique à Mermaid de dessiner un organigramme qui s'écoule de gauche à droite. Vous pouvez changer LR en TB (de haut en bas), RL (de droite à gauche), ou BT (de bas en haut), selon vos besoins de mise en page.

Utiliser un sous-graphe pour créer des couloirs

Subgraph définit un conteneur ou un couloir, comme un département ou un rôle. Toutes les étapes à l'intérieur du sous-graphe sont visuellement regroupées. Vous pouvez également imbriquer des sous-graphes pour représenter une hiérarchie, comme un département avec des sous-équipes. Exemple :

Exemplesubgraph Department AA[Step 1]end

Voici quelques conseils importants :

• Incluez toujours un espace entre le sous-graphe et l'étiquette (par exemple, subgraph Department A).
• Mermaid n'exige pas d'indentation, mais elle aide à garder le code lisible, surtout lors de l'imbrication de sous-graphes.

Montrer le flux

Utilisez "-->" pour connecter chaque étape dans l'ordre. Cela montre la direction du processus.

Personnalisation des couloirs dans Mermaid

Vous pouvez styliser et étiqueter vos diagrammes de couloirs Mermaid pour améliorer la clarté et l'attrait visuel. Voici un exemple :

Exempleflowchart LRsubgraph Department AA[Step 1]style A fill:#e6f3ffendsubgraph Department BB[Step 2]style B fill:#fffbe6endA -->|Send request| Bstyle Department A stroke:#1890ffstyle Department B stroke:#faad14

Encore une fois, voici une analyse de la syntaxe utilisée :

Commande Style

Utilisez style pour personnaliser l'apparence des nœuds ou des sous-graphes. Vous pouvez changer :

• fill pour la couleur de fond
• stroke pour la couleur de bordure

Examplestyle A fill:#e6f3ffstyle Department A stroke:#1890ff

Styles de ligne

Pour changer l'apparence des connecteurs :

• "-.->" crée une ligne pointillée
• "==>" crée une flèche en gras

Ajouter des étiquettes aux connecteurs

Utilisez |Votre étiquette| entre les nœuds pour expliquer le flux.

ExampleA -->|Step A process| BB -.->|Conditional| CC ==> D

Cela vous permet de montrer directement les décisions, les messages ou les conditions sur les lignes—idéal pour garder votre diagramme lisible.

Utiliser un éditeur Mermaid

Une fois que vous avez écrit le Mermaid code pour votre diagramme de couloirs, vous aurez besoin d'un éditeur pour le rendre visuellement. Voici quelques éditeurs Mermaid recommandés que vous pouvez utiliser :

• Mermaid Live Editor. Un outil basé sur navigateur qui vous permet de coller votre code et de voir instantanément le diagramme.
• Markdown Preview Enhanced. Un plugin Visual Studio Code qui rend les diagrammes Mermaid dans les fichiers markdown.
• EdrawMax. Il prend en charge le code Mermaid et la création de diagrammes par glisser-déposer et est idéal pour les utilisateurs qui préfèrent les outils visuels.

Comment générer des notations de couloirs Mermaid avec l'IA et les modifier

Bien qu'apprendre les bases de Mermaid soit une bonne chose, il est également bon de compter sur l'IA pour des résultats plus rapides. De cette façon, vous n'aurez pas à taper manuellement le code.

Vous pouvez utiliser différents outils comme ChatGPT, Claude, Gemini, ou d'autres que vous pourriez préférer.

Étape 1

Ouvrez votre chatbot IA préféré, puis créez votre invite qui décrit ce qui suit :

• 1) qu'il utilisera la notation Mermaid ;
• 2) le contenu de votre couloir ;
• 3) la conception de votre diagramme, le cas échéant. Rappelez-vous qu'être aussi descriptif que possible est essentiel.

Voici un exemple d'invite : "Créez un diagramme de couloirs en utilisant la syntaxe/notation Mermaid qui montre le flux de tâches dans le contexte d'un cabinet d'avocats."

Étape 2

Ensuite, copiez-collez le code généré sur Mermaid.

Étape 3

Si vous souhaitez modifier une partie du diagramme, décrivez le changement aussi précisément que possible à l'IA.

Étape 4

Après que l'IA génère votre nouveau code d'organigramme, copiez-collez-le à nouveau sur le site web Mermaid live.

Deux exemples de couloirs créés en notation Mermaid

Flux d'examen médical

Voici un exemple de diagramme de couloirs créé en utilisant la syntaxe Mermaid, montrant le flux d'un examen médical.

Voici quelques points de conception clés :

1. Séparation claire entre les départements
• Utilisez un sous-graphe pour diviser le diagramme en services d'urgence, de radiologie et de cardiologie.
• Appliquez des couleurs distinctes (par ex. rouge, bleu, vert) à chaque département pour une meilleure clarté visuelle.
2. Flux facile à suivre
• Disposez le processus de gauche à droite (LR) pour montrer la séquence de réponse d'urgence d'un coup d'œil.
• Utilisez un flux circulaire (par ex. B → C → D → E → B) pour montrer comment les tests, diagnostics et traitements se répètent en cycle.

Flux de remboursement des dépenses

Cet exemple montre un diagramme en couloirs construit avec la syntaxe Mermaid, décrivant le processus de remboursement des dépenses.

Voici les points de conception clés de ce diagramme de flux :

1. Séparation claire par département
• Utilisez un sous-graphe pour diviser le flux en sections Comptabilité, Affaires générales et Demandeur.
• Cela aide à clarifier les responsabilités de chaque département dans le processus.
2. Visualisation du processus de remboursement
• Disposez les étapes de la demande à l'approbation jusqu'au paiement dans une direction gauche à droite (LR).
• Incluez une boucle de rétroaction pour l'étape d'approbation afin de montrer que les demandes incomplètes retournent au demandeur.

Questions fréquemment posées