Mermaid-Diagramme für Miro (veraltet)

Personen: Alle Nutzer
Pläne: Alle Pläne
Plattformen: Browser, Desktop

HINWEIS: Mermaid-Diagramme sind jetzt nativ in Miro verfügbar. Sieh dir Gemeinsam Mermaid-Diagramme erstellen an

Mit der Mermaid-App kannst du ganz einfach umfangreiche, codebasierte Diagramme direkt in deinen Miro-Boards erstellen und einbetten. So visualisierst du komplexe Systeme, Workflows oder Datenstrukturen mit einer einfachen, textbasierten Syntax und verbesserst dadurch die Zusammenarbeit und das Verständnis.

Diagrammcode ändern und sehen, wie sich die Vorschau in Echtzeit aktualisiert

Mermaid-App installieren

Du kannst die Mermaid-App aus dem Miro Marketplace oder direkt über die Erstellungssymbolleiste auf einem Miro-Board installieren.

So installierst du die Mermaid-App aus dem Miro Marketplace:

1. Rufe den Miro Marketplace auf oder folge diesem direkten Link zur Mermaid-App.
2. Wähle ein Miro-Team aus, um die Installation abzuschließen.

Du kannst die App auch über die Erstellungssymbolleiste installieren:

1. Wähle in der Erstellungssymbolleiste links an deinem Board Tools, Medien und Integrationen (+) aus. Das Tools, Medien und Integrationen-Feld wird geöffnet.
2. Suche im Tools-Tab nach Mermaid Diagrams und wähle diese aus.
3. Das Mermaid Diagrams-Feld wird geöffnet, und die App wird deiner Symbolleiste 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

Sobald die App installiert ist, ermöglicht dir die Mermaid-App, Diagramme mit textbasiertem Code zu erstellen und sie als Bilder zu deinem Board hinzuzufügen.

Nach der Installation findest du die Mermaid-App in deiner Erstellungssymbolleiste. Die App öffnet sich mit einem Standard-Beispielcode. Wenn du den Code zur Erstellung deines Diagramms änderst, aktualisiert sich die Vorschau auf der rechten Seite und du siehst deine Änderungen in Echtzeit.

Die Mermaid-App enthält mehrere Beispieldiagramme, die du in der unteren linken Ecke des App-Felds aufrufen kannst. Du kannst eines dieser Beispiele auswählen und es anschließend an deine Bedürfnisse anpassen.

Du kannst die Größe des Code-Editor-Felds ändern, indem du seinen rechten Rand ziehst.

Ändern der Größe des Code-Editors

Wenn du dein Diagramm fertiggestellt hast, klicke auf Zum Board hinzufügen. Das Diagramm wird dem Board als Bild hinzugefügt.

Hinzufügen eines Diagramms zum Board

Vorhandene Diagramme bearbeiten

Du kannst auch Mermaid-Diagramme bearbeiten, die sich bereits auf deinem Miro-Board befinden.

1. Klicke das Mermaid-Diagrammbild auf deinem Miro-Board an, um es auszuwählen.
2. Klicke im erscheinenden Kontextmenü auf das Mermaid-Symbol (oder finde es in der Erstellungssymbolleiste).
3. Der Mermaid-Editor öffnet sich mit dem Code des Diagramms. Nimm deine Änderungen im Code-Editor vor.
4. Klicke auf Diagramm aktualisieren.
5. Du kehrst zu deinem Miro-Board zurück, und das Diagramm auf dem Board wird mit deinen Änderungen aktualisiert.

Zusätzliche Informationen

Hier findest du zusätzliche Ressourcen und Details zur Arbeit mit Mermaid-Diagrammen in Miro.

Mermaid-Syntax und Dokumentation

Die Mermaid-App verwendet eine spezielle Syntax, um Diagramme aus Text zu erstellen. Weitere Informationen zur Syntax, einschließlich unterstützter Diagrammtypen und Optionen, findest du in der offiziellen Mermaid-Dokumentation. Du kannst außerdem über den Link in der linken unteren Ecke des Mermaid-App-Felds innerhalb von Miro auf diese Dokumentation zugreifen.

Diagramme freigeben und exportieren

Sobald ein Mermaid-Diagramm zu deinem Board hinzugefügt wurde, funktioniert es als Bild. Du kannst dieses Bild bei Bedarf direkt vom Board herunterladen. Um mit anderen zusammenzuarbeiten, kannst du das Miro-Board mit dem Diagramm freigeben.