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.

Wenn du Informationen zur Legacy-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, PRs und KI-Chats verwendest. 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 Diagramm umgewandelt, das aus bearbeitbaren Miro-Formen und Connectors besteht und automatisch von Miro angeordnet wird – nicht als statisches Bild. Miro unterstützt die Formen der Mermaid-Versionen 10 und 11, sodass Diagramme, die du aus Mermaid Live, Mermaid AI oder anderen Tools einfügst, mit den vorgesehenen Formtypen dargestellt werden.
• Bidirektionales Bearbeiten. Ändere das Diagramm visuell auf dem Board, und der Mermaid-Code wird aktualisiert. Bearbeite den Code, und das Diagramm wird automatisch neu dargestellt.
• Für die Zusammenarbeit entwickelt. Da Diagramme native Miro-Inhalte sind, kann dein Team auf demselben Board in Echtzeit kommentieren, gemeinsam bearbeiten und daran iterieren.

Mermaid-Diagramm erstellen

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

Mermaid-Code auf das Board einfügen

1. Kopiere Mermaid-Code aus deinem Editor, deinen Dokumenten oder einem KI-Chat.
2. Füge ihn auf einem Board ein.
   Miro stellt den Code als Diagram aus Miro-Formen dar.

Wenn der Code einen Syntaxfehler enthält, zeigt Miro auf dem Canvas eine Rückmeldung an, damit du weißt, dass du den Fokusmodus öffnen und den Fehler im Code-Feld beheben musst. Nachdem du den Code korrigiert hast, wird das Diagram automatisch neu dargestellt.

Drag and drop a Mermaid file

1. Zieh eine .mmd oder .mermaid-Datei von deinem Computer auf ein Miro-Board.
   Miro stellt die Datei als Diagramm mit Miro-Formen dar.

Eine vollständige Liste der hochladbaren Formate findest du unter Unterstützte Dateiformate.

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 Miro-Board zu erstellen.

1. Verbinde dein KI-Tool mit Miro MCP.
2. Fordere den KI-Agenten auf, ein Mermaid-Diagramm auf einem bestimmten Board zu erstellen. Gib die Board-URL in dein Prompt an, wenn das Diagramm auf einem bestehenden Board erstellt werden soll.
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 außerdem vom Board auslesen 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 kennzeichnet, was hinzugefügt, entfernt oder geändert wurde.

Bei Enterprise-Preisplänen muss ein Unternehmens-Admin Miro MCP aktivieren, bevor Nutzer eine Verbindung herstellen können. Siehe den Miro MCP Server Admin-Leitfaden.

Mit dem Diagrammformat loslegen

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 native Miro-Formen dargestellt.
4. Setze die Bearbeitung im Fokusmodus oder auf dem Canvas fort.

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

Mermaid-Diagramm bearbeiten

Du kannst das Diagramm visuell auf dem Board, im Mermaid-Quellcode oder mithilfe von KI (KI-Kollegen, Flow oder Miro MCP) bearbeiten. Änderungen bleiben synchron.

Visuell bearbeiten

1. Öffne das Diagramm im Fokusmodus.
2. Wähle eine Form, Linie oder ein Text-Label, um sie direkt im Diagramm zu bearbeiten. Es öffnet sich eine Symbolleiste mit Steuerungen für das ausgewählte Element – zum Beispiel Formtyp ändern, Text bearbeiten, Schriftgröße anpassen, Fett anwenden oder Text-, Rand- und Füllfarbe festlegen.
   
3. Öffne das Code-Feld, um zu bestätigen, dass die Mermaid-Syntax entsprechend aktualisiert wurde.

Formen hinzufügen und verbinden

Im Fokusmodus kannst du das Diagramm erweitern, ohne den Mermaid-Code zu bearbeiten:

• Klicke, um Formen hinzuzufügen. Öffne das Formen-Feld und klicke auf eine Form, um sie dem Diagramm hinzuzufügen. Das Feld enthält Mermaid-Flussdiagramm-Formen und die standardmäßigen Miro-Flussdiagramm-Formen.
• Füge eine verbundene Form hinzu. Wähle eine Form aus und klicke dann die +-Schaltfläche, um eine neue, damit verbundene Form hinzuzufügen.
• Formen verbinden. Wähle eine Form aus und ziehe dann die +-Schaltfläche auf eine andere Form, um eine Linie zwischen ihnen zu zeichnen. Du kannst auch eine bestehende Linie neu verbinden, um den Fluss zu ändern.

