Mit der Mermaid-App kannst du ganz einfach Code-basierte Diagramme in Miro erstellen.
Installieren der App
Installiere die App über den Miro Marketplace oder klicke auf diesen Link. Du kannst die App auch installieren, indem du sie einfach zur Erstellungssymbolleiste hinzufügst, wie unten gezeigt. Du musst ein Miro-Team auswählen, um die Installation abzuschließen.
⚠️ Nicht-Admin-Nutzer*innen können Apps nicht installieren, wenn dies in den Teameinstellungen nicht erlaubt ist.
Erstellen von Diagrammen und deren Hinzufügen zu Miro-Boards
Sobald die App installiert ist, erscheint sie in deiner Erstellungssymbolleiste.
Die App verfügt über einen Standard-Beispielcode. Wenn du den Code zur Erstellung deines Diagramms änderst, wird das Diagramm im Vorschaubereich auf der rechten Seite aktualisiert.
Ändern eines Diagramm-Codes
In der Mermaid-App gibt es mehrere Beispieldiagramme links unten – du kannst eines davon auswählen und es dann an deine Bedürfnisse anpassen.
Ändere die Größe des Code-Editor-Fensters, indem du es von seinem rechten Rand aus ziehst.
Ändern der Größe des Code-Editors
Weitere Informationen über die Syntax, die Mermaid verwendet, findest du in der offiziellen Dokumentation. Du kannst die Dokumentation auch über die linke untere Ecke des App-Panels aufrufen.
Sobald du dein Diagramm fertiggestellt hast, klicke auf zum Board hinzufügen. Das Diagramm wird dem Board als Bild hinzugefügt. Du kannst das Bild herunterladen oder das Board mit dem Diagramm mit deinen Teammitgliedern teilen.
Hinzufügen eines Diagramms zum Board
Diagramme bearbeiten
Du kannst Mermaid-Diagramme auch direkt im Miro-Board bearbeiten.
- Klicke auf das Diagramm, um es auszuwählen
- Klicke auf das Mermaid-Symbol in der Erstellungssymbolleiste.
- Der Mermaid-Editor wird geöffnet. Nimm die gewünschten Änderungen vor und klicke auf Diagramm aktualisieren
- Du kehrst zurück zu deinem Miro-Board und dein Diagramm wird aktualisiert
Ein Mermaid-Diagramm in Miro aktualisieren