Mermaid-Diagramme erstellen

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: Wenn du Informationen zur Legacy-Mermaid-App suchst, siehe Mermaid-Diagramme für Miro (legacy).

Warum Mermaid-Diagramme in Miro verwenden

• Kompatibel mit deinem bestehenden Mermaid-Workflow. Verwende dieselbe Mermaid-Syntax, die du bereits in Dokumenten, PRs und KI-Chats schreibst. Mit Miro MCP können KI-Agenten Mermaid-Diagramme auf deinen Boards erstellen, lesen, aktualisieren und bearbeiten.
• Als Miro-Formen dargestellt. Mermaid-Code wird in ein Diagram umgewandelt, das aus bearbeitbaren Miro-Formen und Connectors besteht und automatisch von Miro angeordnet wird – kein statisches Bild.
• Bidirektionales Bearbeiten. Änderst du das Diagram visuell auf dem Board, aktualisiert sich der Mermaid-Code. Bearbeitest du den Code, wird das Diagram neu gerendert.
• Für Zusammenarbeit konzipiert. Da Diagramme native Miro-Inhalte sind, kann dein Team dasselbe Board in Echtzeit kommentieren, gemeinsam bearbeiten und weiterentwickeln.

Mermaid-Diagram erstellen

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

Mermaid-Code auf dem Board einfügen

1. Kopiere 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 bearbeitbaren Miro-Formen dar.

Ein Diagramm mit Miro MCP erstellen

Verwende ein 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 KI-Agenten, auf einem bestimmten Board ein Mermaid-Diagramm zu erstellen. Füge die Board-URL in deinen Prompt ein, wenn du das Diagramm auf einem bestehenden Board haben möchtest.
3. Öffne das Board in Miro, um das gerenderte Diagramm zu prüfen, zu bearbeiten und gemeinsam daran zu arbeiten.

KI-Agenten können Mermaid auch vom Board zurücklesen und Diagramme direkt aktualisieren, sodass du weiterhin zwischen deiner Codebase und Miro iterieren kannst. Wenn ein KI-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 Nutzer eine Verbindung herstellen können. Siehe den Admin-Guide für den Miro MCP Server.

Mit dem Diagrammformat loslegen

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

Mehr zum Diagrammformat, zum Fokusmodus, zu Ebenen und zu Vorlagen findest du in Miro-Diagrammen.

Ein Mermaid-Diagramm bearbeiten

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

Visuell bearbeiten

1. Öffne das Diagramm im Fokusmodus.
2. Wähle eine Form, eine Linie oder ein Text-Label aus, um es direkt im Diagramm zu bearbeiten. Es öffnet sich eine Symbolleiste mit Steuerelementen 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 auf die Richtungssteuerung in der Diagramm-Symbolleiste und wähle Von oben nach unten, Von unten nach oben, Von links nach rechts oder Von rechts nach links.
   
4. Abstand anpassen. Öffne die Layoutsteuerung und wähle Eng für ein kompakteres Layout, Normal für ausgewogene Abstände oder Weit für ein luftigeres Layout, das sich leichter überblicken lässt.
   
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 sofort neu gerendert.

Klicke im Code-Feld auf das Symbol für Einstellungen (Zahnrad), um anzupassen, wie der Bearbeiter deinen Code darstellt:

• Zeilennummern: Zeilennummern im Editor anzeigen oder ausblenden.
• Zeilenumbruch: Lange Zeilen umbrechen, damit sie in die Breite des Felds 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 KI-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 KI-Agent es bearbeitet.

HINWEIS: Visuelle Bearbeitung und das Code-Feld sind nur im Fokusmodus verfügbar. Eine geteilte Ansicht zum Bearbeiten direkt auf dem Canvas wird nicht unterstützt.

Weitere Bearbeitungsmöglichkeiten

Wenn du mehr Formen brauchst oder Formen frei verschieben möchtest, schalte das Diagramm in die Freihand-Bearbeitung. Du kannst dies im Formenfeld, im Layoutfeld 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 Formenfeld oder im Layoutfeld.
   Das Dialogfeld Zur Freihand-Bearbeitung wechseln öffnet sich.
2. Wähle aus, wie du wechseln möchtest:
   • Wechseln und ersetzen: Dieses Diagramm in die Freihand-Bearbeitung konvertieren.
   • Kopie erstellen, dann wechseln: Die aktuelle Mermaid-Version beibehalten und eine Kopie in die Freihand-Bearbeitung konvertieren.

WARNUNG: Sobald du ein Diagramm in die Freihand-Bearbeitung umstellst, ist es nicht mehr mit dem Mermaid-Code synchronisiert und kann nicht mehr über MCP bearbeitet werden.

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, gib dein Feedback in diesem Formular ab. Wir könnten uns für ein Interview bei dir melden.

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

Teilen und exportieren

• Mit Miro MCP lesen. Lass einen verbundenen KI‑Agenten das Diagramm über die Board‑URL lesen, damit du es in einer Codebase, einem PR oder anderen Tools dokumentieren kannst. Die Mermaid‑Quelle bleibt für Roundtrips verfügbar.
• Link teilen. Kopiere die Board‑URL, oder wähle im Diagrammmenü Mehr (⋯) die Option 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 Diagrammmenü Mehr (⋯) Als PDF exportieren oder Als Bild exportieren (JPG, SVG oder PDF). Du kannst das Diagramm auch als Bild vom Board kopieren.

Bekannte Einschränkungen

Beachte die folgenden 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. Du kannst Formen in einem Mermaid-Diagramm nicht frei verschieben.

Wir prüfen Funktionsanfragen fortlaufend. Falls eine dieser Einschränkungen für dich ein Hindernis ist, kontaktiere uns bitte über die Community oder deinen Admin.

Zusätzliche Informationen

• Weitere Informationen zur Mermaid-Syntax, zu unterstützten Diagrammtypen und zu Beispielen findest du in der offiziellen Mermaid-Dokumentation.
• Weitere Informationen zu Funktionen des Diagrammformats wie Ebenen, Containern und dem Fokusmodus findest du in den Miro-Diagrammen.
• Informationen zum Verbinden von KI-Tools mit Miro findest du in der Übersicht zum Miro MCP Server.