Layout anpassen

Öffne das Layout-Feld im Fokusmodus, um die Anordnung des Diagramms zu ändern:

1. Unter Richtung klicke auf einen Pfeil, um den Fluss des Diagramms festzulegen: von links nach rechts, von oben nach unten, von unten nach oben oder von rechts nach links.
   
2. Unter Abstand ziehe die Horizontal- und Vertikal-Schieberegler, um den Abstand zwischen den Formen einzustellen.
   
3. Unter Formen wähle, wie die Formen dimensioniert werden:
   • Gleiche Breite: Alle Formen haben dieselbe Breite, damit das Layout ordentlich und ausgerichtet wirkt.
   • An Inhalt anpassen: Jede Form passt ihre Größe dem Text an – nützlich, wenn einige Formen deutlich mehr Text enthalten als andere.
4. Unter Text wähle aus, wie Labels angeordnet werden:
   • Mehrere Zeilen: Lange Labels werden auf mehrere Zeilen umgebrochen
   • Einzelne Zeile: Jedes Label bleibt in einer Zeile, wodurch Formen breiter werden

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.

Während du bearbeitest:

• Form und Code bleiben verknüpft. Wähle eine Form im Diagramm aus, um ihren Code hervorzuheben, oder wähle Code aus, um zur passenden Form zu springen.
• Syntax-Highlighting färbt Mermaid-Token im Editor, sodass die Struktur leichter zu erfassen ist.
• Du kannst das Code-Feld in der Größe ändern, um dir beim Bearbeiten mehr Platz zu verschaffen.

Klicke auf das Einstellungssymbol (Zahnrad) im Code-Feld, um anzupassen, wie der Editor deinen Code anzeigt:

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

Mit KI bearbeiten

Du kannst Mermaid-Diagramme mit KI-Kollegen, Flows, oder einem verbundenen KI-Agenten via Miro MCP weiterentwickeln. KI-Agenten lesen und bearbeiten den Mermaid-Quellcode, sodass sie präzise Änderungen vornehmen können, ohne das gesamte Diagramm neu zu generieren.

Mit KI-Kollegen oder Flows:

1. Wähle das Diagramm auf dem Board aus, oder kopiere einen Link zum Diagramm-Widget.
2. Öffne einen KI-Kollegen oder starte einen Flow.
3. Bitte um die gewünschte Änderung (zum Beispiel „Mach alle Container in diesem Diagramm rot“).
   Das Diagramm wird an Ort und Stelle aktualisiert.

Mit Miro MCP:

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

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 Free-form. Du kannst das im Formen-Feld, im Layout-Feld oder indem du versuchst, eine Form im Diagramm zu verschieben, starten.

1. Versuche, eine Form zu verschieben, oder wähle im Formenfeld oder im Layoutfeld Zur Freihand-Bearbeitung wechseln.
   Das Dialogfeld Zur Freihand-Bearbeitung wechseln öffnet sich.
2. Wähle, 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.

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

Unterstützte Diagrammtypen

Diese Tabelle zeigt, wie jeder Mermaid-Diagrammtyp in Miro dargestellt wird. Die visuelle Bearbeitung im Fokusmodus ist derzeit für Flussdiagramme verfügbar; weitere Typen werden schrittweise ergänzt:

Wenn du einen Diagrammtyp brauchst, der noch nicht visuell bearbeitbar ist, teile dein Feedback in diesem Formular. Möglicherweise melden wir uns für ein Interview bei dir.

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

Teilen und exportieren

• Mit Miro MCP lesen. Bitte einen verbundenen KI-Agenten darum, das Diagramm über die Board-URL zu 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 Diagramm‑Mehr-Menü (⋯) Link zum Fokusmodus kopieren, um Mitwirkende direkt ins Diagramm zu schicken. Siehe auch Boards freigeben und Mitwirkende einladen.
• Als PDF oder Bild herunterladen. Wähle im Diagramm‑Mehr-Menü (⋯) 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 aktuellen Einschränkungen:

• Visuelle Bearbeitung ist nur für Flussdiagramme verfügbar. Zustands-, Sequenz-, Klassendiagramme und ER-Diagramme werden als native Miro-Formen gerendert, aber visuelle Bearbeitung für diese Typen folgt später.
• 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. Du kannst Formen in einem Mermaid-Diagramm nicht frei verschieben.

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

Zusätzliche Informationen

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