Personen: Alle Nutzer
Preispläne: Alle Pläne
Plattformen: Browser, Desktop
Mit der Mermaid-App kannst du ganz einfach reichhaltige, Code-basierte Diagramme direkt in deine Miro-Boards einbetten. So kannst du komplexe Systeme, Arbeitsabläufe oder Datenstrukturen mit einer einfachen textbasierten Syntax visualisieren, was die Zusammenarbeit und das Verständnis verbessert.
Diagrammcode ändern und die Vorschau in Echtzeit aktualisieren sehen
Installiere die Mermaid-App
Du kannst die Mermaid-App aus dem Miro Marketplace oder direkt über die Erstellungssymbolleiste innerhalb eines Miro-Boards installieren.
Zur Installation aus dem Miro Marketplace:
- Navigiere zum Miro Marketplace oder folge diesem direkten Link zur Mermaid-App.
- Wähle ein Miro-Team aus, um die Installation abzuschließen.
Du kannst die App auch über die Erstellungssymbolleiste installieren:
- Wähle in der Erstellungssymbolleiste links auf deinem Board Tools, Medieninhalte und Integrationen (+). Das Feld für Tools, Medien und Integrationen wird geöffnet.
- Suche auf der Tools-Registerkarte nach Mermaid Diagrams und wähle sie aus.
- Das Mermaid Diagrams-App-Panel wird geöffnet, und die App wird zu deiner Toolbar hinzugefügt.
✏️ Hinweis: Nutzer ohne Admin-Rechte können keine Apps installieren, wenn die App-Installation in den Teameinstellungen eingeschränkt ist.
Diagramme erstellen und zu Miro-Boards hinzufügen
Nach der Installation ermöglicht dir die Mermaid-App, Diagramme mit textbasierter Code zu erstellen und als Bilder zu deinem Board hinzuzufügen.
Nach der Installation findest du die Mermaid-App in deiner Erstellungssymbolleiste. Die App wird mit einem Standard-Beispielcode geöffnet. Wenn du den Code zur Erstellung deines Diagramms änderst, wird dieser im Vorschaubereich auf der rechten Seite aktualisiert, sodass du deine Änderungen in Echtzeit sehen kannst.
Die Mermaid-App enthält mehrere Beispieldiagramme, die in der unteren linken Ecke des App-Panels zugänglich sind. Du kannst eine dieser Vorlagen auswählen und sie dann an deine Bedürfnisse anpassen.
Du kannst die Größe des Code-Editor-Fensters ändern, indem du seinen rechten Rand ziehst.
Ändern der Größe des Code-Editor-Fensters
Wenn du dein Diagramm fertiggestellt hast, klicke auf Zum Board hinzufügen. Das Diagramm wird deinem Board als Bild hinzugefügt.
Hinzufügen eines Diagramms zum Board
Vorhandene Diagramme bearbeiten
Du kannst auch Mermaid-Diagramme auf deinem Miro-Board bearbeiten.
- Klicke auf das Bild des Mermaid-Diagramms auf deinem Board, um es auszuwählen.
- Klicke auf das Mermaid-Symbol im erscheinenden Kontextmenü (oder finde es in der Erstellungssymbolleiste).
- Der Mermaid-Editor wird sich mit dem Diagrammcode öffnen. Nimm deine Änderungen im Code-Editor vor.
- Klicke auf Diagramm aktualisieren.
- Du wirst zu deinem Miro-Board zurückkehren und das Diagramm auf dem Board wird mit deinen Änderungen aktualisiert.
Zusätzliche Informationen
Hier sind einige zusätzliche Ressourcen und Details zum Arbeiten mit Mermaid-Diagrammen in Miro.
Syntax und Dokumentation von Mermaid
Die Mermaid-App verwendet eine spezifische Syntax, um Diagramme aus Text zu generieren. Für detaillierte Informationen zur Syntax, einschließlich unterstützter Diagrammtypen und Optionen, konsultiere bitte die offizielle Mermaid-Dokumentation. Du kannst auch über einen Link zu dieser Dokumentation in der linken unteren Ecke des Mermaid-App-Panels innerhalb von Miro zugreifen.
Diagramme freigeben und exportieren
Sobald ein Mermaid-Diagramm zu deinem Board hinzugefügt wird, funktioniert es als Bild. Du kannst dieses Bild direkt vom Board herunterladen, falls nötig. Um mit anderen zusammenzuarbeiten, kannst dudas Miro-Board mit dem Diagramm freigeben.