Mermaid-Zeichnungen in neoDraw importieren und visuell bearbeiten

Du hast ein Mermaid-Diagramm als Code und möchtest es in WordPress zeigen? Die automatisch erzeugte Grafik ist ein guter Anfang. Für einen fertigen Artikel sollen aber oft noch Abstände, Farben oder Beschriftungen angepasst werden.

Genau dafür kannst du neoDraw verwenden. Das kostenlose WordPress-Plugin bringt einen Excalidraw-basierten Zeicheneditor direkt in deine Website. Du fügst deinen Mermaid-Code ein, prüfst die Vorschau und übernimmst das Diagramm als bearbeitbare Zeichnung. Vorkenntnisse in neoDraw brauchst du nicht: Diese Anleitung führt dich vom Download über den Import bis zur fertigen SVG-Datei in der WordPress-Mediathek.

Der Ablauf eignet sich für technische Dokumentation, Softwarearchitektur, Prozesse und UML-Diagramme. Zusätzlich findest du einen direkt nutzbaren GPT-Prompt sowie Beispiele für Flowcharts, Sequenzdiagramme und Klassendiagramme.

1. neoDraw kostenlos herunterladen, in WordPress installieren und aktivieren.
2. Eine neue neoDrawZeichnung in der Mediathek oder direkt im verwendeten Page Builder öffnen.
3. Im Editor auf Weitere Werkzeuge und danach auf Mermaid zu Excalidraw klicken.
4. Mermaid-Syntax links einfügen und die Vorschau rechts prüfen.
5. Auf Einfügen klicken, Formen und Texte visuell bearbeiten und die Zeichnung speichern.

neoDraw legt das Ergebnis als SVG in der WordPress-Mediathek ab. Von dort kannst du das Diagramm wie ein normales Bild in Gutenberg, Bricks, Elementor oder den Classic Editor einfügen.

Mermaid beschreibt ein Diagramm als Text. Knoten, Verbindungen und Richtung stehen im Code, während der Renderer daraus die Grafik berechnet. Das ist praktisch für README-Dateien, Wikis und versionierte Dokumentation, weil sich eine Änderung an einem Prozess als kleine Textänderung speichern lässt.

Für eine Website reicht die automatisch berechnete Darstellung oft nicht. Vielleicht soll ein Entscheidungsknoten stärker auffallen, eine Verbindung einen anderen Verlauf nehmen oder die Zeichnung zum Design der Seite passen. Ein statischer Screenshot löst das Problem nur oberflächlich. Er bleibt ein Bild. Nach der Konvertierung in neoDraw kannst du dagegen die erzeugten Formen, Pfeile und Texte auswählen und mit den Werkzeugen des Excalidraw-basierten Editors verändern.

Der Import spart den mechanischen Teil der Arbeit. Mermaid baut die Struktur, neoDraw übernimmt die Gestaltung. Bei einem Flowchart musst du die Kästen nicht einzeln anlegen und anschließend mit Pfeilen verbinden. Nach dem Einfügen kannst du trotzdem jeden unterstützten Bestandteil verschieben, beschriften, einfärben oder löschen.

• Vorhandenen Mermaid-Code als Ausgangspunkt nutzen
• Mit ChatGPT oder einem anderen LLM erzeugte Diagramme übernehmen
• Flowcharts, Sequenzdiagramme und Klassendiagramme visuell nachbearbeiten
• Skizzenstil, Farben, Schrift, Icons und zusätzliche Hinweise ergänzen
• Das fertige Diagramm als skalierbare SVG-Datei in WordPress speichern

Das ist besonders nützlich für technische Artikel, Onboarding-Dokumente, Prozessbeschreibungen, API-Abläufe, Entscheidungsbäume und UML-Diagramme, die verständlich aussehen sollen und später noch geändert werden müssen.

