Платная AI-генерация диаграмм Mermaid: интеграция в Django и Next.js

Платные AI-функции всё активнее проникают в веб-проекты, и генерация диаграмм — одно из перспективных направлений. Один из разработчиков на Habr поделился опытом внедрения генерации диаграмм Mermaid с помощью языковой модели в проект на Django и Next.js. Mermaid — это текстовый формат для описания диаграмм: в строках задаются тип схемы, узлы и связи, на выходе получается SVG. Такой подход удобен для API и базы данных, так как код можно сгенерировать, проверить, сохранить, открыть повторно и отрендерить на клиенте. В этой статье разберём технические детали, проблемы и перспективы подобной интеграции.

Как устроена генерация диаграмм через AI

В проекте собран полный серверный и клиентский контур. Пользователь через интерфейс запрашивает диаграмму, описывая её текстом. Запрос уходит к языковой модели, которая возвращает код Mermaid. Затем код очищается от лишних элементов — fenced-блоков, Markdown, строк с , служебного текста — и проверяется на валидность. Если первая строка не является валидной головой Mermaid (например, graph TD или sequenceDiagram), сервер возвращает ошибку 503. После успешной проверки диаграмма рендерится на клиенте с помощью библиотеки Mermaid.

Какие типы диаграмм Mermaid поддерживаются?

Mermaid поддерживает множество типов диаграмм: блок-схемы (graph), диаграммы последовательностей (sequenceDiagram), диаграммы Ганта (gantt), круговые диаграммы (pie), диаграммы классов (classDiagram) и другие. В текущей реализации проверяется, что первая строка ответа модели соответствует одному из этих типов. Если модель возвращает невалидную голову, например, просто текст или код на другом языке, сервер отклоняет запрос. Это гарантирует, что пользователь получит только рабочий код.

Предыстория и контекст

Mermaid давно используется для встраивания диаграмм в документацию и веб-приложения. Однако генерация диаграмм через AI — относительно новое направление. Языковые модели, такие как GPT, способны создавать код Mermaid по текстовому описанию, но их ответы часто содержат лишний текст, который нужно отфильтровывать. Разработчик столкнулся с этой проблемой: без проверки запрос завершался успешно, ответ от модели приходил, но диаграмма не строилась из-за наличия fenced-блоков, Markdown и других артефактов.

Как извлекать Mermaid-код из ответа модели

Ответ сначала режется до fenced-блока (если он есть). Затем проверяется первая строка: она должна соответствовать одному из типов диаграмм Mermaid. Если условие не выполняется, возвращается 503. Такой подход гарантирует, что пользователь получит только валидный код. Очистка включает удаление всех строк до первой строки диаграммы и последующего Markdown.

Технические детали реализации

На серверной стороне (Django) добавлена проверка в mermind/views.py: если ответ модели не начинается с валидной головы Mermaid, возвращается 503. Очистка ответа включает удаление всех строк до первой строки диаграммы и последующего Markdown. На клиенте (Next.js) используется библиотека mermaid для рендеринга SVG. После генерации пользователь может повторно открыть код и отредактировать его вручную. Код сохраняется в базе данных, что позволяет переиспользовать диаграммы.

Как обрабатывать ошибки генерации?

Ошибки могут возникать на разных этапах: модель может вернуть невалидный код, сервер может не справиться с нагрузкой, или клиент может некорректно отрендерить диаграмму. В текущей реализации ошибка 503 возвращается при невалидной голове. В будущем планируется добавить более детальную обработку: например, повторную попытку запроса к модели с другим промптом или уведомление пользователя о необходимости уточнить описание.

Кого затронет и как

Разработчики, которые хотят добавить платные AI-функции в свои проекты, могут взять за основу этот подход. Особенно актуально для SaaS-продуктов, где генерация диаграмм востребована — например, в инструментах для проектирования архитектуры, документирования API или создания презентаций. В русскоязычном сообществе подобные реализации встречаются редко, поэтому опыт может быть полезен. Если вы создаёте сервис для визуализации данных или автоматизации документирования, эта интеграция может стать вашим конкурентным преимуществом.

Что будет дальше

Разработчик планирует улучшить обработку ошибок, добавить поддержку большего числа типов диаграмм и, возможно, интегрировать оплату через Stripe. В перспективе такие AI-функции могут стать стандартным дополнением к веб-приложениям, особенно в нише визуализации данных. Также рассматривается возможность кэширования результатов и добавления пользовательских шаблонов.

Итог

Интеграция Mermaid с AI — это пример того, как можно добавить ценную платную функцию в веб-проект с минимальными затратами. Главное — правильно обрабатывать ответ модели, чтобы гарантировать валидность результата. Следите за развитием этой темы: вероятно, скоро появятся готовые библиотеки и сервисы для подобных задач. Если вы хотите внедрить AI-генерацию диаграмм в свой проект, начните с прототипа на Django и Next.js, используя описанные принципы валидации и очистки кода.