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 connecteurs de Miro. Le code Mermaid reste la source de vérité, vous pouvez donc déplacer des diagrammes entre Miro, votre codebase et des outils d’IA sans perdre leur structure.
REMARQUE : Les diagrammes Mermaid structurés sont en bêta. Les types de diagrammes pris en charge et les fonctionnalités d’édition s’améliorent progressivement, et certaines des capacités décrites ci‑dessous sont encore en cours de déploiement.
REMARQUE : Si vous recherchez des informations sur l’ancienne application Mermaid, consultez Diagrammes Mermaid pour Miro (version héritée).
Pourquoi utiliser les diagrammes Mermaid dans Miro
- Portable dans l’ensemble de votre workflow Mermaid. Utilisez la même syntaxe Mermaid que vous employez déjà dans vos documents, vos pull requests et vos chats IA. Avec Miro MCP, des agents peuvent créer, lire, mettre à jour et modifier des diagrammes Mermaid sur vos tableaux.
- Converti en formes Miro. Le code Mermaid devient un Diagram construit à partir de formes Miro modifiables et de connecteurs, disposé automatiquement par Miro — pas une 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égénère.
- 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
- Copiez le code Mermaid depuis votre éditeur, vos documents ou un chat IA.
- Collez-le sur un tableau Miro.
Miro transforme le code en 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.
- Connectez votre outil d’IA à Miro MCP.
- 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 placé sur un tableau existant.
- Ouvrez le tableau dans Miro pour examiner, modifier et collaborer sur le diagramme généré.
Les agents peuvent aussi lire le code Mermaid depuis le tableau et mettre à jour les diagrammes sur place, afin que vous puissiez 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émarrer avec le format Diagramme
- Sur un tableau Miro, ouvrez la Barre de création et sélectionnez Formats > Diagramme.
- Cliquez sur Créer avec du code.
- Collez votre propre code Mermaid dans le panneau de code, ou choisissez un modèle Mermaid.
Le diagramme s’affiche sous forme de formes Miro. - Continuez à modifier en mode immersif ou sur le canevas.
Pour en savoir plus sur le format Diagramme, le mode immersif, les calques et les modèles, consultez diagrammes Miro.
Modifier un diagramme Mermaid
Vous pouvez modifier visuellement sur le tableau, dans la source Mermaid, ou modifier un diagramme avec l’IA. Les modifications restent synchronisées.
Modifier visuellement
- Ouvrez le diagramme en mode immersif.
- Sélectionnez une forme, une ligne ou un badge de texte pour modifier l’élément 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 la police, appliquer le gras ou définir la couleur du texte, du contour et du remplissage.
- Définissez la direction de la mise en page. Cliquez sur le contrôle de direction dans la barre d’outils Diagram et choisissez De haut en bas, De bas en haut, De gauche à droite, ou De droite à gauche.
- Ajustez l’espacement. Ouvrez le contrôle de mise en page et choisissez Étroite pour une mise en page plus compacte, Normale pour un espacement équilibré, ou Aérée pour une mise en page plus aérée, plus facile à parcourir.
- Ouvrez le panneau de code pour vérifier que la syntaxe Mermaid a bien été mise à jour.
Modifier le code
- Ouvrez le diagramme en mode immersif.
- Ouvrez le panneau de code.
- Mettez à jour la syntaxe Mermaid.
Le diagramme se met à jour au fur et à mesure que vous modifiez.
Cliquez sur l’icône des paramètres (engrenage) dans le panneau de code pour ajuster l’affichage de votre code dans l’éditeur :
- Numéros de ligne : Afficher ou masquer les numéros de ligne dans l’éditeur.
- Renvoi à la ligne : Renvoyer les longues lignes pour qu’elles s’ajustent à la largeur du panneau plutôt que de défiler horizontalement.
Modifier avec l’IA
- Copiez le lien du widget de diagramme.
- Ouvrez l’outil d’IA de votre choix, authentifié auprès de Miro MCP.
- Demandez à l’agent d’apporter les modifications en collant le lien du widget de diagramme que vous souhaitez qu’il modifie.
Le diagramme se met à jour en place au fur et à mesure que l’agent le modifie.
REMARQUE : L’édition visuelle et le panneau de code ne sont disponibles qu’en mode immersif. L’édition en affichage fractionné 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 les formes, passez le diagramme en mode libre. Vous pouvez lancer cette opération depuis le panneau Formes, depuis le panneau Mise en page, ou en essayant de déplacer une forme dans le diagramme.
- Essayez de déplacer une forme, ou sélectionnez Passer en mode libre dans le panneau Formes ou dans le panneau Mise en page.
La fenêtre modale Passer en mode libre s’ouvre. - Choisissez comment basculer :
- Basculer et remplacer : Convertir ce diagramme en mode libre.
- Créer une copie puis basculer : Conserver la version Mermaid actuelle et convertir une copie en mode libre.
ATTENTION : Une fois que vous basculez un diagramme en mode 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 :
| Type de diagramme | Rendu | Éditable visuellement ? |
|---|---|---|
| Diagrammes de flux | Formes Miro natives | Oui |
| Séquence | Formes Miro natives | Prochainement |
| Classe | Formes Miro natives | Prochainement |
| ER (Entité-association) | Formes Miro natives | Prochainement |
| Autres diagrammes Mermaid pris en charge | Mermaid SVG | Non |
| Diagrammes non pris en charge par Mermaid (par exemple, couloirs) | N/A | N/A |
Si vous avez besoin d’un type de diagramme qui n’est pas encore modifiable visuellement, partagez vos retours dans ce formulaire. Nous pourrions vous contacter pour un entretien.
Pour la liste complète des types de diagrammes et de la syntaxe Mermaid, consultez la documentation officielle de Mermaid.
Partager et exporter
- Lire avec Miro MCP. Demandez à un agent connecté de lire le diagramme à partir de l’URL du tableau afin que vous puissiez le documenter dans une codebase, une PR ou d’autres outils. Le code source Mermaid reste disponible pour des allers-retours.
- Partager un lien. Copiez l’URL du tableau, ou depuis le menu Plus du diagramme (⋯) sélectionnez Copier le lien du mode immersif pour envoyer des collaborateurs directement dans le diagramme. Voir aussi Partager des tableaux et inviter des collaborateurs.
- Télécharger en PDF ou en image. Dans le menu Plus (⋯) du diagramme, sélectionnez Exporter en PDF ou Exporter en image (JPG, SVG ou PDF). Vous pouvez aussi copier le diagramme en tant qu’image depuis le tableau.
Limitations connues
Les diagrammes Mermaid structurés étant en bêta, gardez à l’esprit les contraintes actuelles suivantes :
- L’édition visuelle n’est disponible que pour les diagrammes de flux.
- L’édition visuelle et le panneau de code ne sont disponibles que dans le mode immersif.
- Les possibilités d’édition visuelle des formes, du texte et des lignes sont limitées à ce que la syntaxe Mermaid prend en charge.
- Les diagrammes utilisent la mise en page automatique native de Miro. Pour déplacer les formes librement, ou pour utiliser une disposition que Mermaid ne prend pas en charge, convertissez le diagramme en mode libre.
- Le glisser-déposer des formes arrive bientôt. Pour l’instant, ajoutez des formes avec le bouton + sur une forme, ou via copier-coller et duplication.
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 diagrammes Miro.
- Pour connecter des outils d’IA à Miro, consultez aperçu du Miro MCP Server.