Діаграми Mermaid від ваших агентів,
намальовані, а не виведені кодом
Попросіть Claude Code або Codex зробити діаграму, і він напише Mermaid: блок тексту, який термінал може лише вивести як є. AgentsRoom малює його всюди, де ви читаєте написане агентом, і тримає код за один клік.
Вигляд переписки, файли Markdown, плани в Рев'ю плану, нотатки, Project Memory і тікети беклогу: кожен блок коду 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-переглядач застосунку, за текстом. Діаграма в README, написаному Codex, у плані, написаному Claude Code, чи в тікеті, написаному будь-яким іншим агентом, малюється однаково.
Що змінюється, коли ви читаєте агента
Одне правило всюди, де застосунок показує Markdown: блок mermaid показується як діаграма.
Усюди, де ви читаєте агента
Вигляд переписки, файли Markdown у попередньому перегляді файлів і у вкладках файлів, плани в Рев'ю плану, нотатки, нотатки Project Memory, тікети беклогу та коментарі до них, а також відповіді «Запитати, не перериваючи».
Малюється, поки агент пише
Агент пише діаграму рядок за рядком. Перш ніж малювати, AgentsRoom чекає, поки текст на мить перестане змінюватися, а тим часом тримає на екрані останню коректну діаграму, тож блок не блимає між кодом і малюнком.
Вихідний код за один клік
Наведіть курсор на діаграму й натисніть Показати код, щоб прочитати текст Mermaid, з якого вона походить, потім Показати діаграму, щоб повернутися. Вихідний код ніколи не замінюється, він лише показується по-іншому.
Зламана діаграма залишається читабельною
Коли Mermaid не може розібрати блок, код залишається на екрані з одним рядком під ним: Не вдалося намалювати цю діаграму: замість неї показано її код. Його можна повернути агентові як є.
Усі діаграми Mermaid 11
Блок-схеми, діаграми послідовності, класів, станів і «сутність-зв'язок», діаграми Ганта, ментальні карти, графи git: усе, що вміє малювати Mermaid 11, малює AgentsRoom.
Нічого не малюється за межами екрана
Діаграма будується, лише коли наближається до екрана, по одній за раз, і результат зберігається. Довга переписка, повна діаграм, нічого не коштує для тих, до яких ви ще не прокрутили.
Як цим користуватися
Нічого не треба вмикати. Чотири кроки від запитання до діаграми.
- 1
Попросіть діаграму
У будь-якому агенті попросіть простими словами: намалюй процес входу як блок-схему Mermaid або покажи цей виклик API як діаграму послідовності. Зазвичай достатньо сказати Mermaid, щоб агент відповів блоком mermaid.
- 2
Читайте її у вигляді переписки
Перемкніть панель агента у вигляд переписки: блок з'явиться як діаграма всередині відповіді агента. Термінал під ним не змінюється й далі показує текст.
- 3
Або відкрийте файл, який він написав
Коли агент кладе діаграму у файл Markdown (README, нотатку про архітектуру, план), відкрийте його за посиланням на файл у його відповіді, із вкладки Файли правої панелі або через Файл > Відкрити файл (Cmd O на macOS, Ctrl O на Windows і Linux): попередній перегляд і вкладка файлу малюють усі діаграми в ньому.
- 4
Перевірте вихідний код
Наведіть курсор на діаграму й натисніть Показати код, щоб прочитати або скопіювати текст Mermaid, потім Показати діаграму, щоб повернутися до малюнка.
Що вже роблять термінал, GitHub і навички Mermaid
Claude Code і Codex CLI працюють у терміналі, а термінал виводить символи, а не малюнки: блок mermaid показується як вихідний код. Це не відсутнє налаштування CLI, така природа термінала.
Тому люди шукають навичку, плагін або MCP-сервер Mermaid для Claude Code. Вони допомагають агентові написати коректну діаграму або експортувати її у файл зображення. Щоб прочитати діаграму, все одно доводиться вставляти її код туди, де її намалюють: GitHub малює блоки mermaid у файлах Markdown і коментарях, mermaid.live малює все, що в нього вставили, а попередній перегляд Markdown у редакторі робить це з розширенням Mermaid.
AgentsRoom не замінює ці інструменти. Він прибирає копіювання й вставлення, коли ви й так читаєте агента: діаграма малюється в переписці, у плані або у файлі, який у вас уже відкритий поруч з агентом.
Обмеження
- Сирий термінал агента й далі показує вихідний код: малювання відбувається у вигляді переписки та в Markdown-переглядачах, а не всередині сітки термінала.
- Вигляд переписки є для CLI, чиї транскрипти AgentsRoom уміє читати: Claude Code, Codex, Grok Build, Mistral Vibe, oh-my-pi, Pi і Antigravity CLI. З іншими відкрийте файл Markdown, який написав агент.
- Діаграми використовують теми dark і neutral з Mermaid, підібрані під світлу чи темну тему застосунку. Вашого акцентного кольору вони не беруть.
- Посилання всередині діаграми відкриває лише адресу http або https, як посилання в Markdown. Посилання на локальний файл нічого не робить.
- Підписи залишаються простим текстом: HTML і скрипти всередині діаграми видаляються, і рядок конфігурації, написаний у діаграмі, не може цього змінити.
- Кнопки експорту немає: щоб зберегти діаграму як файл PNG або SVG, попросіть агента експортувати її за допомогою інструмента командного рядка Mermaid.
Часті запитання
Чи вміє Claude Code відображати діаграми Mermaid?
Не в терміналі. Claude Code пише діаграму Mermaid як блок коду, а термінал може вивести її лише текстом. Запустіть того самого агента в AgentsRoom і перемкніть його панель у вигляд переписки: блок малюється як діаграма всередині відповіді, а кнопка Показати код повертає вихідний код.
Як переглянути діаграму Mermaid, яку агент написав у файлі Markdown?
Відкрийте файл в AgentsRoom: натисніть на посилання на файл у відповіді агента, виберіть його у вкладці Файли правої панелі або скористайтеся Файл > Відкрити файл (Cmd O на macOS, Ctrl O на Windows і Linux). Попередній перегляд Markdown, а також вкладка файлу, якщо відкрити його у вкладці, малюють кожен блок mermaid із файлу.
Чи працює це з Codex та іншими CLI агентів?
Так. Діаграму малює Markdown-переглядач застосунку за текстом, хай який CLI її написав, тож діаграма від 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, виклики інструментів згорнуті, відповіді в реальному часі, на комп'ютері й на телефоні.
Рев'ю плану
Ваш агент пропонує план: прочитайте його як документ, прокоментуйте, замініть або видаліть будь-який фрагмент, а потім схваліть план або поверніть його одним повідомленням. Кожна версія зберігається.
Project Memory
Надайте вашим AI агентам з кодування довготривалу пам'ять. Рішення, архітектура та підводні камені зберігаються між сесіями і діляться з усіма в проекті. Безкоштовно, без обмежень.
Запитати, не перериваючи
Поставте запитання зайнятому AI-агенту для коду, не перериваючи його. Копія його розмови лише для читання відповідає в бульбашці з вкладками, а його термінал працює далі. Claude Code, Codex, Grok, GitHub Copilot CLI, OpenCode, Mistral Vibe, Antigravity CLI і Kimi Code, з комп'ютера або з телефона.
Читайте діаграми ваших агентів як діаграми
Завантажте AgentsRoom для macOS, Windows або Linux, попросіть агента намалювати діаграму Mermaid і перемкніть його панель у вигляд переписки.
Додаток-компаньйон: контролюйте своїх агентів на ходу
Використовуйте свого: Claude, Codex, Antigravity CLI або іншого AI-провайдера.
Надсилайте баги та запити прямо у свій публічний беклог.