Du musst die Mermaid-Syntax nicht komplett auswendig kennen. Ein Sprachmodell kann aus einer Prozessbeschreibung einen brauchbaren ersten Entwurf erzeugen. Gib dabei Diagrammtyp, Leserichtung, gewünschte Beschriftungen und das Ausgabeformat vor. Bitte ausdrücklich um reinen Mermaid-Code ohne Erklärung, damit du das Ergebnis direkt kopieren kannst.

Ein Prompt, der für einen einfachen Freigabeprozess funktioniert:

Erstelle ein Mermaid-Flowchart fuer einen WordPress-Redaktionsprozess. Leserichtung von links nach rechts. Schritte: Entwurf schreiben, fachlich pruefen, bei Aenderungsbedarf zum Entwurf zurueck, sonst veroeffentlichen. Gib nur gueltigen Mermaid-Code in einem Codeblock aus. Nutze kurze deutsche Beschriftungen und keine eigenen zusaetzlichen Schritte.

Das mögliche Ergebnis sieht so aus:

flowchart LR
    A[Entwurf schreiben] --> B{Fachlich freigegeben?}
    B -- Nein --> A
    B -- Ja --> C[Veroeffentlichen]

Prüfe die Logik trotzdem selbst. GPT kann einen Schritt auslassen, eine Verzweigung erfinden oder Zeichen verwenden, die Mermaid anders interpretiert als erwartet. Die Vorschau in neoDraw zeigt solche Probleme früh.

Der Mermaid-Import läuft vollständig im neoDraw-Editor. Du brauchst keinen externen Mermaid Live Editor und musst keine PNG-Datei zwischenspeichern.

Lade die kostenlose ZIP-Datei von neoDraw herunter. Öffne in WordPress Plugins > Plugin hinzufügen > Plugin hochladen, wähle die ZIP-Datei und aktiviere das Plugin. Danach kannst du über den Aktionslink neoDraw erstellen in der Plugin-Übersicht oder über die WordPress-Mediathek eine neue Zeichnung anlegen.

Arbeitest du bereits an einer Seite, kannst du neoDraw auch aus dem Bildbereich von Gutenberg, Bricks, Elementor oder dem Classic Editor öffnen. Der Editor erscheint innerhalb deines WordPress-Workflows.

Klicke in der Werkzeugleiste auf Weitere Werkzeuge. Im Bereich Generate findest du den Eintrag Mermaid zu Excalidraw. Der Dialog besteht aus zwei Seiten: links das Feld Mermaid-Syntax, rechts die Vorschau.

neoDraw merkt sich den zuletzt eingegebenen Mermaid-Code lokal im Browser. Wenn du den Dialog später erneut öffnest, kannst du dort weiterarbeiten. Verlass dich bei wichtigen Diagrammen trotzdem nicht auf diesen Zwischenspeicher. Hebe den ursprünglichen Code in deiner Dokumentation oder Versionsverwaltung auf.

Ersetze das Beispiel im linken Feld durch deinen Mermaid-Code. Die Vorschau wird beim Schreiben aktualisiert. Ein korrektes Diagramm erscheint direkt rechts. Bei ungültiger Syntax zeigt der Dialog einen Fehler, statt ein unvollständiges Ergebnis in die Zeichnung einzusetzen.

Für einen ersten Test eignet sich ein kleiner Flowchart:

flowchart TD
    A[Anfrage] --> B{Vollstaendig?}
    B -- Nein --> C[Rueckfrage]
    C --> A
    B -- Ja --> D[Bearbeiten]

Halte Beschriftungen anfangs kurz. Lange Sätze vergrößern Knoten und machen die automatisch berechnete Anordnung unruhig. Den ausführlichen Text kannst du später in neoDraw ergänzen oder neben dem Diagramm erklären.

Wenn die Vorschau stimmt, klicke auf Einfügen. neoDraw schließt den Dialog, setzt das Diagramm in die Mitte der Zeichenfläche und passt die Ansicht an den neuen Inhalt an. Unterstützte Mermaid-Typen werden in Excalidraw-Elemente umgewandelt. Du kannst also einen Knoten anklicken, seinen Text ändern, einen Pfeil neu verbinden oder mehrere Elemente gemeinsam verschieben.

