1 · Der Ärger am Anfang

Ich brauchte kürzlich eine Grafik für meinen Blogartikel „So produziere ich ein Video“. Ich habe Mermaid ausprobiert und drei Entwürfe von der KI erstellen lassen. Das hat funktioniert, sah aber nicht so toll aus:

• die Kästen waren nicht gleich groß
• die Anmerkungen sahen aus wie Verzweigungen im Ablauf
• die Meilensteine sahen aus wie nur ein weiterer Schritt und
• Pfeile sahen auch nicht immer so aus, wie ich sie wollte.

Dass das nicht das letzte Diagramm war, das ich mir erstellen lasse war mir klar, also brauchte ich eine Lösung. Mermaid ist brauchbar, ein gutes Werkzeug, aber die KI braucht noch genauere Anweisungen, quasi eine Schulung.

2 · Das Problem war nicht die Grafik, sondern die fehlenden Regeln

Mit Mermaid kann man Diagramme erstellen, die man einfach in seine Notizen integrieren oder in andere Dokumente einbetten kann. Die Diagramme brauchen nicht viel Speicherplatz und wenn man mit einer KI zusammenarbeitet, ist das ein gutes Tool da hinter den Kulissen das Bild durch Text beschrieben wird. Das ist für den KI Assistenten sehr einfach zu handhaben.

Die ersten Ergebnisse sahen nicht gut aus, da die Bedeutung der Formen und Elemente des Grafik-Werkzeugkastens noch nicht benannt waren. Meine 5 Regeln waren schnell beschrieben:

• Gleich große Kästen stehen für eine gleiche Wertigkeit der Schritte.
• Ein Kommentar ist keine Verzweigung im Ablauf, er sollte als Text an einer Linie dargestellt werden.
• Ein Meilenstein sieht anders aus als ein Schritt im Ablauf, er liegt quer zum Fluss.
• Bis zu fünf Schritte passen in eine einzelne Reihe sonst ist es für den Betrachter schwerer zu Erfassen. Wenn es mehr werden muss eine weitere Reihe aufgemacht werden.
• Wenn eine Reihe umgebrochen werden muss, braucht es am Ende der einen Reihe und am Anfang der nächsten einen optischen Marker.

Das sind inhaltliche Regeln, die Farben und Schriftarten sind unabhängig davon.

3 · Mermaid mit KI bändigen: rendern, anschauen, korrigieren

Um der KI beizubringen wie Erklärgrafiken aussehen sollen, gehe ich in Schleifen vor. Ich beschreibe was ich haben will, ich schaue mir das Ergebnis an und gebe Korrekturen zurück. Dann geht es in die nächste Runde. Die Überprüfung des Ergebnisses erfolgt hier tatsächlich durch anschauen, also visuell.

Ein Beispiel dafür, warum das Hinschauen bei Mermaid mit KI nicht optional ist. Ich wollte die Abstände zwischen den Spalten meiner Grafik ändern und habe den Wert dafür dort gesetzt, wo die Einstellungen für das Diagramm stehen. Es passierte nichts. Zwei Durchläufe mit deutlich verschiedenen Werten ergaben nicht etwa ähnliche Bilder, sondern exakt dasselbe — Byte für Byte, gleiche Prüfsumme. Erst als derselbe Wert in einer eigenen Konfigurationsdatei stand, wirkte er: aus 855 Pixeln Spaltenabstand wurden 746, 885 oder 1125, je nach Einstellung. Das heißt im Umkehrschluss, dass alle meine Grafiken davor mit den Voreinstellungen entstanden sind — und gemerkt hatte das niemand, ich am wenigsten. Warum das ausgerechnet bei meinem Aufbau so ist, weiß ich bis heute nicht; bei einfachen Diagrammen funktionieren beide Wege.

Diese technischen Details brauchen mich nicht zu interessieren, ich korrigiere sie anhand der für mich sichtbaren Ausgaben.

Am Ende hat Claude, meine KI, mehrere Python Skripte erstellt die zuverlässig, gesteuert über wenige Parameter, eine Mermaid Erklärgrafik zeichnen kann, die genau meinen Regeln folgt.

4 · Was ein Werkzeug kann, was eine Grafik nicht kann

Der Vorteil dieser drei, vier Schleifen in der Schulung ist die Wiederverwendbarkeit. Da ich darauf geachtet habe, das ich

• die inhaltliche Bedeutung der Elemente erklärt habe und
• der Stil (Farben und Schriftarten) separat gehalten habe und das
• die KI eine separate Python Datei zur Ansteuerung von Mermaid erstellt hat

bin ich jetzt auch sehr flexibel. Zwei weitere Grafiken sind mit dem gleichen Skill fast ohne weiteren Aufwand entstanden. Und dann war es sehr einfach den Skill zu erweitern und statt Mermaid sogar eine andere Software zur Ausgabe alternativ zu benutzen. Claude hat ein weiteres Skript zur Nutzung mit Affinity erstellt.

So sieht der Aufruf aus, aus dem die zweite Variante entstanden ist — 22 Schritte, sechs Zeilen:

render(schritte, notizen, meilensteine, lanes=6, orient="horz", groups=phasen)

Diese eine Zeile ist der Unterschied zwischen einer Grafik und beliebig vielen.

