Modèles de diagrammes Mermaid

À propos des modèles de diagramme Mermaid

Un modèle de diagramme Mermaid est un espace de travail visuel, orienté texte et adapté aux développeurs, qui transforme du code Markdown en diagrammes épurés et complexes en temps réel. Plutôt que de glisser, déposer, aligner et mettre en forme manuellement chaque forme, les équipes peuvent utiliser la syntaxe déclarative de Mermaid pour écrire des diagrammes de flux, des diagrammes de séquence, des diagrammes de Gantt et des cartes d’architecture directement aux côtés de leur codebase. En utilisant un modèle Miro standardisé, les équipes d’ingénierie, les architectes systèmes et les rédacteurs techniques peuvent transformer instantanément du texte Markdown versionné en diagrammes visuels collaboratifs, réduisant considérablement la charge de maintenance de la documentation.

Pourquoi utiliser les diagrammes Mermaid ?

La gestion de diagrammes d’architecture statiques ou de formes de wireframe créées manuellement au sein de codebases en évolution génère souvent une documentation obsolète. La création de diagrammes par code textuel offre quatre avantages distincts :

• Compatible avec le contrôle de version : La syntaxe Mermaid en texte brut peut être stockée, révisée et comparée directement dans des dépôts GitHub ou GitLab, aux côtés du code source de l’application.

• Itération rapide : Modifier un nœud de décision ou ajouter une connexion à une base de données prend quelques secondes : il suffit de mettre à jour une seule ligne de texte sans réaligner manuellement les lignes des connecteurs ni ajuster la disposition des formes.

• Visualisation standardisée : Formate automatiquement les formes, les connecteurs fléchés et les espacements selon des normes de conception claires, éliminant les incohérences visuelles entre les équipes.

• Rendu natif dans l’écosystème : S’affiche dynamiquement dans des plateformes prisées des développeurs, notamment Miro, Notion, les fichiers Markdown de GitHub, les extensions VS Code et des moteurs de documentation comme MkDocs.

Typologies d’architecture des diagrammes

Lors du choix d’un modèle de mise en page, associez le moteur de syntaxe Mermaid à l’objectif de documentation spécifique de votre équipe :

• Diagramme de flux (flowchart or graph) : Cartographier les parcours d’onboarding des utilisateurs, les algorithmes de gestion des erreurs et les processus opérationnels.

• Diagramme de séquence (sequenceDiagram) : Visualiser les cycles requête/réponse d’API, les flux OAuth et les files de messages inter-services.

• Diagramme d’état (stateDiagram-v2) : Documenter les changements d’état complexes de l’interface, les transitions du cycle de vie des commandes ou les modes des appareils IoT.

• Diagramme entité-association (erDiagram) : Modéliser les tables de bases de données relationnelles, les liaisons clé primaire/étrangère et les schémas de données.

• Gantt / roadmap (gantt) : Ordonner les phases de livraison logicielle, la capacité des ressources et les tâches de sprint inter-équipes.

Comment utiliser les modèles de diagrammes Mermaid dans Miro

Ajouter un diagramme Mermaid ou utiliser un modèle

Vous pouvez créer des diagrammes Mermaid de trois manières principales :

1. Coller du code Mermaid directement sur le tableau

   • Copiez le code Mermaid depuis votre éditeur, vos documents ou un chat IA.

   • Collez-le sur un tableau Miro.

   • Miro l’affiche comme un Diagramme composé de formes Miro modifiables (et non comme une image statique).

2. Utiliser le format Diagramme (“Créer avec du code”)

   • Sur un tableau Miro, ouvrez la Barre de création et allez dans Formats → Diagramme

   • Cliquez sur Créer avec du code

   • Collez votre code Mermaid dans le panneau de code ou choisissez un modèle Mermaid

   • Le diagramme est rendu sous forme de formes Miro, et vous pouvez continuer à le modifier en mode immersif ou sur le canevas.

3. Générer via Miro MCP + un outil d’IA (pour les utilisateurs avancés)

   • Connectez un outil d’IA compatible MCP (par exemple, Cursor, Claude Code) à Miro MCP Server

   • Demandez à l’agent de créer un diagramme Mermaid sur un tableau spécifique (incluez l’URL du tableau).

   • Ouvrez le tableau dans Miro pour réviser et modifier le diagramme rendu ; les agents peuvent aussi lire/mettre à jour le diagramme Mermaid ultérieurement.

Modifier les diagrammes Mermaid

Vous pouvez toujours modifier à la fois visuellement et dans le code ; ils restent synchronisés.

• Modifier visuellement sur le tableau

  • Ouvrez le diagramme en mode immersif

  • Sélectionnez des formes, des lignes ou des badges pour modifier le texte, le type de forme, les polices, les couleurs, la direction de mise en page (de haut en bas / de gauche à droite) et l’espacement (étroit / normal / large).

  • Le code source Mermaid sous-jacent se met à jour automatiquement pour refléter vos modifications visuelles.

• Modifier le code Mermaid

  • En mode immersif, ouvrez le panneau de code

  • Modifiez la syntaxe Mermaid ; le diagramme se met à jour au fur et à mesure que vous tapez.

  • Vous pouvez activer ou désactiver des options de l’éditeur, comme l’affichage des numéros de ligne et le retour à la ligne, dans les options du panneau.