All posts

Графики прямо в сообщении: Chart.js, D3 и Mermaid вместо markdown

СА

Сам Решу

Сам Решу

За последние пару лет агентов научили писать код, лазить в API, поднимать sandbox-окружения и составлять контракты. И при этом на запрос «покажи график» они до сих пор отдают тебе markdown-список.

Почему markdown стал дефолтом — и почему это пора менять

Markdown оказался удобным компромиссом для LLM-вывода. Универсальный формат, парсится любым клиентом, текст можно редактировать руками. Для текстового ответа этого достаточно.

Для визуализации данных — нет. Когда пользователь просит «динамику выручки по месяцам», markdown-таблица или ASCII-bar — это эквивалент того, как если бы дизайнер прислал эскиз словами: «в правом верхнем углу синий квадрат, под ним два жёлтых прямоугольника». Технически данные на месте, восприятия — ноль.

Альтернатива «прислать ссылку на BI / выгрузить CSV / сгенерировать файл» работает, но рвёт диалог: чат → ссылка → новая вкладка → дашборд → возврат → следующий вопрос. Контекст теряется на каждом шаге.

В 2026 году отдавать markdown-таблицу на запрос про график — это всё равно что печатать графики на матричном принтере.

Что увидит пользователь

В Сам Решу мы решили эту задачу узко: агент рисует настоящие графики и диаграммы прямо в сообщении. Не файл, не ссылку, не вложение. Рендер живёт в том же сообщении, где агент отвечает тебе текстом.

  • Спросил «динамика выручки по месяцам» — получил bar-чарт.
  • Попросил «как выглядит наш sales-процесс» — получил Mermaid-флоучарт.
  • Сказал «собери мини-дашборд по KPI» — получил карточки с SVG-графиками.

График и текст-комментарий идут одним блоком — глазами пробегаешь объяснение, тут же видишь, что нарисовалось.

Что под капотом

Под капотом — Chart.js, D3, Mermaid и inline SVG в sandbox-iframe.

Sandbox-iframe — ключевая деталь. Любой код визуализации, который генерирует агент, выполняется в изолированном окружении: без доступа к родительскому DOM, без сетевых вызовов наружу, без cookies и localStorage основной страницы. Для пользователя это значит, что агентский график не может случайно (или нарочно) сломать остальной интерфейс.

Внутри iframe агент сам выбирает инструмент под задачу:

  • Chart.js — bar, line, pie, scatter, doughnut. Базовые статистические графики, где важно быстро и аккуратно.
  • D3 — кастомные визуализации, нестандартные оси, кривые, иерархии. Когда не вписывается в стандартную сетку.
  • Mermaid — флоучарты, sequence-диаграммы, gantt, ER-схемы. Всё, что про процессы и связи.
  • Inline SVG — для уникальных схем, которые проще нарисовать руками.

Выбор инструмента — ответственность агента. Он смотрит на запрос («покажи распределение» vs «опиши процесс» vs «нарисуй схему отношений в БД») и тянет тот рендер, который ляжет естественно.

Сам поток выглядит так:

Между запросом и картинкой — один проход. Никаких промежуточных артефактов, никакого «сейчас сгенерирую файл, ссылку пришлю отдельно».

Follow-up в том же месте

Главное — это не сам факт того, что чарт нарисовался. Главное — что с ним можно работать дальше тем же диалогом.

«Сделай pie вместо bar», «добавь Q4», «перекрась в фирменную палитру» — старый виджет заменяется новым в том же месте. Диалог не разрывается на «вот ссылка → подождите → откройте → вернитесь». Сообщение апдейтится, история переписки сохраняет контекст: какие данные, какой график, какие правки запросил пользователь.

Это меняет ощущение от продукта. График перестаёт быть «артефактом», который один раз сгенерировался и живёт где-то в файлах. Он становится живой частью разговора, такой же мутабельной, как и сам текст.

Где это меняет рабочий ритуал

Самый заметный эффект — на регулярных операционных встречах. Планёрка по продажам, недельный отчёт по складу, разбор инцидента, ретроспектива спринта. Везде, где раньше нужно было заранее подготовить выгрузку в Excel или PowerPoint, теперь хватает одного диалога с агентом.

Аналитик задаёт серию уточняющих вопросов вживую: «покажи воронку», «срез по регионам», «выкини отмены», «давай сравним с прошлым месяцем». Каждое уточнение — новый график на месте старого. Презентации перестают быть документом, который собирают за день до встречи. Они становятся живым исследованием в моменте.

То же самое — для разовых задач. Постмортем по инциденту: «нарисуй timeline по логам», «покажи RPS в момент падения», «сделай Mermaid с цепочкой вызовов» — три графика в одном чате, без переключения между Grafana, доками и Excel.

Что попробовать

Самый простой способ почувствовать разницу — попросить у агента визуализацию того, что обычно тащишь руками в Excel.

  • «Покажи динамику выручки по месяцам за последние полгода»
  • «Нарисуй наш sales-процесс от лида до закрытия»
  • «Собери мини-дашборд по основным KPI отдела продаж»
  • «Сравни конверсию по каналам в виде столбчатой диаграммы»

Если запрос сформулирован конкретно — есть данные, есть метрика, есть период — агент подберёт подходящий тип графика и нарисует его прямо в чате. Если данных не хватает — спросит, чего именно недостаёт.

И главное — после первой попытки можно итерировать. Поменять тип графика, добавить срез, перекрасить, объединить два чарта в дашборд. В одном диалоге, без выгрузок и переключений.