代理写的 Mermaid 图表，
直接画出来，而不是输出成代码
让 Claude Code 或 Codex 画一张图，它会写出 Mermaid：一段终端只能原样输出的文本。AgentsRoom 在您阅读代理所写内容的任何地方把它画出来，代码也只需一键即可查看。
对话视图、Markdown 文件、计划审查中的计划、笔记、项目记忆和待办工单：每个 mermaid 代码块都会变成图表，跟随应用的浅色或深色主题，在 macOS、Windows 和 Linux 上都可用。无需安装任何东西，不需要技能，也不需要 MCP 服务器。
```mermaid
flowchart LR
A[Login] --> B{Token valid?}
B -->|yes| C[Dashboard]
B -->|no| A
```同一个 mermaid 代码块：终端输出的样子，和 AgentsRoom 画出的样子。
问 Claude Code 一个请求如何在您的应用中流转，或者让 Codex 勾勒一次迁移涉及的表，您常常会收到一个以 mermaid 开头的代码块：流程图、时序图或实体关系图，都是以文本写成的。终端只能原样输出它，于是您只能读着用短横线拼成的箭头，在脑子里把方框画出来。
AgentsRoom 读取同样的 Markdown，并把它画出来。代码块滚动进入视野时就会变成图表，悬停时出现的“显示代码”按钮可以调出源码，“显示图表”则回到图形。如果代理写出了语法错误，代码会留在屏幕上，并附一行说明图表无法绘制，所以您永远不会丢失它写的内容。
绘制不依赖于 CLI：它由应用的 Markdown 阅读器根据文本完成。Codex 写在 README 里的图表、Claude Code 写在计划里的图表，或者其他任何代理写在工单里的图表，都以同样的方式绘制。
阅读代理时有什么不同
应用中所有显示 Markdown 的地方都遵循同一条规则：mermaid 代码块以图表形式显示。
在您阅读代理的每个地方
对话视图、文件预览和文件标签页中的 Markdown 文件、计划审查中的计划、笔记、项目记忆笔记、待办工单及其评论，以及“私下提问”的回答。
代理边写边画
代理是一行一行地写图表的。AgentsRoom 会等文本稳定片刻再绘制，同时把上一个有效的图表保留在屏幕上，所以代码块不会在代码和图形之间闪烁。
源码一键可见
悬停在图表上并点击“显示代码”，即可阅读生成它的 Mermaid 文本，再点击“显示图表”返回。源码从不会被替换，只是换一种方式显示。
出错的图表依然可读
当 Mermaid 无法解析代码块时，代码会留在屏幕上，下方附一行“无法绘制此图表：已改为显示其代码。”您可以原样把它交还给代理。
Mermaid 11 的所有图表
流程图、时序图、类图、状态图、实体关系图、甘特图、思维导图、Git 图：Mermaid 11 能画的，AgentsRoom 都能画。
屏幕外的不绘制
图表只有在接近屏幕时才会布局，一次一个，结果会被保留。一段满是图表的长对话，对于您还没滚动到的图表不产生任何开销。
如何使用
无需开启任何设置。从提问到图表，只需四步。
- 1
请求一张图表
对任意代理用平常的话提出：把登录流程画成 Mermaid 流程图，或者把这个 API 调用展示成时序图。通常只要提到 Mermaid，代理就会用 mermaid 代码块回答。
- 2
在对话视图中阅读
把代理的面板切换到对话视图：代码块会以图表形式出现在代理的回答中。下面的终端不会改变，仍然显示文本。
- 3
或者打开它写的文件
当代理把图表放进 Markdown 文件（README、架构说明、计划）时，可以通过它回答中的文件链接、右侧面板的“文件”标签页，或者 文件 > 打开文件（macOS 上按 Cmd O，Windows 和 Linux 上按 Ctrl O）打开：预览和文件标签页会绘制其中的每一张图表。
- 4
检查源码
悬停在图表上并点击“显示代码”来阅读或复制 Mermaid 文本，再点击“显示图表”回到图形。
终端、GitHub 和 Mermaid 技能已经能做什么
Claude Code 和 Codex CLI 运行在终端里，而终端输出的是字符，不是图形：mermaid 代码块显示为源码。这不是 CLI 少了某个设置，终端本来就是这样。
所以人们会去找 Claude Code 的 Mermaid 技能、插件或 MCP 服务器。它们帮助代理写出有效的图表，或把它导出为图片文件。但要阅读图表，您仍然得把代码粘贴到能绘制它的地方：GitHub 会绘制 Markdown 文件和评论中的 mermaid 代码块，mermaid.live 会绘制您粘贴的任何内容，编辑器的 Markdown 预览则借助 Mermaid 扩展来绘制。
AgentsRoom 并不取代这些工具。它省掉的是您本来就在阅读代理时的复制粘贴：图表直接画在对话、计划或您已经在代理旁边打开的文件里。
限制
- 代理的原始终端仍然显示源码：绘制发生在对话视图和 Markdown 阅读器中，而不是在终端网格里。
- 对话视图适用于 AgentsRoom 能读取其会话记录的 CLI：Claude Code、Codex、Grok Build、Mistral Vibe、oh-my-pi、Pi 和 Antigravity CLI。使用其他 CLI 时，请打开代理写的 Markdown 文件。
- 图表使用 Mermaid 的 dark 和 neutral 主题，与应用的浅色或深色主题相匹配。它们不会采用您的强调色。
- 图表中的链接只会打开 http 或 https 地址，和 Markdown 链接一样。指向本地文件的链接不会有任何反应。
- 标签都是纯文本：图表中的 HTML 和脚本会被移除，图表里写的配置行也无法改变这一点。
- 没有导出按钮：如果想把图表保存为 PNG 或 SVG 文件，请让代理用 Mermaid 的命令行工具导出。
常见问题
Claude Code 能渲染 Mermaid 图表吗？
在终端里不能。Claude Code 把 Mermaid 图表写成代码块，终端只能把它作为文本输出。在 AgentsRoom 中运行同一个代理，并把它的面板切换到对话视图：代码块会在回答中被画成图表，“显示代码”按钮可以调出源码。
如何预览代理写在 Markdown 文件中的 Mermaid 图表？
在 AgentsRoom 中打开该文件：点击代理回答中的文件链接，在右侧面板的“文件”标签页中选择它，或者使用 文件 > 打开文件（macOS 上按 Cmd O，Windows 和 Linux 上按 Ctrl O）。Markdown 预览，以及以标签页打开时的文件标签页，会绘制文件中的每个 mermaid 代码块。
它支持 Codex 和其他代理 CLI 吗？
支持。无论是哪个 CLI 写的，图表都由应用的 Markdown 阅读器根据文本绘制，所以来自 Codex、Claude Code 或其他任何代理的图表，在文件、计划、笔记和工单中都以同样方式绘制。对话视图会在回答到达时就把它们画出来，支持 Claude Code、Codex、Grok Build、Mistral Vibe、oh-my-pi、Pi 和 Antigravity CLI。
我需要 Mermaid 技能或 MCP 服务器吗？
阅读图表不需要。技能或 MCP 服务器可以帮助代理写出有效的 Mermaid，或把它导出为图片。AgentsRoom 只负责绘制已经写好的内容，所以两者可以配合使用：技能让图表更好，AgentsRoom 把它展示出来。
会绘制哪些图表类型？语法错误怎么办？
Mermaid 11 能绘制的一切：流程图、时序图、类图、状态图、实体关系图、甘特图、思维导图、Git 图，以及它目录中的其余类型。Mermaid 无法解析的代码块会保持为代码，下方附一行说明图表无法绘制。让代理修正它：修正后的代码块就会被绘制出来。
您可能还喜欢
对话视图
面向 Claude Code、Codex 及另外五个代理 CLI 的聊天视图：会话读自 CLI 自己的会话记录，工具调用折叠，回答实时显示，桌面和手机都能用。
计划审查
你的代理提出计划后，像读文档一样读它，对任意段落评论、替换或删除，再用一条消息批准或退回。每个版本都会保留。
项目记忆
为您的 AI 编码代理提供长期记忆。决策、架构和陷阱在会话之间持续存在，并与项目中的每个人共享。免费，无限制。
私下提问
向正在忙的 AI 编程代理提问，而不打断它。它对话的一份只读副本在带标签页的气泡里回答，终端照常工作。支持 Claude Code、Codex、Grok、GitHub Copilot CLI、OpenCode、Mistral Vibe、Antigravity CLI 和 Kimi Code，电脑和手机上都能用。
把代理的图表当图表来读
下载适用于 macOS、Windows 或 Linux 的 AgentsRoom，让代理画一张 Mermaid 图表，并把它的面板切换到对话视图。
配套应用：随时随地监控你的 Agent
使用 Claude、Codex、Antigravity CLI 或其他 AI 提供商。
把 Bug 和需求直接发送到您的公开待办清单。