Créer des diagrammes Mermaid

Qui peut le faire : Tous les utilisateurs
Quels forfaits : Free, Starter, Business, Enterprise, Education
Quelles plateformes : Navigateur, application de bureau

Créez des diagrammes à partir du code Mermaid et modifiez-les comme vous le feriez avec les formes et les lignes de Miro. Mermaid reste la source de vérité, ce qui vous permet de déplacer des diagrammes entre Miro, votre codebase et les outils d’IA sans perdre leur structure.

REMARQUE : Si vous recherchez des informations sur l’ancienne application Mermaid, consultez « Diagrammes Mermaid pour Miro (ancienne version) ».

Pourquoi utiliser les diagrammes Mermaid dans Miro

• Portable avec le reste de votre workflow Mermaid. Utilisez la même syntaxe Mermaid que vous utilisez déjà dans vos documents, vos PR et vos chats IA. Avec Miro MCP, les agents peuvent créer, lire, mettre à jour et modifier des diagrammes Mermaid sur vos tableaux.
• Rendu en tant que formes Miro. Le code Mermaid se transforme en un diagramme composé de formes Miro modifiables et de connecteurs, agencé automatiquement par Miro, et non en image statique.
• Édition bidirectionnelle. Modifiez le diagramme visuellement sur le tableau et le code Mermaid se met à jour ; modifiez le code et le diagramme se réaffiche.
• Conçu pour la collaboration. Parce que les diagrammes sont du contenu natif Miro, votre équipe peut commenter, coéditer et itérer sur le même tableau en temps réel.

Créer un diagramme Mermaid

Vous pouvez ajouter des diagrammes Mermaid de trois manières.

Coller du code Mermaid sur le tableau

1. Copiez le code Mermaid depuis votre éditeur, vos documents ou un chat IA.
2. Collez-le sur un tableau Miro.
   Miro rend le code sous la forme d’un diagramme composé de formes Miro.

Créer un diagramme avec Miro MCP

Utilisez un outil IA compatible MCP (par exemple Cursor ou Claude Code) connecté au serveur Miro MCP pour générer un diagramme Mermaid sur un tableau.

1. Connectez votre outil d’IA à Miro MCP.
2. Demandez à l’agent de créer un diagramme Mermaid sur un tableau précis. Incluez l’URL du tableau dans votre prompt lorsque vous souhaitez que le diagramme soit créé sur un tableau existant.
3. Ouvrez le tableau dans Miro pour réviser, modifier et collaborer sur le diagramme rendu.

Les agents peuvent aussi extraire du code Mermaid depuis le tableau et mettre à jour les diagrammes sur place, ce qui vous permet de continuer à itérer entre votre codebase et Miro. Lorsqu’un agent modifie un diagramme, il peut ajouter une légende indiquant ce qui a été ajouté, supprimé ou modifié.

REMARQUE : Sur les forfaits Enterprise, un admin d’entreprise doit activer Miro MCP avant que les utilisateurs puissent se connecter. Consultez le guide d’administration du serveur Miro MCP.

Démarrez avec le format Diagram

1. Sur un tableau Miro, ouvrez la barre de création et sélectionnez Formats > Diagram.
2. Cliquez sur Créer avec du code.
3. Collez votre propre code Mermaid dans le panneau de code, ou choisissez un modèle Mermaid.
   Le diagramme se transforme en formes Miro.
4. Continuez à modifier en mode immersif ou sur le canevas.

Pour en savoir plus sur le format Diagram, le mode immersif, les calques et les modèles, consultez les diagrammes Miro.

Modifier un diagramme Mermaid

Vous pouvez modifier le diagramme visuellement sur le tableau, dans le code source Mermaid, ou à l’aide de l’IA. Les modifications restent synchronisées.

Modifier visuellement

1. Ouvrez le diagramme en mode immersif.
2. Sélectionnez une forme, une ligne ou un badge de texte pour les modifier directement sur le diagramme. Une barre d’outils s’ouvre avec des commandes pour l’élément sélectionné, par exemple : changer le type de forme, modifier le texte, ajuster la taille de police, mettre le texte en gras, ou définir la couleur du texte, du contour et du remplissage.
   
3. Définissez la direction de la mise en page. Cliquez sur le contrôle de direction dans la barre d’outils du format Diagram et choisissez De haut en bas, De bas en haut, De gauche à droite, ou De droite à gauche.
   
4. Ajustez l’espacement. Ouvrez le contrôle de disposition et choisissez Narrow pour un agencement plus serré, Regular pour un espacement équilibré, ou Wide pour un agencement plus aéré, plus facile à parcourir.
   
