Diagramme mit Claude erstellen: 3 Wege statt Textwand (2026)

Ruwen Bädorf·16. Oktober 2026·9 Min. Lesezeit

Diagramme mit Claude erstellen geht im Chat, über Mermaid-Code oder in Claude Code mit dem kostenlosen Skill Answer me with HTML. Hier siehst du die drei Wege im Vergleich und richtest den Skill in 4 Schritten ein.

Diagramme mit Claude erstellen geht auf drei Wegen: direkt im Chat über die eingebauten Visualisierungen, über Mermaid-Code, den ein Editor zeichnet, oder in Claude Code mit dem kostenlosen Skill Answer me with HTML. Der Skill macht aus jeder komplizierten Frage eine fertige Seite mit Ablaufdiagramm, Tabelle und Zeitstrahl, die als eine einzige HTML-Datei auf deinem Rechner landet.

Du fragst Claude etwas Wichtiges und bekommst einen Textblock zurück, der länger ist als deine Geduld. Du überfliegst ihn, nickst und machst weiter. Die zwei Sätze, auf die es wirklich ankam, stecken irgendwo in der Mitte, und genau die hast du übersehen. Im Team ist es noch schlimmer, weil eine weitergeleitete Antwort von Claude fast nie jemand komplett liest. Das Problem ist nicht die Antwort, sondern ihr Format. Hier zeige ich dir die drei Wege, wie Claude dir stattdessen Bilder liefert, wann welcher passt und wie du den stärksten davon einrichtest.

Wenn du die Kurzfassung lieber siehst als liest: Das Video dazu läuft auf Instagram bei @ruwen.ai.

🔥 Willst du den Skill einrichten, ohne lange zu suchen? Im Guide Claude antwortet ab jetzt als Grafik statt als Textblock stehen der Link zum Repo, die Installation in Claude Code und zwei fertige Prompts. → Guide holen

Warum du Diagramme mit Claude erstellen solltest, statt Textblöcke zu lesen

Andrej Karpathy, Mitgründer von OpenAI, hat Anfang Oktober 2026 genau dieses Problem beschrieben. Seine Beobachtung ist, dass Sprachmodelle inzwischen so schnell so viel liefern, dass nicht mehr die Antwort der Engpass ist, sondern dein Verstehen. Er ordnet die Formate dafür auf einer Leiter mit vier Stufen an, und jede Stufe ist leichter aufzunehmen als die davor (Zusammenfassung bei explainx).

ASD-STE100 ist eine Schreibregel, die ursprünglich für die Wartungshandbücher von Flugzeugen entwickelt wurde. Für die meisten Fragen im Alltag bringen Stufe 2 und Stufe 3 den größten Sprung. Genau dort setzen die drei Wege an, die ich dir jetzt zeige.

Diagramme mit Claude erstellen: die drei Wege im Vergleich

Sie unterscheiden sich darin, wo sie laufen, was du einrichten musst und was am Ende bei dir liegt.

Für eine kurze Frage reicht der Chat. Sobald du eine Antwort aufheben oder ans Team schicken willst, lohnt sich der dritte Weg.

Weg 1: Diagramme mit Claude erstellen direkt im Chat

Claude zeichnet im normalen Chat inzwischen selbst, wenn eine Grafik etwas besser erklärt als Text. Anthropic nennt das benutzerdefinierte Visualisierungen, sie basieren auf HTML und erscheinen direkt in der Antwort (Claude-Hilfe, Stand 22. April 2026). Du musst dafür nichts einschalten, denn Claude entscheidet anhand deiner Frage, ob ein Diagramm hilft. Du kannst es aber auch gezielt verlangen, zum Beispiel mit dem Satz „Zeig mir das als Ablaufdiagramm". Laut Hilfeseite liefert das Modell Opus dabei die besten Ergebnisse.

Die Funktion ist noch in der Beta-Phase. Sie läuft im Web und in der Desktop-App, aber nicht in den Apps für iPhone und Android. Gespeichert wird die Grafik nicht automatisch. Du kopierst sie als Bild, lädst sie als SVG- oder HTML-Datei herunter oder machst daraus ein Artefakt. Für eine Frage zwischendurch ist das der bequemste Weg, für ein Thema, das du nächste Woche noch brauchst, eher nicht.

Weg 2: Diagramme mit Claude erstellen über Mermaid-Code