Das unterscheidet den Workflow vom Export eines Mermaid-SVG oder Screenshots. Die Grafik ist nicht auf eine fertige Pixel- oder Vektordarstellung reduziert. Sie wird zur Ausgangsbasis für die weitere Arbeit im Editor.

Nach dem Import kannst du Farben, Linienbreite, Pfeilspitzen, Schrift, Deckkraft und Skizzenstil verändern. Ergänze bei Bedarf freie Formen, handgezeichnete Markierungen, Icons, Bilder oder Links. Für einen Artikel ist es oft sinnvoll, nur den wichtigsten Pfad farblich hervorzuheben und Nebenwege ruhiger zu halten.

Speichere die Zeichnung anschließend in neoDraw. Das Plugin legt eine SVG-Datei in der WordPress-Mediathek ab und bettet die Editor-Daten ein. Dadurch bleibt die Zeichnung später bearbeitbar. Gleichzeitig kannst du sie wie ein normales Medienobjekt in Beiträge und Seiten einsetzen. SVG bleibt bei verschiedenen Bildschirmgrößen scharf.

Der aktuelle Mermaid-Dialog nennt drei direkt unterstützte Diagrammtypen:

• Flowchart: Prozesse, Entscheidungsbäume, Workflows und Abhängigkeiten
• Sequence Diagram: Nachrichten und Aufrufe zwischen Personen, Diensten oder Softwarekomponenten
• Class Diagram: Klassen, Attribute, Methoden und Beziehungen in UML-nahen Modellen

Diese Typen werden in bearbeitbare Excalidraw-Elemente umgewandelt. Andere Mermaid-Formate, etwa Gantt, Mindmap, State Diagram, ER-Diagramm, User Journey oder Pie Chart, kann der Dialog als Bild darstellen. Das Ergebnis lässt sich dann als Ganzes verschieben oder skalieren, aber nicht Knoten für Knoten bearbeiten. Wenn die visuelle Nachbearbeitung entscheidend ist, baue den Inhalt nach Möglichkeit als Flowchart, Sequenzdiagramm oder Klassendiagramm auf.

Ein Mermaid Flowchart beginnt mit flowchart oder graph. LR ordnet den Ablauf von links nach rechts an, TD von oben nach unten:

flowchart LR
    A[Ticket eingegangen] --> B{Prioritaet hoch?}
    B -- Ja --> C[Sofort zuweisen]
    B -- Nein --> D[Backlog]
    C --> E[Loesung pruefen]
    D --> E

Ein Sequenzdiagramm eignet sich für zeitlich geordnete Kommunikation. Dieses Beispiel zeigt einen vereinfachten WordPress-REST-Aufruf:

sequenceDiagram
    participant B as Browser
    participant W as WordPress
    participant A as API
    B->>W: Formular absenden
    W->>A: Anfrage senden
    A-->>W: Ergebnis liefern
    W-->>B: Ausgabe anzeigen

Nach dem Import kannst du Teilnehmer verschieben, Beschriftungen kürzen und wichtige Nachrichten farblich markieren.

Klassendiagramme bilden statische Beziehungen ab. Für eine kleine WordPress-Medienlogik könnte der Code so aussehen:

classDiagram
    class MediaItem {
        +String filename
        +String altText
        +save()
    }
    class Drawing {
        +String svgData
        +edit()
    }
    MediaItem <|-- Drawing

In neoDraw kannst du nach der Konvertierung zusätzliche Erklärungen ergänzen, ohne die eigentliche Mermaid-Syntax komplizierter zu machen.

Beginne mit der groben Anordnung. Markiere zusammengehörige Knoten und verschiebe sie als Gruppe, bevor du einzelne Pfeile korrigierst. Danach lohnt sich ein zweiter Durchgang für Typografie und Farben. So vermeidest du, dass du feine Details mehrfach anpassen musst.