5. Ouvrez le panneau de code pour vérifier que la syntaxe Mermaid a été mise à jour en conséquence.

Modifier le code

1. Ouvrez le diagramme en mode immersif.
2. Ouvrez le panneau de code.
   
3. Mettez à jour la syntaxe Mermaid.
   Le diagramme se met à jour au fur et à mesure de vos modifications.

Cliquez sur l’icône des paramètres (engrenage) dans le panneau de code pour ajuster la façon dont l’éditeur affiche votre code :

• Numéros de ligne : Afficher ou masquer les numéros de ligne dans l’éditeur.
• Renvoyer le texte à la ligne : Renvoyer les longues lignes pour les adapter à la largeur du panneau au lieu de faire défiler horizontalement.

Modifier avec l’IA

1. Copiez le lien du widget de diagramme.
2. Ouvrez l’outil d’IA de votre choix, avec Miro MCP authentifié.
3. Demandez à l’agent d’apporter vos modifications, en collant le lien du widget de diagramme que vous souhaitez qu’il modifie.
   Le diagramme se met à jour sur place au fur et à mesure que l’agent modifie.

NOTE : L’édition visuelle et le panneau de code ne sont disponibles que en mode immersif. L’édition en écran partagé directement sur le canevas n’est pas prise en charge.

Autres fonctionnalités d’édition

Si vous avez besoin de plus de formes, ou si vous souhaitez déplacer librement des formes, passez le diagramme en mode d’édition libre. Vous pouvez lancer cette action depuis le panneau des formes, depuis le panneau de mise en page, ou en essayant de déplacer une forme sur le diagramme.

1. Essayez de déplacer une forme, ou sélectionnez Passer en mode d’édition libre dans le panneau des formes ou dans le panneau de mise en page.
   La fenêtre modale Passer en mode d’édition libre s’ouvre.
2. Choisissez la façon de procéder :
   • Passer et remplacer : Convertir ce diagramme en mode d’édition libre.
   • Créer une copie puis passer : Conserver la version Mermaid actuelle et convertir une copie en mode d’édition libre.

ATTENTION : Une fois que vous passez un diagramme en mode d’édition libre, il n’est plus synchronisé avec le code Mermaid, et vous ne pouvez plus le modifier via MCP.

Types de diagrammes pris en charge

Les diagrammes de flux s’affichent sous forme de formes Miro natives. D’autres types de diagrammes Mermaid sont ajoutés progressivement :

Si vous avez besoin d’un type de diagramme qui n’est pas encore modifiable visuellement, partagez vos retours via ce formulaire. Nous pourrions vous contacter pour un entretien.

Pour la liste complète des types de diagrammes Mermaid et de leur syntaxe, consultez la documentation officielle de Mermaid.

Partager et exporter

• Lire avec Miro MCP. Demander à un agent connecté de lire le diagramme depuis l’URL du tableau afin de pouvoir le documenter dans une codebase, une PR ou d’autres outils. La source Mermaid reste disponible pour les allers-retours.
• Partager un lien. Copier l’URL du tableau, ou, depuis le menu Plus du diagramme (⋯), sélectionner Copier le lien du mode immersif pour envoyer les collaborateurs directement dans le diagramme. Voir aussi Partager des tableaux et inviter des collaborateurs.
• Télécharger au format PDF ou en image. Depuis le menu Plus du diagramme (⋯), sélectionner Exporter au format PDF ou Exporter en tant qu’image (JPG, SVG ou PDF). Vous pouvez aussi copier le diagramme en tant qu’image depuis le tableau.

Limitations connues

Tenez compte des contraintes suivantes :

• La modification visuelle n’est disponible que pour les diagrammes de flux.
• La modification visuelle et le panneau de code ne sont disponibles qu’en mode immersif.
• La modification visuelle des formes, du texte et des lignes est limitée à ce que permet la syntaxe Mermaid.
• Les diagrammes utilisent la mise en page automatique native de Miro. Vous ne pouvez pas déplacer librement les formes sur un diagramme Mermaid.

Nous évaluons les demandes de fonctionnalités en continu, donc si l’une de ces limitations vous empêche d’avancer, contactez-nous via la communauté Miro ou votre admin.

Informations supplémentaires

• Pour la syntaxe Mermaid, les types de diagrammes pris en charge et des exemples, consultez la documentation officielle de Mermaid.
• Pour les fonctionnalités du format Diagram, telles que les calques, les conteneurs et le mode immersif, consultez les diagrammes Miro.
• Pour connecter des outils d’IA à Miro, consultez la présentation du Miro MCP Server.