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. Le code Mermaid reste la source de vérité, ce qui vous permet de déplacer les diagrammes entre Miro, votre codebase et des 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 progressivement, 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 (ancienne version).
Pourquoi utiliser les diagrammes Mermaid dans Miro
- S’intègre à votre workflow Mermaid. Utilisez la même syntaxe Mermaid que vous employez déjà dans vos documents, vos PR et les chats IA. Avec Miro MCP, les agents peuvent créer, lire, mettre à jour et modifier des diagrammes Mermaid sur vos tableaux.
- Rendu sous forme de formes Miro. Le code Mermaid se transforme en un Diagram composé de formes et de connecteurs Miro modifiables, disposés automatiquement par Miro — pas une image statique.
- Édition bidirectionnelle. Si vous modifiez le diagramme visuellement sur le tableau, le code Mermaid se met à jour. Si vous modifiez le code, le diagramme se redessine.
- Conçu pour la collaboration. Comme les diagrammes sont un contenu natif de Miro, votre équipe peut commenter, co-éditer et itérer ensemble sur le même tableau en temps réel.
Créer un diagramme Mermaid
Vous pouvez ajouter des diagrammes Mermaid de trois façons.
Coller 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 convertit le code en 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é à 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 précis. Incluez l’URL du tableau dans votre prompt si vous voulez que le diagramme soit ajouté à un tableau existant.
- Ouvrez le tableau dans Miro pour revoir, modifier et collaborer sur le diagramme généré.
Les agents peuvent aussi lire le code Mermaid directement depuis le 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. Voir le guide d’administration du serveur Miro MCP.
Commencer par le format Diagramme
- Sur un tableau Miro, ouvrez la barre de création et sélectionnez Formats > Diagramme.
- Cliquez sur Commencer par le code.
- Choisissez un modèle Mermaid, ou collez votre propre code Mermaid dans le panneau de code.
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 les 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 n’importe quel 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 au fur et à mesure de 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’effectuer vos modifications en collant le lien du widget de diagramme que vous souhaitez qu’il modifie.
Le diagramme se met à jour en temps réel pendant 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.
Plus de fonctionnalités d’édition
Si vous avez besoin de plus de formes, ou si vous souhaitez déplacer les formes librement, 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 comme des formes Miro natives. D’autres types de diagrammes Mermaid sont ajoutés progressivement :
- Diagrammes de flux : Rendus comme des formes Miro natives et modifiables.
- Diagrammes de séquence, de classes et d’entité‑relation : Rendus comme des formes Miro natives ; l’édition 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 leur syntaxe, consultez la documentation officielle de Mermaid.
Partager et exporter
- Lire avec Miro MCP. Demandez à un agent connecté de lire le diagramme depuis l’URL du tableau pour que vous puissiez le documenter dans une codebase, une pull request (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 les 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 au format 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 est disponible uniquement pour les diagrammes de flux.
- L’édition visuelle et le panneau de code sont disponibles uniquement en mode immersif.
- L’édition 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 intégrée 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 de formes arrive bientôt. Pour l’instant, ajoutez des formes avec le bouton + sur une forme, ou en copiant-collant et en dupliquant.
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 la Présentation de Miro MCP Server.