Im Laufe der Erstellung dieses Werkzeugs bin ich auch auf andere vergleichbare Tools gestossen. Konkret haben mir zwei Skills für Excalidraw sehr gut gefallen (excalidraw-diagram-skill von coleam00 und excalidraw-skill von Agents365) und die bestätigen meinen Ansatz und von beiden kann ich natürlich auch lernen.

5 · Die Sackgasse gehört dazu

Ich benutze lokal auf meinem Rechner eine App mit der ich Bilder durch unterschiedliche KI Modelle generieren lassen kann, Draw Things. Das funktioniert ohne Cloud, ohne Konto. Mein Plan war es, dass ich Claude die Möglichkeit gebe, über Draw Things Schmuckelemente für meine Ablaufdiagramme erstellen zu lassen. Im Netz stand dazu dass man den Bildgenerator über einen HTTP-API Aufruf über Port 7860 anspricht, das war aber schlichtweg falsch. Stattdessen erfolgt der Aufruf über einen gRPC Aufruf über Port 7859 mit TLS. Häh, ziemlich technisch aber eben notwendig. Und der Clou war: Das stand schon in meiner eigenen Notizen-Sammlung, in meinem eigenen Obsidian Vault! Aus einem eigenen früheren Projekt zu Draw Things hatte ich mir das schon gemerkt. Meine KI kann nun Draw Things bedienen und die Übergabe der generierten Bilder an meine Ablaufdiagramme hat im Prinzip funktioniert. Kleine Sinnbilder und Figuren an meinen Ablaufdiagrammen gibt es aber noch nicht, das ist erstmal verschoben.

6 · Wo die KI wirklich hilft — und wo nicht

Mit Hilfe der KI konnte ich schnell mehrere Varianten der Ablauf-Grafik erstellen und eine finden, die meinen Wünschen entspricht. Der Weg über einen Skill mit einem Generator (Python Skript) ist am Ende eine Zeitersparnis ab der zweiten Grafik. Gerade die sich wiederholenden Berechnungen zur Geometrie der einzelnen Elemente der Erklärgrafik erledigt die KI mit dem erstellten Skill und dem Python Skript nun wiederholbar und genau. Was die KI nicht alleine kann ist die Bedeutung der Formen zu erkennen, dies ist die Einarbeitungszeit, dies sind die Regeln die man ihr mitgeben muss. Die KI hat mir das Werkzeug gebaut. Die Regeln, nach denen es arbeitet, sind meine — und genau deshalb sehen die Grafiken nach mir aus und nicht nach Werkzeug.

7 · Zum Mitnehmen

Die Grafik, um die es hier ging, kannst du haben. Sie liegt als Vektor-Paket bereit: SVG, PDF, die Affinity-Datei und zwei PNGs. Du darfst damit machen, was du willst — verändern, weitergeben, in eigene Sachen einbauen, auch in verkaufte. Ohne Nennung, ohne Nachfragen.

👉 Der Content-Ablauf als Vektor-Paket

Gumroad fragt dich dabei nach einem Preis. Trag eine 0 ein — das ist so gemeint.

Wichtiger als die Datei sind aber die fünf Regeln. Die funktionieren ohne jedes Werkzeug, auch mit Bleistift auf Papier: gleich große Kästen für gleich wichtige Schritte, Kommentare als Text an einer Linie statt als Kasten, Meilensteine quer zum Fluss, ab sechs Schritten eine zweite Reihe, und am Umbruch ein Marker. Wenn dein nächstes Diagramm unruhig aussieht, ist meistens eine dieser fünf verletzt.

Und wenn du deinem Assistenten so etwas beibringen willst, statt es ihm jedes Mal neu zu erklären — genau dabei helfe ich. Ingo Düsentrieb AI-Coaching

FAQ

Wie erstelle ich eine Erklärgrafik, die nicht selbstgebastelt aussieht?

Nicht am benutzten Werkzeug liegt es, sondern an fünf einfachen Regeln: Kästen müssen gleich groß sein, Kommentare kommen an die Seite an eine Linie, Meilensteine werden quer zum Ablauf gezeichnet, ab sechs Schritten gibt es eine weitere Reihe, bei Reihen-Umbrüchen gibt es einen Marker am Ende der einen Reihe und einen am Anfang der nächsten.

Kann KI Diagramme zeichnen?

Rendern von Diagrammen mit unterschiedlichen Programmen geht sehr gut; entscheiden was eine Form in einem Diagramm bedeutet, nein. Genau diese Grenze ist der Grund, warum ich mir ein Werkzeug gebaut habe.

Wie bringe ich Mermaid mit KI dazu, blogtaugliche Diagramme zu erstellen?

Das geht über feste Kastenbreiten per Inline-HTML, Kommentare über Zeilen-Subgraphs auf gleicher Höhe, und die Abstände über mmdc -c statt über den %%{init}%%-Block — bei meinem Aufbau wirkten sie nur so.

Warum ein Generator statt einer einzelnen Grafik?

Weil die zweite Grafik dann fast ohne Zusatzaufwand entsteht und alle gleich aussehen.

---

🤖 Transparenz: Diesen Beitrag habe ich mit KI-Unterstützung erstellt und anschließend selbst redigiert und freigegeben. Eingesetzte Werkzeuge: Claude Cowork (Opus 5) für Struktur und Text, Eine gesetzliche Kennzeichnungspflicht besteht für einen redaktionell verantworteten Blogpost wie diesen nicht (EU AI Act Art. 50) — Transparenz finde ich aber einfach fair.