Диаграммы без копирования: как это работает
Сколько раз вы просили нейросеть нарисовать блок-схему или граф зависимостей, получали код на Mermaid — и начинали танцевать с бубном: копировать, вставлять в онлайн-редактор, смотреть на сырой текст? Знакомо. Разработчики llama.cpp решили, что хватит этого цирка. В официальном WebUI появилась встроенная поддержка Mermaid-диаграмм с живым превью. Теперь локальная LLM может не только болтать, но и рисовать. И это не просто рендеринг — диаграммы интерактивны: их можно приближать, перетаскивать узлы и экспортировать в PNG.
Фича родилась из пулл-реквеста, который добавил обработку блоков ```mermaid прямо в чат-интерфейс. Никаких внешних плагинов — только встроенный рендерер и немного магии JavaScript.
Зачем это нужно? Затем, что архитекторы, продакт-менеджеры и даже обычные пользователи (которые хотят наглядно объяснить свою идею) больше не привязаны к облачным сервисам. Всё локально, приватно — и прямо в диалоге с агентом. Кстати, раньше для тех же целей советовали рисовать через HTML — но это было костылём. Теперь — нативная поддержка.
Как это выглядит в деле
Допустим, вы обсуждаете архитектуру микросервисов. Достаточно попросить: «Нарисуй диаграмму последовательности запросов между Gateway, Auth и Payment». LLM генерирует Mermaid-код, UI подхватывает его и мгновенно отрисовывает блок-схему. Можно тыкнуть на любой элемент — он подсветится, а рядом появится панель с сырым кодом для правок. Хотите изменить цвет узла или добавить стрелку? Правите код — превью обновляется в реальном времени. Это вам не статичные картинки из ChatGPT.
1 Короткий пример промпта
Пользователь пишет: «Покажи схему CI/CD пайплайна». Модель возвращает блок:
graph TD
A[Код] --> B[Сборка]
B --> C{Тесты}
C -->|OK| D[Деплой]
C -->|Fail| A
UI превращает этот код в красивую диаграмму. Можно сразу экспортировать. Никаких лишних шагов.
Важный нюанс: модель должна уметь генерировать правильный Mermaid-синтаксис. Большинство современных локальных LLM (Qwen 3.5, LLaMA 3.2) справляются, но для сложных диаграмм может потребоваться подсказка в system prompt. Вот тут рассказано, как настроить шаблон для правильного вывода.
Сравнение с альтернативами
Рынок визуализации от AI не стоит на месте. У нас уже есть Inline Visualizer — он рисует интерактивные графики (линейные, столбчатые). Но Mermaid — это отдельная история: блок-схемы, графы, таймлайны, Gantt. Inline Visualizer не умеет такое. Есть и плагины для text-generation-webui, но они требуют установки и часто отваливаются при обновлении. Встроенная фича llama.cpp не имеет этих проблем: она часть ядра WebUI, поддерживается официальной командой.
| Критерий | Встроенные Mermaid в llama.cpp | Inline Visualizer | Плагины text-generation-webui |
|---|---|---|---|
| Тип визуализации | Блок-схемы, графы, Gantt, timeline (Mermaid) | Графики (линии, столбцы, pie) | Разное, но часто Mermaid |
| Интерактивность | Приближение, перетаскивание, редактирование кода с live preview | Только статика | Зависит от плагина |
| Установка | Встроено в WebUI (включено по умолчанию) | Отдельная зависимость | Требуется ручная установка |
| Приватность | Полностью локально | Локально | Локально |
Ещё один альтернативный подход — рисовать диаграммы через HTML (например, SVG). Это гибко, но требует от модели умения генерировать сложный HTML, что не все умеют. Mermaid проще для LLM: синтаксис компактный, модель проще обучить. И рендеринг встроенный — не нужно встраивать iframe.
Кому эта фича упростит жизнь
- Разработчикам и архитекторам — обсуждать микросервисы, базы данных, CI/CD, не отвлекаясь на внешние инструменты. Можно прямо в чате попросить LLM построить граф зависимостей или последовательность вызовов.
- Продакт-менеджерам и аналитикам — визуализировать user flow, roadmaps (Gantt), схемы бизнес-процессов. Всё локально, не нужно отключать sensitive data.
- Энтузиастам локальных AI — тем, кто гоняет llama.cpp через менеджер шаблонов или собирает свой мобильный клиент. Теперь и визуализация под боком.
- Преподавателям — объяснять алгоритмы, архитектуры, используя сгенерированные моделью диаграммы.
Кстати, если вы столкнулись с багами в чате (например, повторная обработка промптов), перед обновлением до версии с Mermaid стоит сначала разобраться с ними. Но фича уже стабильна на бранче master — так что смело апдейтьте.
Что дальше? Представьте: вы дискутируете с LLM о плане релиза, она рисует Gantt-диаграмму, вы двигаете столбики мышкой, и на основе изменений она предлагает новый тайминг. Пока это не реализовано — только статическое превью. Но направление понятно: чат с AI превращается в визуальную студию. И llama.cpp — один из первых, кто сделал Mermaid-рендеринг из коробки.
Лучше один раз попробовать: скачайте свежий билд с GitHub, запустите WebUI, попросите нейросеть нарисовать граф зависимостей вашего проекта — и увидите, как код превращается в диаграмму за секунду. А если хотите сравнить с другими подходами — гляньте Inline Visualizer или Lemonade, который тоже умеет рисовать, но через свой API. Впрочем, для быстрых схем Mermaid в llama.cc теперь — выбор по умолчанию.