Für technische Diagramme funktioniert ein begrenztes Farbsystem meist besser als eine Farbe pro Knoten. Nutze zum Beispiel eine Farbe für Eingaben, eine für Entscheidungen und eine für Ergebnisse. neoDraw hat Rechtecke, Rauten, Ellipsen, Pfeile, Freihand-Stift, Text, Rahmen, Icons und eine Bibliothek. Du kannst auch anklickbare Links ergänzen, wenn ein Knoten auf eine Dokumentation oder Unterseite führen soll.

Die konvertierten Elemente verhalten sich anschließend wie normal gezeichnete Excalidraw-Objekte. Damit kannst du den bewusst handgezeichneten Look verstärken oder die Linien ruhiger einstellen, je nachdem, ob das Diagramm eher wie ein Workshop-Whiteboard oder wie technische Dokumentation wirken soll.

neoDraw speichert Zeichnungen in der WordPress-Mediathek. Das ist für den täglichen Einsatz wichtiger als ein zusätzlicher Exportordner: Die SVG-Datei hat einen normalen Attachment-Eintrag, lässt sich auswählen, wiederfinden und erneut im Editor öffnen.

In Gutenberg, Bricks, Elementor und dem Classic Editor ergänzt neoDraw direkte Einstiege an den jeweiligen Bildfeldern. Auch Page Builder, die Bilder aus der Mediathek übernehmen, können die gespeicherte SVG verwenden. Du erstellst das Mermaid-Diagramm also dort, wo du später auch den Artikel bearbeitest.

Wenn du eine Zeichnung aktualisierst, prüfe anschließend die betroffenen Seiten und leere gegebenenfalls den Seiten- oder CDN-Cache. Bei wichtigen Prozessgrafiken solltest du außerdem eine lokale Kopie des Mermaid-Ausgangscodes behalten. Die SVG enthält die neoDrawEditor-Daten, ersetzt aber keine versionierte technische Dokumentation.

• Die Vorschau bleibt leer: Prüfe die erste Zeile. Sie muss zum Diagrammtyp passen, zum Beispiel flowchart TD oder sequenceDiagram.
• Ein Flowchart bricht beim Wort end: Mermaid kann ein kleingeschriebenes end als Steuerwort behandeln. Schreibe End mit großem Anfangsbuchstaben oder setze die Beschriftung in Anführungszeichen.
• Sonderzeichen erzeugen einen Syntaxfehler: Setze längere Beschriftungen in Anführungszeichen und vereinfache den Text zunächst. Ergänze typografische Details später in neoDraw.
• Das Diagramm ist zu breit: Wechsle von LR zu TD, kürze Labels oder teile einen großen Ablauf in zwei Zeichnungen.
• Elemente lassen sich nicht einzeln auswählen: Wahrscheinlich verwendest du einen Mermaid-Typ, der nur als Bild gerendert wird. Nutze für direkt bearbeitbare Knoten Flowchart, Sequenz- oder Klassendiagramm.
• Der GPT-Code enthält Erklärtext: Kopiere nur den Inhalt des Mermaid-Codeblocks. Sätze vor oder nach dem Code gehören nicht in das Syntaxfeld.

Bei den unterstützten Typen bleiben Formen, Texte und Verbindungen als Excalidraw-Elemente erhalten. Du kannst sie im neoDrawEditor bearbeiten und zusammen mit weiteren Objekten speichern. Für die Veröffentlichung in WordPress ist dieser visuelle Stand meist der relevante.

Der Import ist keine dauerhafte Zwei-Wege-Verbindung. Wenn du nach dem Einfügen einen Knoten in neoDraw umbenennst oder einen neuen Pfeil zeichnest, schreibt der Editor diese Änderung nicht zurück in deinen ursprünglichen Mermaid-Code. Möchtest du Code und Grafik parallel pflegen, entscheide vorab, welcher Stand die Quelle ist.

