Kostenloses Tool
Mermaid-Flowchart als bearbeitbares Diagramm
Fügen Sie ein Mermaid-Flussdiagramm (flowchart) oder ein erDiagram ein, auch Code aus einem KI-Chat, und bearbeiten Sie Ihr Mermaid-Diagramm visuell: Auf dem Canvas lässt sich jede Box, jeder Pfeil und jede Tabelle verschieben. Sequenz-, Klassen- und Zustandsdiagramme werden noch nicht unterstützt. Zum Ausprobieren brauchen Sie kein Konto.
Beispielausgabe
So funktioniert es
Mermaid-Code einfügen
Code aus einer Markdown-Datei, einer README oder einem KI-Chat. Ein mermaid-Codeblock drumherum und ein Konfigurationsblock am Anfang sind kein Problem.
Bearbeitbares Diagramm ansehen
Flowchart-Knoten werden zu Flussdiagramm-Formen wie Prozess, Entscheidung und Dokument, Subgraphen zu Rahmen und ER-Entitäten zu Tabellenkarten.
In Archboard öffnen
Speichern Sie es als neues Diagramm, um Formen zu verschieben und neu zu gestalten, Notizen zu ergänzen, einen Link zu teilen oder als SVG und PNG zu exportieren. Für die Registrierung genügt ein Google- oder GitHub-Konto.
Was aus Mermaid-Code gezeichnet wird
Diese Teile Ihres Codes werden zu bearbeitbaren Diagrammelementen:
flowchartgraphflowchart- und graph-Diagramme, auch flowchart-elk, mit jedem Knoten und seiner Beschriftung. Präfixe von Font Awesome wie fa:fa-car werden aus den Beschriftungen entfernt.
@{ shape }Knotenformen, ob mit Klammern oder der neueren Shape-Syntax geschrieben, werden Flussdiagramm-Elementen zugeordnet: Prozess, Entscheidung, Start und Ende, Daten, Dokument, Vorbereitung, manuelle Eingabe und Verbinder. Formen ohne Entsprechung werden zur nächstliegenden einfachen Form, etwa einem Zylinder, oder zu einem Prozess.
subgraphSubgraphen als Rahmen um ihre Knoten, verschachtelte Subgraphen eingeschlossen. Ein leerer Subgraph wird weggelassen.
-->-.->==>Pfeile mit ihren Beschriftungen, durchgezogen, gepunktet oder dick, einschließlich Ketten wie A --> B --> C und Verzweigungen wie A --> B & C.
erDiagramerDiagram-Entitäten als Tabellenkarten, die jedes Attribut mit Typ und PK-, FK- oder UK-Schlüssel auflisten, und Beziehungen mit ihrer Kardinalität. Nicht identifizierende Beziehungen sind gestrichelt.
TDLRDie Richtung des Flussdiagramms, TD, TB, LR, RL oder BT, legt fest, in welche Richtung das Diagramm läuft.
Unterstützte Mermaid-Diagrammtypen
Flussdiagramme (flowchart und graph) und Entity-Relationship-Diagramme (erDiagram) werden heute umgewandelt. sequenceDiagram, classDiagram, stateDiagram, gantt, pie, mindmap, timeline, gitGraph und die neueren Typen werden noch nicht umgewandelt: Das Tool nennt den gefundenen Typ, statt ein falsches Flussdiagramm zu zeichnen.
Was ein Mermaid-Import weglässt
- Sequenz-, Klassen-, Zustands-, Gantt- und Kreisdiagramme, Mindmaps und andere Diagrammtypen. Vorerst werden nur Flussdiagramme und ER-Diagramme umgewandelt.
- Farben und Schriften aus classDef, style, linkStyle und class: Das Diagramm startet mit den Archboard-Stilen, die Sie auf dem Canvas ändern können.
- Icons und Bilder an Knoten: icon- und img-Einstellungen werden verworfen, die Beschriftung bleibt erhalten.
- Eine Live-Verknüpfung mit Ihrem Code: Änderungen auf dem Canvas ändern den Mermaid-Code nicht, und spätere Änderungen am Code aktualisieren das Diagramm nicht.
Fragen zu Mermaid-Diagrammen
Kann ich Mermaid-Code aus ChatGPT, Claude oder einem anderen KI-Chat einfügen?
Ja. Kopieren Sie den Codeblock so, wie er ist, mit oder ohne mermaid-Fence, und fügen Sie ihn ein. Hat der Code einen Syntaxfehler, zeigt die Meldung die Zeile, sodass Sie ihn selbst korrigieren oder den Chat um eine korrigierte Fassung bitten können.
Welche Mermaid-Diagramme werden unterstützt?
flowchart und graph, mit Subgraphen und der neueren Shape-Syntax, sowie erDiagram. Bei anderen Typen wie sequenceDiagram oder classDiagram meldet das Tool, dass der Typ noch nicht unterstützt wird, statt zu raten.
Was passiert mit classDef- und style-Zeilen?
Sie werden übersprungen und in den Warnungen gezählt, sodass das Diagramm mit dem eigenen Look von Archboard startet. Sobald es in Archboard geöffnet ist, können Sie jede Form umfärben, in der Größe ändern und neu gestalten.
Was passiert, wenn ich das Diagramm in Archboard öffne?
Die Vorschau auf dieser Seite wird nicht gespeichert. Wenn Sie „In Archboard öffnen“ wählen, wird das angezeigte Diagramm mit Formen, Beschriftungen und Verbindungen als neues Diagramm in Ihrem Workspace gespeichert. Dort können Sie es umordnen, kommentieren, teilen oder exportieren. Es ist ein Ausgangspunkt: Spätere Änderungen an Ihrem Mermaid-Code aktualisieren das Diagramm nicht.
Ist der Mermaid-Konverter kostenlos?
Ja. Zum Einfügen von Mermaid-Code und Ansehen des Diagramms brauchen Sie kein Konto. Zum Öffnen in Archboard genügt ein kostenloses Konto.
In einer Minute ein Canvas öffnen
Melden Sie sich mit Google oder GitHub an. Kostenlos für einen Sitzplatz. Upgrade, wenn das Team dazukommt.