Диаграммы 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
Дайте вашим ИИ-кодирующим агентам долгосрочную память. Решения, архитектура и подводные камни сохраняются между сессиями и доступны всем участникам проекта. Бесплатно, без ограничений.
Спросить, не прерывая
Задайте вопрос занятому ИИ-агенту для кода, не прерывая его. Копия его диалога только для чтения отвечает в пузыре с вкладками, а его терминал продолжает работу. Claude Code, Codex, Grok, GitHub Copilot CLI, OpenCode, Mistral Vibe, Antigravity CLI и Kimi Code, с компьютера или с телефона.
Читайте диаграммы ваших агентов как диаграммы
Скачайте AgentsRoom для macOS, Windows или Linux, попросите агента нарисовать диаграмму Mermaid и переключите его панель в вид переписки.
Приложение-компаньон: следите за агентами на ходу
Используйте Claude, Codex, Antigravity CLI или другого поставщика AI.
Отправляйте баги и запросы прямо в ваш публичный бэклог.