Für technische Dokumentation bietet sich Mermaid als Quelle an: Code ändern, neu importieren und danach nur wenige visuelle Anpassungen vornehmen. Für eine redaktionelle Websitegrafik kann neoDraw als Quelle sein, sobald die Grundstruktur importiert wurde.

Ein Diagramm kann einen Artikel verständlicher machen, ersetzt aber nicht den erklärenden Text. Suchmaschinen und Screenreader erfassen komplexe Beziehungen in einer Grafik nur eingeschränkt. Beschreibe deshalb den wichtigsten Ablauf im umgebenden Absatz und gib der gespeicherten SVG einen konkreten Alternativtext.

Ein sinnvoller Alt-Text nennt Diagrammtyp und Kernaussage, zum Beispiel: Flowchart des WordPress-Redaktionsprozesses vom Entwurf bis zur Veröffentlichung. Schreibe nicht jeden Knoten in den Alt-Text. Bei einem komplexen UML- oder Sequenzdiagramm gehört eine ausführliche Textalternative in den Artikel.

Verwende das Hauptkeyword dort, wo es den Inhalt beschreibt. Wiederholungen wie "Mermaid Diagramm Mermaid Zeichnung Mermaid Editor" helfen Lesern nicht und sind auch keine gute SEO-Strategie. Aussagekräftige H2-Überschriften, ein passender Seitentitel, sichtbare Beispiele und eine klare Antwort auf die Suchfrage sind wertvoller.

Kann ich ein Mermaid Diagramm in WordPress bearbeiten?

Ja. neoDraw konvertiert Flowcharts, Sequenzdiagramme und Klassendiagramme in bearbeitbare Excalidraw-Elemente. Andere Mermaid-Typen werden als Bild dargestellt.

Wo finde ich Mermaid zu Excalidraw in neoDraw?

Öffne im neoDraw-Editor Weitere Werkzeuge und klicke im Bereich Generate auf Mermaid zu Excalidraw.

Kann ChatGPT Mermaid Diagramme erstellen?

Ja. Beschreibe Diagrammtyp, Leserichtung, Knoten und Verbindungen möglichst konkret und fordere reinen Mermaid-Code an. Prüfe den Ablauf anschließend in der Vorschau.

Welche Mermaid Diagrammtypen sind in neoDraw direkt editierbar?

Flowchart, Sequence Diagram und Class Diagram werden direkt unterstützt. Weitere Typen rendert der Import als Bild.

Kann ich ein Mermaid Diagramm als SVG speichern?

Ja. neoDraw speichert die eingefügte und bearbeitete Zeichnung als SVG in der WordPress-Mediathek.

Bleibt der Mermaid-Code nach der Bearbeitung synchron?

Nein. Änderungen an Excalidraw-Elementen werden nicht zurück in den ursprünglichen Mermaid-Code geschrieben.

Ist neoDraw kostenlos?

Die in dieser Anleitung beschriebene neoDrawVersion kann kostenlos heruntergeladen und in WordPress installiert werden.

Brauche ich einen externen Mermaid Editor?

Nein. Eingabefeld, Vorschau und Einfügen befinden sich direkt im neoDrawEditor.

Mermaid ist stark, wenn eine logische Struktur schnell aus Text entstehen soll. neoDraw übernimmt den Teil, bei dem ein Diagramm für echte Leser auf einer WordPress-Seite funktionieren muss. Du importierst den Code, korrigierst die Darstellung mit visuellen Werkzeugen und speicherst das Ergebnis als weiterhin bearbeitbare SVG in der Mediathek.

Für den ersten Versuch reicht der kleine Freigabe-Flowchart aus dieser Anleitung. Importiere ihn, verschiebe einen Knoten, ändere eine Farbe und speichere die Zeichnung. Danach ist der Ablauf für größere Prozessdiagramme, Softwarearchitektur und technische Dokumentation derselbe.