Mermaid-diagrammen van je agents,
getekend, niet als code weergegeven
Vraag Claude Code of Codex om een diagram en hij schrijft Mermaid: een tekstblok dat een terminal alleen maar kan weergeven. AgentsRoom tekent het overal waar je leest wat een agent schreef, en houdt de code één klik verderop.
De gespreksweergave, Markdown-bestanden, plannen in Planreview, notities, Project Memory en backlogtickets: elk mermaid-codeblok wordt zijn diagram, in het lichte of donkere thema van de app, op macOS, Windows en Linux. Niets te installeren, geen vaardigheid, geen MCP-server.
```mermaid
flowchart LR
A[Login] --> B{Token valid?}
B -->|yes| C[Dashboard]
B -->|no| A
```Hetzelfde mermaid-blok, zoals een terminal het weergeeft en zoals AgentsRoom het tekent.
Vraag Claude Code hoe een request door je app reist, of laat Codex de tabellen van een migratie schetsen, en je krijgt vaak een codeblok dat begint met mermaid: een stroomdiagram, een sequentiediagram of een entity-relationshipdiagram, als tekst geschreven. Een terminal kan het alleen weergeven zoals het is, dus lees je pijlen van streepjes en teken je de vakken in je hoofd.
AgentsRoom leest dezelfde Markdown en tekent het diagram. Het blok wordt zijn diagram zodra het in beeld scrollt, een knop Code tonen bij hover haalt de bron terug, en Diagram tonen keert terug naar de tekening. Maakte de agent een syntaxfout, dan blijft de code in beeld met één regel die zegt dat het diagram niet getekend kon worden: je verliest nooit wat hij schreef.
De tekening hangt niet af van de CLI: het is de Markdown-lezer van de app die tekent, op basis van de tekst. Een diagram in een README van Codex, in een plan van Claude Code of in een ticket van welke andere agent ook wordt op dezelfde manier getekend.
Wat er verandert als je een agent leest
Eén regel overal waar de app Markdown toont: een mermaid-blok wordt als zijn diagram getoond.
Overal waar je een agent leest
De gespreksweergave, Markdown-bestanden in de bestandsweergave en in bestandstabbladen, plannen in Planreview, notities, notities in Project Memory, backlogtickets en hun opmerkingen, en de antwoorden van Tussendoor vragen.
Getekend terwijl de agent schrijft
Een agent schrijft een diagram regel voor regel. AgentsRoom wacht tot de tekst even stilstaat voordat het tekent, en houdt intussen het laatste geldige diagram in beeld, zodat het blok niet heen en weer flikkert tussen code en tekening.
De bron één klik verderop
Ga met de muis over een diagram en klik op Code tonen om de Mermaid-tekst te lezen waar het uit komt, en daarna op Diagram tonen om terug te gaan. De bron wordt nooit vervangen, alleen anders getoond.
Een kapot diagram blijft leesbaar
Als Mermaid het blok niet kan parsen, blijft de code in beeld met één regel eronder: Dit diagram kon niet worden getekend: in plaats daarvan wordt de code getoond. Je kunt het zoals het is teruggeven aan de agent.
Elk diagram van Mermaid 11
Stroomdiagrammen, sequentie-, klasse-, toestands- en entity-relationshipdiagrammen, Gantt-diagrammen, mindmaps, git-grafen: alles wat Mermaid 11 kan tekenen, tekent AgentsRoom.
Niets getekend buiten beeld
Een diagram wordt pas opgemaakt als het in de buurt van het scherm komt, één tegelijk, en het resultaat wordt bewaard. Een lang gesprek vol diagrammen kost niets voor de diagrammen waar je nog niet naartoe gescrold bent.
Hoe gebruik je het
Niets aan te zetten. Vier stappen van de vraag naar het diagram.
- 1
Vraag om een diagram
Vraag het een willekeurige agent in gewone woorden: teken de inlogflow als Mermaid-stroomdiagram, of toon deze API-aanroep als sequentiediagram. Mermaid noemen is meestal genoeg om de agent met een mermaid-blok te laten antwoorden.
- 2
Lees het in de gespreksweergave
Zet het paneel van de agent om naar de gespreksweergave: het blok verschijnt als diagram in het antwoord van de agent. De terminal eronder verandert niet en toont nog steeds de tekst.
- 3
Of open het bestand dat hij schreef
Als de agent het diagram in een Markdown-bestand zet (een README, een architectuurnotitie, een plan), open het via de bestandslink in zijn antwoord, via het tabblad Bestanden van het rechterpaneel of met Archief > Open bestand (Cmd O op macOS, Ctrl O op Windows en Linux): de bestandsweergave en het bestandstabblad tekenen elk diagram erin.
- 4
Controleer de bron
Ga met de muis over het diagram en klik op Code tonen om de Mermaid-tekst te lezen of te kopiëren, en daarna op Diagram tonen om terug te gaan naar de tekening.
Wat een terminal, GitHub en Mermaid-vaardigheden al doen
Claude Code en Codex CLI draaien in een terminal, en een terminal toont tekens, geen tekeningen: een mermaid-blok verschijnt daar als bron. Dat is geen ontbrekende instelling in de CLI, zo werkt een terminal nu eenmaal.
Daarom zoeken mensen een Mermaid-vaardigheid (skill), -plugin of -MCP-server voor Claude Code. Die helpen de agent een geldig diagram te schrijven of het als afbeelding te exporteren. Om het diagram te lezen, plak je de code nog steeds ergens waar het getekend wordt: GitHub tekent mermaid-blokken in Markdown-bestanden en opmerkingen, mermaid.live tekent alles wat je erin plakt, en de Markdown-preview van een editor doet het met een Mermaid-extensie.
AgentsRoom vervangt die tools niet. Het haalt het kopiëren en plakken weg als je de agent toch al leest: het diagram wordt getekend in het gesprek, het plan of het bestand dat je al naast de agent open hebt.
Beperkingen
- De ruwe terminal van een agent toont nog steeds de bron: het tekenen gebeurt in de gespreksweergave en in de Markdown-lezers, niet in het raster van de terminal.
- De gespreksweergave bestaat voor de CLI's waarvan AgentsRoom het transcript kan lezen: Claude Code, Codex, Grok Build, Mistral Vibe, oh-my-pi, Pi en Antigravity CLI. Bij de andere open je het Markdown-bestand dat de agent schreef.
- Diagrammen gebruiken de thema's dark en neutral van Mermaid, afgestemd op het lichte of donkere thema van de app. Ze nemen je accentkleur niet over.
- Een link in een diagram opent alleen een http- of https-adres, net als een Markdown-link. Een link naar een lokaal bestand doet niets.
- Labels zijn platte tekst: HTML en scripts in een diagram worden verwijderd, en een configuratieregel in het diagram kan dat niet veranderen.
- Er is geen exportknop: om een diagram als PNG- of SVG-bestand te bewaren, vraag je de agent het te exporteren met de opdrachtregeltool van Mermaid.
Veelgestelde vragen
Kan Claude Code Mermaid-diagrammen weergeven?
Niet in de terminal. Claude Code schrijft een Mermaid-diagram als codeblok, en een terminal kan het alleen als tekst weergeven. Start dezelfde agent in AgentsRoom en zet zijn paneel om naar de gespreksweergave: het blok wordt als diagram getekend in het antwoord, en een knop Code tonen haalt de bron terug.
Hoe bekijk ik een Mermaid-diagram dat een agent in een Markdown-bestand schreef?
Open het bestand in AgentsRoom: klik op de bestandslink in het antwoord van de agent, kies het in het tabblad Bestanden van het rechterpaneel of gebruik Archief > Open bestand (Cmd O op macOS, Ctrl O op Windows en Linux). De Markdown-preview, en het bestandstabblad als je het als tabblad opent, tekenen elk mermaid-blok van het bestand.
Werkt het met Codex en andere agent-CLI's?
Ja. Het diagram wordt getekend door de Markdown-lezer van de app, op basis van de tekst, welke CLI het ook schreef: een diagram van Codex, Claude Code of een andere agent wordt op dezelfde manier getekend in bestanden, plannen, notities en tickets. De gespreksweergave, waarin antwoorden getekend worden zodra ze binnenkomen, ondersteunt Claude Code, Codex, Grok Build, Mistral Vibe, oh-my-pi, Pi en Antigravity CLI.
Heb ik een Mermaid-vaardigheid of een MCP-server nodig?
Niet om de diagrammen te lezen. Een vaardigheid of een MCP-server kan een agent helpen geldige Mermaid te schrijven of het als afbeelding te exporteren. AgentsRoom tekent alleen wat al geschreven is, dus de twee werken samen: de vaardigheid verbetert het diagram, AgentsRoom toont het.
Welke diagramtypen worden getekend, en wat als de syntax fout is?
Alles wat Mermaid 11 tekent: stroomdiagrammen, sequentie-, klasse-, toestands- en entity-relationshipdiagrammen, Gantt-diagrammen, mindmaps, git-grafen en de rest van zijn catalogus. Een blok dat Mermaid niet kan parsen, blijft code, met één regel eronder die zegt dat het diagram niet getekend kon worden. Vraag de agent het te verbeteren: zijn verbeterde blok wordt getekend.
Je vindt dit misschien ook leuk
Gespreksweergave
Een chatweergave voor Claude Code, Codex en vijf andere agent-CLI's: de sessie gelezen uit het eigen transcript van de CLI, toolaanroepen ingeklapt, antwoorden live, op desktop en telefoon.
Planreview
Je agent stelt een plan voor: lees het als document, becommentarieer, vervang of verwijder elke gewenste passage, en keur het daarna goed of stuur het in één bericht terug. Elke versie blijft bewaard.
Project Memory
Geef je AI-coderingsagenten een langetermijngeheugen. Beslissingen, architectuur en valkuilen blijven bestaan over sessies heen en worden gedeeld met iedereen op het project. Gratis, onbeperkt.
Tussendoor vragen
Stel een drukke AI-codeeragent een vraag zonder hem te onderbreken. Een alleen-lezen kopie van zijn gesprek antwoordt in een bubbel met tabbladen terwijl zijn terminal doorwerkt. Claude Code, Codex, Grok, GitHub Copilot CLI, OpenCode, Mistral Vibe, Antigravity CLI en Kimi Code, vanaf de desktop of je telefoon.
Lees de diagrammen van je agents als diagrammen
Download AgentsRoom voor macOS, Windows of Linux, vraag een agent om een Mermaid-diagram en zet zijn paneel om naar de gespreksweergave.
Companion-app: houd je agents onderweg in de gaten
Breng je eigen: Claude, Codex, Antigravity CLI of andere AI-provider.
Stuur bugs en verzoeken direct naar je openbare backlog.