エージェントの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で始まるコードブロックが返ってくることがよくあります。フローチャート、シーケンス図、ER図が、テキストで書かれています。ターミナルはそれを文字として出力するしかないので、ハイフンでできた矢印を読み、ボックスは頭の中で描くことになります。
AgentsRoomは同じMarkdownを読み、それを描画します。ブロックは画面に入ってくると図に変わり、カーソルを合わせると現れる「コードを表示」ボタンでソースに戻り、「図を表示」で図に戻ります。エージェントが構文エラーをした場合は、図を描画できなかったことを伝える1行とともにコードがそのまま表示されるので、エージェントが書いたものが失われることはありません。
描画はCLIに依存しません。テキストをもとに、アプリのMarkdownリーダーが行います。Codexが書いたREADMEの図も、Claude Codeが書いたプランの図も、ほかのどのエージェントが書いたチケットの図も、同じように描画されます。
エージェントを読むときに変わること
アプリがMarkdownを表示するすべての場所で、ルールは1つ：mermaidブロックは図として表示されます。
エージェントを読むすべての場所で
会話ビュー、ファイルプレビューとファイルタブのMarkdownファイル、プランレビューのプラン、ノート、プロジェクトメモリのノート、バックログのチケットとそのコメント、そして「別枠で質問」の回答。
エージェントが書いている間に描画
エージェントは図を1行ずつ書きます。AgentsRoomはテキストが少しの間止まるのを待ってから描画し、その間は最後に有効だった図を画面に残すので、ブロックがコードと図の間でちらつくことはありません。
ソースはワンクリックで
図にカーソルを合わせて「コードを表示」を押すと、元になったMermaidのテキストを読めます。「図を表示」で元に戻ります。ソースが置き換えられることはなく、見せ方が変わるだけです。
壊れた図も読めるまま
Mermaidがブロックを解析できないときは、コードがそのまま表示され、その下に「この図を描画できませんでした。代わりにコードを表示しています。」という1行が出ます。そのままエージェントに返すことができます。
Mermaid 11のすべての図
フローチャート、シーケンス図、クラス図、状態図、ER図、ガントチャート、マインドマップ、Gitグラフ：Mermaid 11が描けるものは、AgentsRoomも描きます。
画面外では何も描画しない
図がレイアウトされるのは画面に近づいたときだけで、1つずつ処理され、結果は保持されます。図がたくさんある長い会話でも、まだスクロールしていない図にはコストがかかりません。
使い方
オンにする設定はありません。質問から図まで4ステップです。
- 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テーマを使い、アプリのライトテーマまたはダークテーマに合わせます。アクセントカラーは反映されません。
- 図の中のリンクが開くのは、Markdownのリンクと同じく、httpまたはhttpsのアドレスだけです。ローカルファイルへのリンクは何もしません。
- ラベルはプレーンテキストです：図の中の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が描画するものすべてです：フローチャート、シーケンス図、クラス図、状態図、ER図、ガントチャート、マインドマップ、Gitグラフ、そのほかカタログにあるもの全部。Mermaidが解析できないブロックはコードのまま残り、その下に図を描画できなかったことを伝える1行が表示されます。エージェントに修正を頼めば、修正されたブロックが描画されます。
こちらもおすすめ
会話ビュー
Claude Code、Codexとほか5つのエージェントCLIのためのチャットビュー：CLI自身のトランスクリプトから読み込んだセッション、折りたたまれたツール呼び出し、リアルタイムの回答を、デスクトップとスマホで。
プランレビュー
エージェントが提案したプランをドキュメントとして読み、どの箇所にもコメント、置き換え、削除ができます。あとは承認するか、1通のメッセージで差し戻すだけ。すべてのバージョンが残ります。
プロジェクトメモリ
あなたのAIコーディングエージェントに長期的なメモリを与えます。意思決定、アーキテクチャ、落とし穴がセッションを超えて持続し、プロジェクトの全員と共有されます。無料、無制限。
別枠で質問
作業中のAIコーディングエージェントに、作業を中断させずに質問できます。会話の読み取り専用コピーがタブ付きのバブルで答え、その間もターミナルは動き続けます。Claude Code、Codex、Grok、GitHub Copilot CLI、OpenCode、Mistral Vibe、Antigravity CLI、Kimi Code に対応し、デスクトップからもスマホからも使えます。
エージェントの図を、図として読む
macOS、Windows、Linux向けのAgentsRoomをダウンロードし、エージェントにMermaid図を頼んで、ペインを会話ビューに切り替えましょう。
コンパニオンアプリ：外出先でもエージェントを確認
Claude、Codex、Antigravity CLI、またはその他の AI プロバイダーを使用します。
バグや要望を公開バックログに直接送信できます。