Mermaid-Diagramme erstellen (Betaversion)

Wer kann das tun: Alle Nutzer
Welche Preispläne: Free, Starter, Business, Enterprise, Education
Welche Plattformen: Browser, Desktop

du kannst Diagramme aus Mermaid-Code erstellen und sie genauso bearbeiten 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 ausgerollt.

HINWEIS: Wenn du Informationen zur veralteten Mermaid-App suchst, siehe Mermaid-Diagramme für Miro (legacy).

Warum Mermaid-Diagramme in Miro verwenden

• Kompatibel mit deinem bestehenden Mermaid-Workflow. Verwende die gleiche 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 gerendert. Mermaid-Code wird zu einem Diagramm aus bearbeitbaren Miro-Formen und Connectors, das von Miro automatisch angeordnet wird – kein statisches Bild.
• Bidirektionales Bearbeiten. Ändere das Diagramm visuell auf dem Board, und der Mermaid-Code wird aktualisiert. Bearbeite den Code, und das Diagramm wird neu gerendert.
• Auf Zusammenarbeit ausgelegt. Weil Diagramme native Miro-Inhalte sind, kann dein Team auf demselben Board in Echtzeit kommentieren, gemeinsam bearbeiten und iterieren.

Ein Mermaid-Diagramm erstellen

Du kannst Mermaid-Diagramme auf drei Arten hinzufügen.

Mermaid-Code auf das Board einfügen

1. Kopiere den Mermaid-Code aus deinem Editor, deinen Dokumenten oder einem KI-Chat.
2. Füge ihn 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 (z. B. Cursor oder Claude Code), das mit dem Miro MCP Server verbunden ist, um ein Mermaid-Diagramm auf einem Board zu erstellen.

1. Verbinde dein KI-Tool mit Miro MCP.
2. Bitte den Agenten, ein Mermaid-Diagramm auf einem bestimmten Board zu erstellen. Gib die Board-URL in deinem Prompt an, wenn du das Diagramm auf einem bestehenden Board haben möchtest.
3. Öffne das Board in Miro, um das gerenderte Diagramm zu überprüfen, zu bearbeiten und gemeinsam daran zu arbeiten.

Agenten können außerdem Mermaid 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 markiert, 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 die Miro MCP Server-Admin-Anleitung.

Vom Diagrammformat starten

1. Öffne auf einem Miro-Board die Erstellungsleiste und wähle Formate > Diagramm.
2. Klicke auf Mit Code erstellen.
3. Füge deinen eigenen Mermaid-Code in das Code-Feld ein oder wähle eine Mermaid-Vorlage.
   Das Diagramm wird als Miro-Formen gerendert.
4. Bearbeite weiter im Fokusmodus oder direkt auf dem Canvas.

Weitere Informationen zum Diagrammformat, zum Fokusmodus, zu Ebenen und Vorlagen findest du unter Miro-Diagramme.

Mermaid-Diagramm bearbeiten

Du kannst das Diagramm visuell auf dem Board, im Mermaid-Quellcode oder mit KI bearbeiten. Änderungen bleiben synchron.

Visuell bearbeiten

1. Öffne das Diagramm im Fokusmodus.
2. Wähle eine Form, Linie oder ein Text-Label aus und bearbeite das Element direkt im Diagramm. Eine Symbolleiste öffnet sich mit Bedienelementen für das ausgewählte Element — zum Beispiel Formtyp ändern, Text bearbeiten, Schriftgröße anpassen, Fett anwenden oder Text-, Rahmen- und Füllfarbe festlegen.
   
3. Lege die Layout-Richtung fest. Klicke in der Diagramm-Symbolleiste auf die Richtungssteuerung und wähle Von oben nach unten, Von unten nach oben, Von links nach rechts, oder Von rechts nach links.
   
4. Elementabstand anpassen. Öffne die Layout-Steuerung und wähle Schmal für ein kompakteres Layout, Normal für ausgewogene Abstände oder Großzügig für mehr Abstand und bessere Übersicht.
   
5. Öffne das Code-Feld, um zu bestätigen, dass die Mermaid-Syntax entsprechend aktualisiert wurde.

Code bearbeiten

1. Öffne das Diagramm im Fokusmodus.
2. Öffne das Code-Feld.
   
