KI

Künstliches Scheitern: Technische Diagramme mit KI-Tools zeichnen

Unser Buch Coding mit KI wird gerade übersetzt. Heute musste ich diverse Fragen zur Übersetzung beantworten und habe bei der Gelegenheit ein paar Beispiele aus unserem Buch mit aktuellen Versionen von ChatGPT und Claude noch einmal ausprobiert. Dabei ging es um die Frage, ob KI-Tools technische Diagramme (z.B. UML-Diagramme) zeichnen können. Die Ergebnisse sind niederschmetternd, aber durchaus unterhaltsam :-)

UML-Diagramme

Vor einem halben Jahr habe ich ChatGPT gebeten, zu zwei einfachen Java-Klassen ein UML-Diagram zu zeichnen. Das Ergebnis sah so aus (inklusive der falschen Einrückungen):

+-------------------------+
|         Main            |
+-------------------------+
| + main(args: String[]): void |
| + initializeQuestionPool(): List<Question> |
+-------------------------+

+-------------------------+
|        Question         |
+-------------------------+
| - text: String          |
| - answers: List<Answer> |
| - correctAnswers: List<Answer> |
+-------------------------+
| + Question(text: String, answers: List<Answer>, 
|            correctAnswers: List<Answer>) |
| + askQuestion(): void   |
| - validateAnswer(userInput: String): boolean |
+-------------------------+

Dabei war ChatGPT schon damals in der Lage, PlantUML- oder Mermaid-Code zu liefern. Der Prompt Please generate PlantUML code instead liefert brauchbaren Code, der dann in https://www.planttext.com/ visualisiert werden kann. Das sieht dann so aus:

Der Screenshot zeigt den PlantText UML Editor im Browser mit einem Klassendiagramm. Links steht der von ChatGPT generierte PlantUML-Code mit den Klassen „Main“, „Question“ und „Answer“ samt Attributen und Methoden. Rechts visualisiert PlantText daraus das UML-Diagramm inklusive Beziehungen: „Main“ nutzt „Question“ und „Question“ enthält mehrere „Answer“. Oben sind Navigations- und Exportoptionen sichtbar.
ChatGPT lieferte den Code für das UML-Diagramm, planttext.com visualisiert ihn

Heute habe ich das ganze Beispiel noch einmal ausprobiert. Ich habe also den Java-Code für zwei Klassen an ChatGPT übergeben und um ein UML-Diagramm gebeten. Vorbei sind die ASCII-Zeiten. Das Ergebnis sieht jetzt so aus:

Das Bild zeigt ein chaotisch wirkendes, handgezeichnetes UML‑ähnliches Diagramm zu „Answer/Answers“-Objekten. In mehreren Kästen stehen Bezeichner wie „Answer“, „Answers“ und „Text: String“, verbunden durch Pfeile, Rauten und gestrichelte Linien. In der Mitte dominiert ein großer „Answer“-Block mit Listen- und Korrektheitsangaben. Rechts tauchen Begriffe wie „Correct Answers“ und „Validate“ auf, insgesamt mit vielen Tippfehlern.
ChatGPT nennt diesen von DALL-E produzierten Irrsinn ein »UML-Diagramm«
Der Screenshot zeigt eine Chat-Antwort mit einer UML-Beschreibung zu zwei Java-Klassen. Aufgelistet sind die Klassen **Answer** und **Question** inklusive Attribute, Konstruktoren und Methoden wie `askQuestion()` und `validateAnswer()`. Außerdem wird die Beziehung erklärt: **Question** enthält per Komposition eine `List<Answer>`. Unten ist ein generiertes, skizzenhaftes UML-Klassendiagramm eingebettet. Bildunterschrift: „Etwas mehr Kontext zum obigen Diagramm“.
Etwas mehr Kontext zum obigen Diagramm

Leider kann ich hier keinen Link zum ganzen Chat-Verlauf angeben, weil ChatGPT anscheinend nur reine Text-Chat-Verläufe teilen kann.

Visualisierung eines Docker-Setups

