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 si c’étaient des formes et des lignes Miro. Le code Mermaid reste la source de vérité, ce qui vous permet de transférer les diagrammes entre Miro, votre codebase et vos outils d’IA sans en perdre la 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 de manière itérative, et certaines fonctionnalités décrites ci‑dessous sont encore en cours de déploiement.
REMARQUE : Si vous cherchez des informations sur l’ancienne application Mermaid, consultez Diagrammes Mermaid pour Miro (version héritée).
Pourquoi utiliser les diagrammes Mermaid dans Miro
- Portable au sein de votre workflow Mermaid. Utilisez la même syntaxe Mermaid que vous rédigez déjà dans les documents, les PR et les chats IA. Avec Miro MCP, les agents peuvent créer, consulter, mettre à jour et modifier des diagrammes Mermaid sur vos tableaux.
- Converti en formes Miro. Le code Mermaid se transforme en un diagramme composé de formes et de connecteurs Miro modifiables, automatiquement mis en page 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égénère.
- Conçu pour la collaboration. Parce que les diagrammes sont du contenu natif Miro, votre équipe peut commenter, coéditer et faire évoluer le même tableau en temps réel.
Créer un diagramme Mermaid
Vous pouvez ajouter des diagrammes Mermaid de trois manières.
Collez le 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 rend le code sous forme de 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 Miro MCP Server pour générer un Diagramme Mermaid sur un tableau.
- Connectez votre outil d’IA à Miro MCP. Pour les étapes de configuration, consultez Miro MCP.
- Demandez à l’agent de créer un diagramme Mermaid sur un tableau spécifique. Si vous souhaitez que le diagramme soit ajouté à un tableau existant, incluez l’URL du tableau dans votre prompt.
- Ouvrez le tableau dans Miro pour consulter, modifier et collaborer sur le diagramme généré.
Les agents peuvent également extraire le code Mermaid du tableau et mettre à jour les diagrammes sur place, ce qui vous permet d’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.
Commencer avec le format Diagram
- Sur un tableau Miro, ouvrez la Barre de création et sélectionnez Formats > Diagramme.
- Cliquez sur Commencer par du code.
- Choisissez un modèle Mermaid, ou collez votre propre code Mermaid dans le panneau de code.
Le diagramme est rendu en tant que formes Miro. - Poursuivez la modification 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 un diagramme avec l’IA, visuellement sur le tableau, ou dans le code source Mermaid. Les modifications restent synchronisées.
Modifier visuellement
- Ouvrez le diagramme en mode immersif.
- Ajoutez ou supprimez des formes et des connecteurs comme pour tout diagramme Miro.
- Modifiez la disposition : de haut en bas, de gauche à droite.
- 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 en temps réel pendant vos modifications.
Modifier avec l’IA
- Copiez le lien du widget de diagramme.
- Ouvrez l’agent de votre choix, avec Miro MCP authentifié.
- Demandez à l’agent d’appliquer 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 effectue les modifications.
REMARQUE : La modification visuelle et le panneau de code sont disponibles uniquement en mode immersif. L’édition en écran partagé directement sur le canevas n’est pas prise en charge.
Fonctionnalités d’édition supplémentaires
Si vous avez besoin de davantage de formes ou si vous souhaitez déplacer librement les formes, utilisez l’un des points d’entrée du panneau Formes ou du panneau Mise en page pour passer le diagramme en mode libre.
ATTENTION : Une fois que vous passez 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 :
- Diagrammes de flux : S’affichent comme des formes Miro natives et modifiables.
- Diagrammes de séquence, de classes et entité-relation : S’affichent comme des formes Miro natives ; la modification visuelle arrive bientôt.
- Autres types de diagrammes : Si vous avez besoin d’un type de diagramme non répertorié ci‑dessus, partagez vos retours dans ce formulaire. Nous pourrions vous contacter pour un entretien.
Pour la liste complète des types de diagrammes Mermaid et de la syntaxe, 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 de le documenter dans votre codebase, une pull request (PR) ou d’autres outils. Le code source Mermaid reste disponible pour les allers-retours.
- Partager un lien. Copiez l’URL du tableau ou, dans 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 au format 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 sous forme d’image depuis le tableau.
Limitations connues
Comme les diagrammes Mermaid structurés sont en bêta, gardez à l’esprit les contraintes actuelles :
- La modification visuelle n’est disponible que pour les diagrammes de flux.
- La modification visuelle et le panneau de code sont disponibles uniquement en mode immersif.
- La modification visuelle des formes, du texte et des lignes est limitée à ce que la syntaxe Mermaid prend en charge.
- Les diagrammes utilisent la mise en page automatique native de Miro. Pour déplacer librement les formes, ou pour utiliser une mise en page non prise en charge par Mermaid, convertissez le diagramme en mode libre.
- Le glisser-déposer des formes arrive bientôt. Pour l’instant, ajoutez des formes avec le bouton + d’une forme, ou en utilisant le copier-coller ou la fonction Dupliquer.
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 de Miro MCP Server.