3. Aktualisiere die Mermaid-Syntax.
   Das Diagramm wird beim Bearbeiten automatisch neu gerendert.

Klicke im Code-Feld auf das Einstellungs-Symbol (Zahnrad), um einzustellen, wie der Editor deinen Code darstellt:

• Zeilennummern: Zeilennummern im Editor ein- oder ausblenden.
• Text umbrechen: Lange Zeilen umbrechen, damit sie in die Feldbreite passen, statt horizontal zu scrollen.

Mit KI bearbeiten

1. Kopiere den Link zum Diagramm-Widget.
2. Öffne dein bevorzugtes KI-Tool, bei dem Miro MCP authentifiziert ist.
3. Bitte den Agenten, deine Änderungen vorzunehmen, und füge den Link zum Diagramm-Widget ein, das er bearbeiten soll.
   Das Diagramm wird an Ort und Stelle neu gerendert, während der Agent es bearbeitet.

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 möchtest, wechsle das Diagramm in den free-form-Modus. Du kannst das über das Formen-Feld, das Layout-Feld oder indem du versuchst, eine Form im Diagramm zu verschieben, starten.

1. Versuche, eine Form zu verschieben, oder wähle Zur Freihand-Bearbeitung wechseln im Formen-Feld oder im Layout-Feld.
   Das Zur Freihand-Bearbeitung wechseln Dialogfeld öffnet sich.
2. Wähle aus, wie du wechseln möchtest:
   • Wechseln und ersetzen: Dieses Diagramm in die Freihand-Bearbeitung umwandeln.
   • Kopie erstellen und dann wechseln: Die aktuelle Mermaid-Version beibehalten und eine Kopie in die Freihand-Bearbeitung umwandeln.

WARNUNG: Sobald du ein Diagramm in die Freihand-Bearbeitung umwandelst, ist es nicht mehr mit dem Mermaid-Code synchron und du kannst es nicht mehr über MCP bearbeiten.

Unterstützte Diagrammtypen

Flussdiagramme werden als native Miro-Formen dargestellt. Weitere Mermaid-Diagrammtypen werden schrittweise hinzugefügt:

Wenn du einen Diagrammtyp brauchst, der noch nicht visuell bearbeitbar ist, teile dein Feedback über dieses Formular mit. Wir könnten dich für ein Interview kontaktieren.

Die vollständige Liste der Mermaid-Diagrammtypen und der Syntax findest du in der offiziellen Mermaid-Dokumentation.

Teilen und exportieren

• Mit Miro MCP lesen. Fordere einen verbundenen Agenten auf, das Diagramm über die Board-URL zu lesen, damit du es in einer Codebase, einem PR oder anderen Tools dokumentieren kannst. Der Mermaid-Quellcode bleibt für bidirektionale Aktualisierungen verfügbar.
• Link teilen. Kopiere die Board-URL, oder wähle im Mehr-Menü (⋯) des Diagramms Fokusmodus-Link kopieren, um Mitwirkende direkt ins Diagramm zu führen. 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 außerdem als Bild vom Board kopieren.

Bekannte Einschränkungen

Da strukturierte Mermaid-Diagramme in der Betaversion sind, beachte diese aktuellen Einschränkungen:

• Visuelle Bearbeitung ist nur für Flussdiagramme verfügbar.
• Visuelle Bearbeitung und das Code-Feld sind nur im Fokusmodus verfügbar.
• Die visuelle Bearbeitung von Formen, Text und Linien ist auf das beschränkt, was die Mermaid-Syntax unterstützt.
• Diagramme verwenden das native Auto-Layout von Miro. Wenn du Formen frei verschieben oder ein Layout verwenden möchtest, das Mermaid nicht unterstützt, wandle das Diagramm in ein freies Layout um.
• Ziehen und Ablegen von Formen ist in Kürze verfügbar. Bis dahin fügst du Formen über die +-Schaltfläche einer Form oder mit Kopieren/Einfügen bzw. Duplizieren hinzu.

Zusätzliche Informationen

• Zur Mermaid-Syntax, zu unterstützten Diagrammtypen und zu Beispielen siehe die offizielle Mermaid-Dokumentation.
• Zu 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.