Mermaid-Diagramme deiner Agenten,
gezeichnet, nicht als Code ausgegeben
Bitte Claude Code oder Codex um ein Diagramm, und es schreibt Mermaid: einen Textblock, den ein Terminal nur ausgeben kann. AgentsRoom zeichnet ihn überall dort, wo du liest, was ein Agent geschrieben hat, und hält den Code einen Klick entfernt.
Die Konversationsansicht, Markdown-Dateien, Pläne im Plan-Review, Notizen, das Projektgedächtnis und Backlog-Tickets: Jeder mermaid-Codeblock wird zu seinem Diagramm, im hellen oder dunklen Theme der App, auf macOS, Windows und Linux. Nichts zu installieren, kein Skill, kein MCP-Server.
```mermaid
flowchart LR
A[Login] --> B{Token valid?}
B -->|yes| C[Dashboard]
B -->|no| A
```Derselbe mermaid-Block, so wie ein Terminal ihn ausgibt und so wie AgentsRoom ihn zeichnet.
Frag Claude Code, wie eine Anfrage durch deine App läuft, oder lass Codex die Tabellen einer Migration skizzieren, und oft bekommst du einen Codeblock, der mit mermaid beginnt: ein Flussdiagramm, ein Sequenzdiagramm oder ein Entity-Relationship-Diagramm, als Text geschrieben. Ein Terminal kann ihn nur ausgeben, also liest du Pfeile aus Bindestrichen und zeichnest die Kästen im Kopf.
AgentsRoom liest dasselbe Markdown und zeichnet es. Der Block wird zu seinem Diagramm, sobald er ins Bild scrollt, ein Button Code anzeigen beim Überfahren holt den Quelltext zurück, und Diagramm anzeigen kehrt zur Zeichnung zurück. Hat der Agent einen Syntaxfehler gemacht, bleibt der Code sichtbar, mit einer Zeile, die sagt, dass das Diagramm nicht gezeichnet werden konnte: Du verlierst nie, was er geschrieben hat.
Die Zeichnung hängt nicht von der CLI ab: Sie entsteht im Markdown-Reader der App, aus dem Text. Ein Diagramm in einem README von Codex, in einem Plan von Claude Code oder in einem Ticket eines beliebigen anderen Agenten wird genauso gezeichnet.
Was sich ändert, wenn du einen Agenten liest
Eine Regel überall, wo die App Markdown zeigt: Ein mermaid-Block wird als sein Diagramm angezeigt.
Überall, wo du einen Agenten liest
Die Konversationsansicht, Markdown-Dateien in der Dateivorschau und in Datei-Tabs, Pläne im Plan-Review, Notizen, Notizen im Projektgedächtnis, Backlog-Tickets und ihre Kommentare und die Antworten von Nebenbei fragen.
Gezeichnet, während der Agent schreibt
Ein Agent schreibt ein Diagramm Zeile für Zeile. AgentsRoom wartet, bis der Text einen Moment stillsteht, bevor es zeichnet, und lässt solange das letzte gültige Diagramm stehen, damit der Block nicht zwischen Code und Zeichnung flackert.
Der Quelltext einen Klick entfernt
Fahr über ein Diagramm und klick auf Code anzeigen, um den Mermaid-Text zu lesen, aus dem es stammt, dann auf Diagramm anzeigen, um zurückzukehren. Der Quelltext wird nie ersetzt, nur anders angezeigt.
Ein fehlerhaftes Diagramm bleibt lesbar
Wenn Mermaid den Block nicht parsen kann, bleibt der Code sichtbar, mit einer Zeile darunter: Dieses Diagramm konnte nicht gezeichnet werden: Stattdessen wird sein Code angezeigt. Du kannst ihn so, wie er ist, an den Agenten zurückgeben.
Jedes Diagramm von Mermaid 11
Flussdiagramme, Sequenz-, Klassen-, Zustands- und Entity-Relationship-Diagramme, Gantt-Diagramme, Mindmaps, Git-Graphen: Was Mermaid 11 zeichnen kann, zeichnet AgentsRoom.
Nichts wird außerhalb des Bildschirms gezeichnet
Ein Diagramm wird erst gelayoutet, wenn es in die Nähe des Bildschirms kommt, eins nach dem anderen, und das Ergebnis wird behalten. Eine lange Konversation voller Diagramme kostet nichts für die, zu denen du noch nicht gescrollt hast.
So nutzt du es
Nichts einzuschalten. Vier Schritte von der Frage zum Diagramm.
- 1
Bitte um ein Diagramm
Frag einen beliebigen Agenten in einfachen Worten: Zeichne den Login-Ablauf als Mermaid-Flussdiagramm, oder zeig diesen API-Aufruf als Sequenzdiagramm. Mermaid zu sagen reicht meist, damit der Agent mit einem mermaid-Block antwortet.
- 2
Lies es in der Konversationsansicht
Schalte das Panel des Agenten auf die Konversationsansicht um: Der Block erscheint als Diagramm in der Antwort des Agenten. Das Terminal darunter ändert sich nicht und zeigt weiter den Text.
- 3
Oder öffne die Datei, die er geschrieben hat
Wenn der Agent das Diagramm in eine Markdown-Datei schreibt (ein README, eine Architekturnotiz, einen Plan), öffne sie über den Dateilink in seiner Antwort, über den Tab Dateien im rechten Panel oder mit Datei > Datei öffnen (Cmd O auf macOS, Ctrl O auf Windows und Linux): Die Vorschau und der Datei-Tab zeichnen jedes Diagramm darin.
- 4
Prüf den Quelltext
Fahr über das Diagramm und klick auf Code anzeigen, um den Mermaid-Text zu lesen oder zu kopieren, dann auf Diagramm anzeigen, um zur Zeichnung zurückzukehren.
Was ein Terminal, GitHub und Mermaid-Skills schon können
Claude Code und Codex CLI laufen in einem Terminal, und ein Terminal gibt Zeichen aus, keine Zeichnungen: Ein mermaid-Block erscheint dort als Quelltext. Das ist keine fehlende Einstellung der CLI, so funktioniert ein Terminal.
Deshalb suchen viele nach einem Mermaid-Skill, -Plugin oder -MCP-Server für Claude Code. Die helfen dem Agenten, ein gültiges Diagramm zu schreiben oder es als Bild zu exportieren. Um das Diagramm zu lesen, fügst du seinen Code trotzdem irgendwo ein, wo es gezeichnet wird: GitHub zeichnet mermaid-Blöcke in Markdown-Dateien und Kommentaren, mermaid.live zeichnet alles, was du einfügst, und die Markdown-Vorschau eines Editors schafft es mit einer Mermaid-Erweiterung.
AgentsRoom ersetzt diese Tools nicht. Es spart dir das Kopieren und Einfügen, wenn du den Agenten sowieso liest: Das Diagramm wird in der Konversation, im Plan oder in der Datei gezeichnet, die du neben dem Agenten schon offen hast.
Grenzen
- Das rohe Terminal eines Agenten zeigt weiter den Quelltext: Gezeichnet wird in der Konversationsansicht und in den Markdown-Readern, nicht im Raster des Terminals.
- Die Konversationsansicht gibt es für die CLIs, deren Transkript AgentsRoom lesen kann: Claude Code, Codex, Grok Build, Mistral Vibe, oh-my-pi, Pi und Antigravity CLI. Bei den anderen öffnest du die Markdown-Datei, die der Agent geschrieben hat.
- Diagramme nutzen die Themes dark und neutral von Mermaid, passend zum hellen oder dunklen Theme der App. Deine Akzentfarbe übernehmen sie nicht.
- Ein Link in einem Diagramm öffnet nur eine http- oder https-Adresse, wie ein Markdown-Link. Ein Link auf eine lokale Datei tut nichts.
- Beschriftungen sind reiner Text: HTML und Skripte in einem Diagramm werden entfernt, und eine Konfigurationszeile im Diagramm kann daran nichts ändern.
- Es gibt keinen Export-Button: Um ein Diagramm als PNG- oder SVG-Datei zu behalten, bitte den Agenten, es mit dem Kommandozeilen-Tool von Mermaid zu exportieren.
Häufig gestellte Fragen
Kann Claude Code Mermaid-Diagramme rendern?
Nicht im Terminal. Claude Code schreibt ein Mermaid-Diagramm als Codeblock, und ein Terminal kann ihn nur als Text ausgeben. Starte denselben Agenten in AgentsRoom und schalte sein Panel auf die Konversationsansicht um: Der Block wird in der Antwort als Diagramm gezeichnet, und ein Button Code anzeigen holt den Quelltext zurück.
Wie sehe ich mir ein Mermaid-Diagramm an, das ein Agent in eine Markdown-Datei geschrieben hat?
Öffne die Datei in AgentsRoom: Klick auf den Dateilink in der Antwort des Agenten, wähle sie im Tab Dateien des rechten Panels aus oder nutze Datei > Datei öffnen (Cmd O auf macOS, Ctrl O auf Windows und Linux). Die Markdown-Vorschau, und der Datei-Tab, wenn du sie als Tab öffnest, zeichnen jeden mermaid-Block der Datei.
Funktioniert das mit Codex und anderen Agenten-CLIs?
Ja. Das Diagramm wird vom Markdown-Reader der App aus dem Text gezeichnet, egal welche CLI es geschrieben hat: Ein Diagramm von Codex, Claude Code oder einem anderen Agenten wird in Dateien, Plänen, Notizen und Tickets genauso gezeichnet. Die Konversationsansicht, in der Antworten beim Eintreffen gezeichnet werden, deckt Claude Code, Codex, Grok Build, Mistral Vibe, oh-my-pi, Pi und Antigravity CLI ab.
Brauche ich einen Mermaid-Skill oder einen MCP-Server?
Nicht, um die Diagramme zu lesen. Ein Skill oder ein MCP-Server kann einem Agenten helfen, gültiges Mermaid zu schreiben oder es als Bild zu exportieren. AgentsRoom zeichnet nur, was schon geschrieben ist, also ergänzen sich beide: Der Skill verbessert das Diagramm, AgentsRoom zeigt es.
Welche Diagrammtypen werden gezeichnet, und was, wenn die Syntax falsch ist?
Alles, was Mermaid 11 zeichnet: Flussdiagramme, Sequenz-, Klassen-, Zustands- und Entity-Relationship-Diagramme, Gantt-Diagramme, Mindmaps, Git-Graphen und den Rest seines Katalogs. Ein Block, den Mermaid nicht parsen kann, bleibt Code, mit einer Zeile darunter, die sagt, dass das Diagramm nicht gezeichnet werden konnte. Bitte den Agenten, ihn zu korrigieren: Sein korrigierter Block wird gezeichnet.
Das könnte dir auch gefallen
Konversationsansicht
Eine Chat-Ansicht für Claude Code, Codex und fünf weitere Agenten-CLIs: die Sitzung, gelesen aus dem eigenen Transkript der CLI, Tool-Aufrufe eingeklappt, Antworten live, auf Desktop und Handy.
Plan-Review
Dein Agent schlägt einen Plan vor: Lies ihn als Dokument, kommentiere, ersetze oder lösche jede Stelle, dann genehmige ihn oder schick ihn in einer Nachricht zurück. Jede Version bleibt erhalten.
Projektgedächtnis
Gib deinen KI-Coding-Agenten ein langfristiges Gedächtnis. Entscheidungen, Architektur und Fallstricke bleiben über Sitzungen hinweg bestehen und werden mit allen im Projekt geteilt. Kostenlos, unbegrenzt.
Nebenbei fragen
Stelle einem beschäftigten KI-Coding-Agenten eine Frage, ohne ihn zu unterbrechen. Eine nur lesende Kopie seines Gesprächs antwortet in einer Blase mit Tabs, während sein Terminal weiterarbeitet. Claude Code, Codex, Grok, GitHub Copilot CLI, OpenCode, Mistral Vibe, Antigravity CLI und Kimi Code, vom Desktop oder vom Handy aus.
Lies die Diagramme deiner Agenten als Diagramme
Lade AgentsRoom für macOS, Windows oder Linux herunter, bitte einen Agenten um ein Mermaid-Diagramm und schalte sein Panel auf die Konversationsansicht um.
Companion-App: Agenten auch unterwegs im Blick behalten
Nutze Claude, Codex, Antigravity CLI oder einen anderen KI-Anbieter.
Bugs und Wünsche direkt in dein öffentliches Backlog schicken.