AgentsRoom Mermaid diagrams: the flowchart your AI coding agent writes as text, drawn in one click
Filmed in the real app: a Claude Code agent is asked for the checkout flow of a small shop and answers with a Mermaid flowchart, which its terminal can only print as brackets, dashes and arrows. One click on Conversation, at the top of the agent's pane, and the same answer shows the diagram drawn as boxes and arrows. Show code brings back the Mermaid text, Show diagram the drawing. The agent then saves the diagram in a Markdown file: opened from the Files tab, its preview draws it too.
Read the full feature pageTranscript
Your agent writes diagrams as text arrows. AgentsRoom draws them. This is AgentsRoom, the desktop app where your AI coding agents work side by side.
Here, we ask a Claude Code agent to draw the checkout flow of a small shop. It reads the code, then answers with a Mermaid flowchart: boxes and arrows, written as plain text. In a terminal, that is all you get.
Brackets, dashes and arrows to decode in your head. In AgentsRoom, click Conversation, at the top of the agent's pane. The same answer now shows the diagram itself: real boxes and arrows you read at a glance, in the theme of the app.
Hover it, and Show code brings back the Mermaid text, to read or copy. Show diagram, and the drawing is back. Now the agent saves the diagram in a Markdown file of the project.
Open it from the Files tab of the side panel. The Markdown preview draws it too. Flowcharts, sequence diagrams, database schemas: whatever Mermaid can draw, with nothing to install.
Mermaid diagrams are in AgentsRoom, for Claude Code, Codex and the other coding agents. The link is in the description.