Mermaid-Diagramme für Miro

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

Mit der Mermaid-App kannst du ganz einfach reichhaltige, Code-basierte Diagramme direkt in deinen Miro-Boards erstellen und einbetten. Dadurch kannst du komplexe Systeme, Workflows oder Datenstrukturen mit einem einfachen Text-basierten Syntax visualisieren, was die Zusammenarbeit und das Verständnis fördert.

Ändern eines Diagrammcodes und Aktualisieren der Vorschau in Echtzeit

Installiere die Mermaid-App

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

Um sie aus dem Miro Marketplace zu installieren:

1. Navigiere zum Miro Marketplace 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 auf deinem Board Tools, Medien und Integrationen (+) aus. Das Feld Tools, Medien und Integrationen wird geöffnet.
2. Suche im Tools-Tab nach Mermaid-Diagramme und wähle sie aus.
3. Das Feld der Mermaid-Diagramme-App 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 Team-Einstellungen 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 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. Während du den Code bearbeitest, um dein Diagramm zu erstellen, aktualisiert er sich im Vorschau Bereich auf der rechten Seite automatisch, sodass du deine Änderungen in Echtzeit sehen kannst.

Die Mermaid App enthält mehrere Beispieldiagramme, die du über die linke untere Ecke des App-Feldes erreichen kannst. Du kannst eines dieser Beispiele auswählen und dann an deine Bedürfnisse anpassen.

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

Ändern der Größe des Code-Editor-Felds

Wenn du mit der Erstellung deines Diagramms fertig bist, 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 auf das Mermaid-Diagrammbild auf deinem Board, um es auszuwählen.
2. Klicke auf das Mermaid-Symbol im Kontextmenü, das erscheint (oder finde es in der Erstellungssymbolleiste).
3. Der Mermaid-Editor wird mit dem Code des Diagramms geöffnet. Nimm deine Änderungen im Bearbeitungsprogramm vor.
4. Klicke auf Diagramm aktualisieren.
5. Du kehrst dann zu deinem Miro-Board zurück, und das Diagramm auf dem Board wird mit deinen Änderungen aktualisiert.

Zusätzliche Informationen

Hier sind einige zusätzliche Ressourcen und Details für die Arbeit mit Mermaid-Diagrammen in Miro.

Mermaid-Syntax und Dokumentation

Die Mermaid-App verwendet eine spezifische Syntax, um Diagramme aus Text zu erstellen. Für detaillierte Informationen zur Syntax, einschließlich unterstützter Diagrammtypen und Optionen, konsultiere bitte die offizielle Mermaid-Dokumentation. Du kannst auch über die untere linke Ecke des Mermaid-App-Felds innerhalb von Miro auf einen Link zu dieser Dokumentation zugreifen.

Teilen und Exportieren von Diagrammen

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