Mermaid ist eine einfache Beschreibungssprache für Diagramme. Statt zu zeichnen, schreibt Claude ein paar Zeilen Code, und ein Editor macht daraus das Bild. Du bittest Claude also: „Schreib mir den Ablauf als Mermaid-Flussdiagramm." Den Code kopierst du in den kostenlosen Mermaid Live Editor, und dort siehst du sofort das fertige Diagramm.

Der große Vorteil ist, dass Mermaid an vielen Stellen von allein dargestellt wird. GitHub zeigt Mermaid-Diagramme zum Beispiel direkt in Markdown-Dateien an (GitHub-Dokumentation). Für Dokumentation, Wikis und Readme-Dateien ist das deshalb der sauberste Weg. Der Nachteil ist, dass du immer nur ein einzelnes Diagramm bekommst und es selbst in eine Seite einbauen musst.

Weg 3: Diagramme mit Claude erstellen in Claude Code mit Answer me with HTML

Der dritte Weg ist der aus meinem Reel, und er geht am weitesten. Answer me with HTML ist ein kostenloser Skill für Claude Code, der unter github.com/QingYunA/answer-me-with-html liegt und unter der MIT-Lizenz steht. Ein Skill ist eine Fähigkeit, die du Claude einmal beibringst und die er ab dann von selbst nutzt. Das Repo hat auf GitHub rund 3.500 Sterne, Stand 16. Oktober 2026.

Statt eines Textblocks schreibt Claude einen kurzen Entwurf, und das mitgelieferte Werkzeug baut daraus eine fertige Seite. Auf der Seite stehen je nach Frage ein Ablaufdiagramm, eine Tabelle, ein Zeitstrahl, eine Baumstruktur, Diagramme mit Zahlen oder Hinweiskästen. Jede Seite ist eine einzige HTML-Datei ohne Verweise ins Internet. Sie geht also auch offline auf und lässt sich einfach ans Team weiterschicken. Gespeichert werden die Seiten laut Anleitung im Ordner ~/.answer-me-with-html/pages/.

Weil Claude nur den Entwurf schreibt und nicht das ganze HTML, geht das schneller als von Hand. Laut dem Benchmark des Entwicklers braucht das Modell rund ein Achtel der Tokens und ist etwa 2,6-mal so schnell, 12 statt 31 Sekunden (README des Repos). Tokens sind die Textbausteine, nach denen KI-Anbieter abrechnen. Das ist ein eigener Test des Entwicklers mit drei Themen und je drei Durchläufen, keine unabhängige Messung.

Du stellst deine Fragen wie immer, und Claude entscheidet selbst, wann sich eine Seite lohnt. Einfache Fragen beantwortet er weiter ganz normal im Chat, damit du keine Zeit verlierst.

Ich baue meine Reels mit einer ganzen Kette aus KI-Werkzeugen, vom Skript über den Avatar bis zum Guide und zur Auslieferung. Wenn ich Claude frage, wie zwei Stationen dieser Kette zusammenhängen, bekomme ich als Text eine Erklärung, die ich zweimal lesen muss. Als Ablaufdiagramm sehe ich auf einen Blick, an welcher Station etwas hängt, und genau das spart mir am Ende die meiste Zeit.

Diagramme mit Claude erstellen: den Skill in 4 Schritten einrichten

Schritt 1: Node.js prüfen

Der Skill braucht Node.js ab Version 20, das ist die Laufzeitumgebung, mit der das Werkzeug im Hintergrund arbeitet. Du gibst im Terminal node -v ein und siehst die installierte Version. Steht dort eine kleinere Zahl oder kommt eine Fehlermeldung, installierst du die aktuelle LTS-Version von nodejs.org.

Schritt 2: Den Marketplace hinzufügen

In Claude Code gibst du diesen Befehl ein:

/plugin marketplace add QingYunA/answer-me-with-html

Damit kennt Claude Code die Quelle, aus der der Skill kommt.

Schritt 3: Den Skill installieren

Direkt danach installierst du den Skill mit diesem Befehl:

/plugin install answer-me-with-html@answer-me-with-html

Fordert Claude Code dich zu einem Neustart auf, startest du es einmal neu.

Schritt 4: Mit einer echten Frage testen

Stell eine Frage, die mehr als einen Satz Antwort braucht, zum Beispiel wie euer Kunden-Onboarding Schritt für Schritt abläuft. Claude baut dir daraus eine Seite und sagt dir, wo sie liegt. Willst du ganz sicher eine Seite, schreibst du einfach „als HTML" dazu.

