Personnes : Tous les utilisateurs
Forfaits : Tous les forfaits
Plateformes : Navigateur, Bureau
Grâce à l’application Mermaid, vous pouvez facilement créer et intégrer des diagrammes riches, basés sur du code, directement dans vos tableaux Miro. Cela vous permet de visualiser des systèmes complexes, des flux de travail ou des structures de données à l'aide d'une syntaxe simple basée sur du texte, améliorant ainsi la collaboration et la compréhension.
Modifier un code de diagramme et voir l'aperçu se mettre à jour en temps réel
Installer l'application Mermaid
Vous pouvez installer l’application Mermaid depuis la Marketplace de Miro ou directement depuis la barre d’outils de création dans un tableau Miro.
Pour installer à partir du Marketplace de Miro :
- Allez sur la Marketplace Miro ou suivez ce lien direct vers l'application Mermaid.
- Sélectionnez une équipe Miro pour terminer l’installation.
Vous pouvez également installer l’application depuis la barre d’outils Création :
- Dans la barre d’outils de création à gauche de votre tableau, sélectionnez Outils, médias et intégrations (+). Le panneau Outils, médias et intégrations va s’ouvrir.
- Dans l’onglet Outils, recherchez et sélectionnez Mermaid Diagrams.
- Le panneau de l'application Mermaid Diagrams s'ouvrira, et l'application sera ajoutée à votre barre d'outils.
✏️ Note : Les utilisateurs non-admins ne peuvent pas installer d’applications si l'installation d'applications est restreinte dans les paramètres de l'équipe.
Créer et ajouter des diagrammes aux tableaux Miro
Une fois installée, l’application Mermaid vous permet de générer des diagrammes à l'aide de code textuel et de les ajouter à votre tableau sous forme d'images.
Après l'installation, vous trouverez l'application Mermaid dans votre barre d'outils de création. L’application s'ouvre avec un code d’exemple par défaut. Au fur et à mesure que vous modifiez le code pour construire votre diagramme, il est actualisé dans la zone de prévisualisation sur la droite, vous permettant de voir vos modifications en temps réel.
L'application Mermaid comprend plusieurs diagrammes d'exemple, accessibles depuis le coin inférieur gauche du panneau de l'application. Vous pouvez sélectionner l'un de ces exemples, puis le personnaliser en fonction de vos besoins.
Vous pouvez modifier la taille du panneau de l’éditeur de code en faisant glisser son bord droit.
Modification de la taille du panneau de l’éditeur de code
Lorsque vous avez terminé la construction de votre diagramme, cliquez sur Ajouter au tableau. Le diagramme sera ajouté à votre tableau en tant qu’image.
Ajout d’un diagramme au tableau
Modifier des diagrammes existants
Vous pouvez également modifier les diagrammes Mermaid déjà présents sur votre tableau Miro.
- Cliquez sur l'image du diagramme Mermaid sur votre tableau pour la sélectionner.
- Cliquez sur l’icône Mermaid dans le menu contextuel qui s’affiche (ou trouvez-la dans la barre d’outils de création).
- L’éditeur Mermaid s’ouvrira avec le code du diagramme. Apportez vos modifications dans l'éditeur de code.
- Cliquez sur Mettre à jour le diagramme.
- Vous serez rendu à votre tableau Miro, et le diagramme sur le tableau sera mis à jour avec vos modifications.
Informations supplémentaires
Voici quelques ressources complémentaires et détails pour travailler avec les diagrammes Mermaid dans Miro.
Syntaxe Mermaid et documentation
L'application Mermaid utilise une syntaxe spécifique pour générer des diagrammes à partir de texte. Pour des informations détaillées sur la syntaxe, y compris les types de diagrammes supportés et les options, veuillez consulter la documentation officielle de Mermaid. Vous pouvez également accéder à un lien vers cette documentation depuis le coin inférieur gauche du panneau de l'application Mermaid dans Miro.
Partager et exporter des diagrammes
Une fois qu'un diagramme Mermaid est ajouté à votre tableau, il fonctionne comme une image. Vous pouvez télécharger cette image directement à partir du tableau si nécessaire. Pour collaborer avec d'autres, vous pouvez partager le tableau Miro contenant le diagramme.