Wer kann das tun: Alle Nutzer
Welche Preispläne: Free, Starter, Business, Enterprise, Education
Welche Plattformen: Browser, Desktop
Erstelle Diagramme aus Mermaid-Code und bearbeite sie wie Miro-Formen und -Linien. Mermaid bleibt die Quelle der Wahrheit, sodass du Diagramme zwischen Miro, deiner Codebase und KI-Tools verschieben kannst, ohne die Struktur zu verlieren.
HINWEIS: Strukturierte Mermaid-Diagramme befinden sich in der Betaversion. Unterstützte Diagrammtypen und Bearbeitungsfunktionen werden schrittweise verbessert, und einige der unten beschriebenen Funktionen werden noch eingeführt.
HINWEIS: Wenn du Informationen zur alten Mermaid-App suchst, siehe Mermaid-Diagramme für Miro (Legacy).
Warum Mermaid-Diagramme in Miro verwenden
- Portabel innerhalb deines Mermaid-Workflows. Verwende dieselbe Mermaid-Syntax, die du bereits in Dokumenten, Pull Requests (PRs) und KI-Chats schreibst. Mit Miro MCP können Agenten Mermaid-Diagramme auf deinen Boards erstellen, lesen, aktualisieren und bearbeiten.
- Als Miro-Formen dargestellt. Mermaid-Code wird in ein Diagramm aus bearbeitbaren Miro-Formen und Connectors umgewandelt, das von Miro automatisch angeordnet wird — kein statisches Bild.
- Bidirektionales Bearbeiten. Änderst du das Diagramm visuell auf dem Board, wird der Mermaid-Code aktualisiert. Bearbeitest du den Code, wird das Diagramm erneut gerendert.
- Für Zusammenarbeit entwickelt. Da Diagramme native Miro-Inhalte sind, kann dein Team auf demselben Board kommentieren, gemeinsam bearbeiten und in Echtzeit weiterentwickeln.
Mermaid-Diagramm erstellen
Du kannst Mermaid-Diagramme auf drei Arten hinzufügen.
Mermaid-Code auf dem Board einfügen
- Kopiere Mermaid-Code aus deinem Bearbeiter, deinen Dokumenten oder einem KI-Chat.
- Füge ihn auf ein Miro-Board ein.
Miro stellt den Code als Diagramm aus Miro-Formen dar.
Diagramm mit Miro MCP erstellen
Verwende ein MCP-kompatibles KI-Tool (zum Beispiel Cursor oder Claude Code), das mit dem Miro MCP Server verbunden ist, um ein Mermaid-Diagramm auf einem Board zu erstellen.
- Verbinde dein KI-Tool mit Miro MCP. Anweisungen zur Einrichtung findest du unter Miro MCP.
- Bitte den Agenten, ein Mermaid-Diagramm auf einem bestimmten Board zu erstellen. Füge die Board-URL in dein Prompt ein, wenn das Diagramm auf einem bestehenden Board erstellt werden soll.
- Öffne das Board in Miro, um das gerenderte Diagramm zu überprüfen, zu bearbeiten und gemeinsam daran zu arbeiten.
Agenten können Mermaid auch vom Board auslesen und Diagramme direkt aktualisieren, sodass du weiterhin zwischen deiner Codebase und Miro iterieren kannst. Wenn ein Agent ein Diagramm bearbeitet, kann er eine Legende hinzufügen, die zeigt, was hinzugefügt, entfernt oder geändert wurde.
HINWEIS: Bei Enterprise-Preisplänen muss ein Unternehmens-Admin Miro MCP aktivieren, bevor sich Nutzer verbinden können. Siehe den Miro MCP Server Admin-Leitfaden.
Vom Format „Diagramm“ starten
- Auf einem Miro-Board öffne die Erstellleiste und wähle Formate > Diagramm.
- Klicke auf Mit Code beginnen.
- Wähle eine Mermaid-Vorlage oder füge deinen eigenen Mermaid-Code in das Code-Feld ein.
Das Diagramm wird als Miro-Formen und -Verbinder dargestellt. - Bearbeite das Diagramm weiter im Fokusmodus oder auf dem Canvas.
Weitere Informationen zum Diagramm-Format, zum Fokusmodus, zu Ebenen und zu Vorlagen findest du in den Miro-Diagrammen.
Mermaid-Diagramm bearbeiten
Du kannst ein Diagramm mit KI, visuell auf dem Board oder im Mermaid-Quellcode bearbeiten. Änderungen bleiben synchron.
Visuell bearbeiten
- Öffne das Diagramm im Fokusmodus.
- Füge Formen und Connectors hinzu oder entferne sie, wie bei jedem Miro-Diagramm.
- Ändere das Layout: von oben nach unten, von links nach rechts.
- Öffne das Code-Feld, um zu bestätigen, dass sich die Mermaid-Syntax entsprechend aktualisiert hat.
Code bearbeiten
- Öffne das Diagramm im Fokusmodus.
- Öffne das Code-Feld.
- Aktualisiere die Mermaid-Syntax.
Das Diagramm wird beim Bearbeiten sofort neu gerendert.
Mit KI bearbeiten
- Kopiere den Link zum Diagramm-Widget.
- Öffne den Agenten deiner Wahl, bei dem Miro MCP authentifiziert ist.
- Bitte den Agenten, deine Änderungen vorzunehmen, und füge den Link zum Diagramm-Widget ein, das er bearbeiten soll.
Das Diagramm wird während der Bearbeitung durch den Agenten direkt neu gerendert.
HINWEIS: Visuelles Bearbeiten und das Code-Feld sind nur im Fokusmodus verfügbar. Split-View-Bearbeitung direkt auf dem Canvas wird nicht unterstützt.
Weitere Bearbeitungsfunktionen
Wenn du mehr Formen brauchst oder Formen frei verschieben möchtest, verwende einen der Einstiegspunkte im Formen-Feld oder im Layout-Feld, um das Diagramm in die Freiform umzuschalten.
WARNUNG: Sobald du ein Diagramm in die Freiform umschaltest, ist es nicht mehr mit dem Mermaid-Code synchron und du kannst es nicht mehr über MCP bearbeiten.
Unterstützte Diagrammtypen
Flowcharts werden als native Miro-Formen dargestellt. Weitere Mermaid-Diagrammtypen werden schrittweise hinzugefügt:
- Flussdiagramme: Werden als native, bearbeitbare Miro-Formen dargestellt.
- Sequenz-, Klassen- und Entity-Relationship-Diagramme: Werden als native Miro-Formen dargestellt; visuelle Bearbeitung folgt in Kürze.
- Andere Diagrammtypen: Wenn du einen Diagrammtyp benötigst, der oben nicht aufgeführt ist, teile dein Feedback in diesem Formular. Wir könnten dich für ein Interview kontaktieren.
Die vollständige Liste der Mermaid-Diagrammtypen und die Syntax findest du in der offiziellen Mermaid-Dokumentation.
Teilen und exportieren
- Mit Miro MCP lesen. Lass einen verbundenen Agenten das Diagramm über die Board-URL lesen, damit du es in einer Codebase, einem PR oder anderen Tools dokumentieren kannst. Der Mermaid-Quellcode bleibt verfügbar und ermöglicht Hin- und Her-Aktualisierungen.
- Link teilen. Kopiere die Board-URL, oder wähle im Mehr-Menü des Diagramms (⋯) Link zum Fokusmodus kopieren, um Mitwirkende direkt ins Diagramm zu schicken. Siehe auch Boards freigeben und Mitwirkende einladen.
- Als PDF oder Bild herunterladen. Im Mehr-Menü des Diagramms (⋯) wähle Als PDF exportieren oder Als Bild exportieren (JPG, SVG oder PDF). du kannst das Diagramm auch als Bild vom Board kopieren.
Bekannte Einschränkungen
Da strukturierte Mermaid-Diagramme sich in der Betaversion befinden, beachte die folgenden aktuellen Einschränkungen:
- Visuelles Bearbeiten ist nur für Flussdiagramme verfügbar.
- Visuelles Bearbeiten und das Code-Feld sind nur im Fokusmodus verfügbar.
- Das visuelle Bearbeiten von Formen, Text und Linien ist auf das beschränkt, was die Mermaid-Syntax unterstützt.
- Diagramme verwenden das native Auto-Layout von Miro. Um Formen frei zu verschieben oder ein Layout zu verwenden, das Mermaid nicht unterstützt, konvertiere das Diagramm in Freiform.
- Drag & Drop für Formen kommt bald. Bis dahin fügst du Formen mit der +-Schaltfläche an einer Form hinzu oder per Kopieren/Einfügen und Duplizieren.
Zusätzliche Informationen
- Für Mermaid-Syntax, unterstützte Diagrammtypen und Beispiele siehe die offizielle Mermaid-Dokumentation.
- Für Funktionen des Diagrammformats wie Ebenen, Container und Fokusmodus siehe Miro-Diagramme.
- Zum Verbinden von KI-Tools mit Miro siehe die Übersicht zum Miro MCP Server.