🔥 Du willst die Befehle und Prompts nicht abtippen? Im Guide Claude antwortet ab jetzt als Grafik statt als Textblock stehen alle Schritte zum Kopieren, dazu ein Prompt für deine erste Seite und einer für ein Erklärvideo. → Guide holen

Mit welchen Prompts du Diagramme mit Claude erstellen lässt, die wirklich helfen

Ein Diagramm ist nur so gut wie die Frage dahinter. Die meisten schlechten Grafiken entstehen, weil im Prompt nicht steht, was eigentlich gezeigt werden soll. Drei Dinge machen den Unterschied.

Erstens nennst du das Format, das du willst. Ein Ablauf gehört in ein Diagramm, Optionen gehören in eine Tabelle, und alles mit Terminen gehört auf einen Zeitstrahl. Zweitens lässt du die Stellen markieren, an denen es in der Praxis am häufigsten hakt. Drittens verlangst du kurze Texte, denn ein Diagramm mit Absätzen in jedem Kasten ist nur ein zerschnittener Textblock.

So sieht ein Prompt aus, der alle drei Punkte enthält:

Erklär mir unseren Bestellprozess vom ersten Kontakt bis zur Rechnung als HTML-Seite.
Zeig den Ablauf als Diagramm und stell die Zuständigkeiten in einer Tabelle gegenüber.
Ordne alles Zeitliche auf einem Zeitstrahl an und markiere die zwei Stellen, an denen am häufigsten etwas schiefgeht.
Halte die Texte kurz.

Den kompletten Prompt mit allen fünf Anweisungen findest du im Guide, dazu einen zweiten für ein Erklärvideo.

Wo Diagramme mit Claude erstellen an Grenzen stößt

Erklärvideos baut der Skill nur, wenn du ausdrücklich danach fragst. Sie sind im Stil der bekannten 3Blue1Brown-Erklärvideos gehalten, mit animierten Formen und einer Sprecherzeile pro Abschnitt. Für den Export als MP4 brauchst du das kostenlose Programm ffmpeg, ohne geht es als WebM-Datei.

Im Plan-Modus von Claude Code entstehen keine Seiten, weil Claude dort nur plant. Den Dauerbetrieb, bei dem jede Antwort eine Seite bekommt, kannst du einschalten, aber dann sammeln sich schnell viele Dateien an. Aufräumen kannst du mit dem Befehl am clean. Updates holt sich der Skill nicht von selbst, du bittest Claude darum, sobald eine neue Version gemeldet wird.

Die wichtigste Grenze liegt aber bei dir. Ein schönes Diagramm wirkt überzeugender als ein Textblock, auch wenn derselbe Fehler drinsteckt. Prüf deshalb vor allem Zahlen und Zuständigkeiten, bevor du eine Seite ans Team schickst.

🔥 Bereit, deine nächste Frage als Grafik zu bekommen? Im Guide Claude antwortet ab jetzt als Grafik statt als Textblock steht der komplette Ablauf aus diesem Beitrag, vom Repo-Link bis zum fertigen Prompt. → Guide holen

Über Ruwen Bädorf

Ich bin Ruwen Bädorf und ich baue Systeme, die mit KI von allein arbeiten. Ich helfe Selbstständigen, ihre Arbeit einmal zu bauen statt jeden Tag zu wiederholen.

• Ich baue und betreibe die komplette Reel-Fabrik auf ki-imperium.com selbst: Skript, Avatar, Guide, Funnel, Auslieferung.
• Ich arbeite täglich mit Claude, Lovable und Higgsfield und zeige genau die Abläufe, die ich selbst fahre.
• Auf Instagram veröffentliche ich die Abläufe als Reels, mit Guide zum Nachbauen.

→ Folg mir auf Instagram

Weiterlesen

Wenn du tiefer einsteigen willst, passen diese Beiträge dazu. Was Skills überhaupt sind und wie du sie einsetzt, steht in Claude Skills nutzen. Welche Skills sich außerdem lohnen, zeige ich in Beste Claude Skills. Und wie Plugins in Claude Code funktionieren, liest du in Claude Code Plugins.

Diagramme mit Claude erstellen ist damit keine Bastelei mehr, sondern eine Frage, die du ganz normal stellst.