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 sind in der Betaversion. Unterstützte Diagrammtypen und Bearbeitungsfunktionen werden schrittweise verbessert, und einige der unten beschriebenen Funktionen werden noch ausgerollt.
HINWEIS: Wenn du Informationen zur älteren Mermaid-App suchst, siehe Mermaid-Diagramme für Miro (Legacy).
Warum Mermaid-Diagramme in Miro verwenden
- Mit deinem bestehenden Mermaid-Workflow kompatibel. Verwende dieselbe Mermaid-Syntax, die du bereits in Dokumenten, 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 umgewandelt, das aus bearbeitbaren Miro-Formen und Connectors besteht und von Miro automatisch angeordnet wird — kein statisches Bild.
- Bidirektionales Bearbeiten. Ändere das Diagramm visuell auf dem Board, und der Mermaid-Code aktualisiert sich. Bearbeite den Code, und das Diagramm wird erneut gerendert.
- Für Zusammenarbeit entwickelt. Da Diagramme native Miro-Inhalte sind, kann dein Team sie kommentieren, gemeinsam bearbeiten und in Echtzeit am selben Board weiterentwickeln.
Mermaid-Diagramm erstellen
Du kannst Mermaid-Diagramme auf drei Arten hinzufügen.
Mermaid-Code auf das Board einfügen
- Kopiere Mermaid-Code aus deinem Editor, deinen Dokumenten oder einem KI-Chat.
- Füge den Code auf ein Miro-Board ein.
Miro stellt den Code als Diagramm aus Miro-Formen dar.
Ein Diagramm mit Miro MCP erstellen
Verwende ein mit 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. Anleitung zur Einrichtung findest du unter Miro MCP.
- Fordere den Agenten auf, auf einem bestimmten Board ein Mermaid-Diagramm zu erstellen. Füge die Board-URL deinem Prompt hinzu, wenn du das Diagramm auf einem vorhandenen Board haben möchtest.
- Ö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 lesen und Diagramme direkt auf dem Board aktualisieren, sodass du weiterhin zwischen deiner Codebase und Miro iterieren kannst. Wenn ein Agent ein Diagramm bearbeitet, kann er eine Legende hinzufügen, die anzeigt, 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 Admin-Leitfaden für Miro MCP Server.
Mit dem Diagrammformat starten
- Öffne auf einem Miro-Board die Erstellungsleiste 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 dargestellt. - Bearbeite weiter im Fokusmodus oder auf dem Canvas.
Weitere Informationen zum Diagrammformat, zum Fokusmodus, zu Ebenen und zu Vorlagen findest du in den Miro-Diagramme.
Mermaid-Diagramm bearbeiten
Du kannst ein Diagramm mit KI, visuell auf dem Board oder im Mermaid-Quelltext bearbeiten. Änderungen bleiben synchronisiert.
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 oder von links nach rechts.
- Öffne das Code-Feld, um zu bestätigen, dass die Mermaid-Syntax entsprechend aktualisiert wurde.
Code bearbeiten
- Öffne das Diagramm im Fokusmodus.
- Öffne das Code-Feld.
- Aktualisiere die Mermaid-Syntax.
Das Diagramm wird beim Bearbeiten automatisch neu dargestellt.
Mit KI bearbeiten
- Kopiere den Link zum Diagramm-Widget.
- Öffne deinen bevorzugten Agenten und stelle sicher, dass 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 an Ort und Stelle neu dargestellt.
HINWEIS: Visuelle Bearbeitung und das Code-Feld sind nur im Fokusmodus verfügbar. Eine Bearbeitung in geteilter Ansicht direkt auf dem Canvas wird nicht unterstützt.
Weitere Bearbeitungsfunktionen
Wenn du mehr Formen brauchst oder Formen frei verschieben willst, benutze einen der Einstiegspunkte im Formen-Feld oder im Layout-Feld, um das Diagramm in den Free-form-Modus zu wechseln.
WARNUNG: Sobald du ein Diagramm in den Free-form-Modus wechselst, ist es nicht mehr mit dem Mermaid-Code synchron und kann nicht mehr über MCP bearbeitet werden.
Unterstützte Diagrammtypen
Flowcharts werden als native Miro-Formen dargestellt. Zusätzliche Mermaid-Diagrammtypen werden schrittweise ergänzt:
- Flowcharts: Werden als native, bearbeitbare Miro-Formen dargestellt.
- Sequence, Class, and Entity Relationship diagrams: Werden als native Miro-Formen dargestellt; visuelle Bearbeitung folgt in Kürze.
- Other diagram types: Wenn du einen Diagrammtyp brauchst, der oben nicht aufgeführt ist, teile dein Feedback in diesem Formular. Wir melden uns eventuell für ein Interview.
Die vollständige Liste der Mermaid-Diagrammtypen und der Syntax findest du in der offiziellen Mermaid-Dokumentation.
Teilen und exportieren
- Mit Miro MCP auslesen. Lass einen verbundenen Agenten das Diagramm über die Board-URL auslesen, damit du es in einer Codebase, einem PR oder anderen Tools dokumentieren kannst. Der Mermaid-Quellcode bleibt für Hin- und Rückbearbeitungen verfügbar.
- Link teilen. Kopiere die Board-URL, oder wähle im Diagramm-Menü Mehr (⋯) Fokusmodus-Link kopieren, um Mitwirkende direkt ins Diagramm zu schicken. Siehe auch Boards freigeben und Mitwirkende einladen.
- Als PDF oder Bild herunterladen. Wähle im Mehr-Menü des Diagramms (⋯) 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 diese aktuellen Einschränkungen:
- Visuelles Bearbeiten ist nur für Flussdiagramme verfügbar.
- Visuelles Bearbeiten und das Codefeld sind nur im Fokusmodus verfügbar.
- Visuelles 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 nutzen, das Mermaid nicht unterstützt, konvertiere das Diagramm in eine Freiform.
- Drag & Drop für Formen wird bald verfügbar sein. Vorerst füge Formen mit der +-Schaltfläche an einer Form hinzu oder per Kopieren/Einfügen und Duplizieren.
Zusätzliche Informationen
- Zur Mermaid-Syntax, zu den unterstützten Diagrammtypen und zu Beispielen siehe die offizielle Mermaid-Dokumentation.
- Zu Funktionen des Diagram-Formats wie Ebenen, Containern und dem Fokusmodus siehe Miro-Diagramme.
- Zum Anschließen von KI-Tools an Miro siehe die Übersicht zum Miro MCP Server.