Beispiel zwei ergibt sich aus zwei Prompts:

Prompt: I want to build a REST application using Python and Django. The application will run in a Docker container. Do I need a proxy server in this case to make my application visible to the internet?

Prompt: Can you visualize the setup in a diagram?

In der Vergangenheit (Mitte 2024) lieferte ChatGPT das Diagramm als ASCII-Art.

+---------------------------+
|      Client Browser       |
+-----------+---------------+
            |
            v
+-----------+---------------+
|       Nginx Reverse Proxy |
|  (Handles SSL, Load       |
|   Balancing, etc.)        |
+-----------+---------------+
            |
            v
+-----------+----------------+
| Docker Container Network   |
|                            |
|  +----------+   +---------+|
|  |  Web     |   |  DB     ||
|  | Container|   |Container||
|  +----------+   +---------+|
|   (Django)       (Postgres)|
+----------------------------+

Erst auf die explizite Bitte liefert es auch Mermaid-Code, der dann unter https://mermaid.live/ gezeichnet werden kann.

Heute (Dez. 2024) gibt sich ChatGPT nicht mehr mit ASCII-Art ab sondern leitet den Diagrammwunsch an DALL-E weiter. Das Ergebnis ist eine Katastrophe.

Das Bild zeigt eine stilisierte Diagramm‑Grafik, die ein Docker‑Setup für eine Webanwendung visualisieren soll. In der Mitte steht ein Server‑Stack, verbunden über orange Leitungen mit Komponenten wie NGINX, Django und PostgreSQL. Mehrere zylindrische „Container“ sind beschriftet, dazu Icons für REST/HTTPS und „SSL Termination“. Viele Labels wirken jedoch fehlerhaft oder kryptisch, was die Darstellung unklar macht.
ChatGPT’s jämmerlicher Versuch, ein einfaches Docker-Setup zu visualisieren

Auch Claude.ai zeichnet selbstbewusst ein Diagramm des Docker-Setups. Dabei wird intern Mermaid verwendet.

Das Bild zeigt ein Architekturdiagramm, das ein Production-Setup einem Development-Setup für eine Django-Webanwendung gegenüberstellt. Links führt der Internetzugriff über Port 80/443 zu einem Nginx-Container, der Anfragen an den Django-Container (Port 8000) weiterleitet und statische Dateien direkt aus einem Volume ausliefert. Der Django-Container greift zudem auf einen Datenbank-Container zu. Rechts wird in der Entwicklung die Django-App direkt über Port 8000 (Gunicorn/Dev Server) erreicht.
Claude leidet offensichtlich unter bedrohlichen Farbstörungen, aber inhaltlich ist das Ergebnis besser als bei ChatGPT
Der Screenshot zeigt einen Chat mit Claude zu „Exposing a Django App in Docker to the Internet“ samt Diagramm-Vorschau. Links wird der Unterschied zwischen Development- und Production-Setup erklärt, inklusive Stichpunkten zu Gunicorn, Nginx, Docker-Netzwerk, Datenbank-Container und Static-Files-Volume. Rechts ist eine Mermaid-Grafik eingeblendet, die zwei Kästen für Production und Development mit Ports (80/443 bzw. 8000) und Komponenten visualisiert.
Hier der relevante Teil des Chat-Verlaufs mit Claude

Fazit

Die Diagramme haben durchaus einen hohen Unterhaltungswert. Aber offensichtlich wird es noch ein wenig dauern, bis KI-Tools brauchbare technische Diagramme zeichnen können. Der Ansatz von Claude wirkt dabei erfolgsversprechender. Technische Diagramme mit DALL-E zu erstellen wollen ist doch eine sehr gewagte Idee von OpenAI.

Die besten Ergebnisse erzielen Sie weiterhin, wenn Sie ChatGPT, Claude oder das KI-Tool Ihrer Wahl explizit um Code in PlantUML oder Mermaid bitten. Den Code können Sie dann selbst visualisieren und bei Bedarf auch weiter optimieren.