TL;DR
GenAI-DrawIO-Creator — система, которая генерирует редактируемые диаграммы через промпты к Claude 3.7. Пользователь описывает диаграмму текстом (например, "нарисуй архитектуру с балансировщиком, серверами и базой данных"), модель выдаёт XML-файл для draw.io. Исследователи разработали специальные техники промптинга, чтобы LLM выдавала валидный структурированный вывод без синтаксических ошибок.
LLM часто ломают структурированные форматы: незакрытые теги, невалидный синтаксис, галлюцинированный контент. В исследовании на первую попытку Claude выдавала валидный XML только в 90% случаев — остальные 10% требовали исправлений. Основная причина: в свободной генерации текста модель легко пропускает обязательные атрибуты, путает ID элементов или добавляет лишние объяснения, которые ломают формат.
Решение: специализированный system prompt с чёткими правилами формата и примером корректного XML + self-correction loop — если вывод невалидный, система даёт LLM обратную связь и просит исправить. После одной итерации коррекции точность достигает 100%. Для сложных случаев (например, воссоздание диаграммы из изображения) используется двухэтапная генерация: сначала LLM описывает изображение словами, потом генерирует структуру на основе описания.
Схема метода
ШАГ 1: System prompt → Роль + правила формата + пример XML
ШАГ 2: User prompt → Описание диаграммы
ШАГ 3: Генерация → Claude выдаёт XML
ШАГ 4: Валидация → Если ошибка → self-correction (повтор с feedback)
Все шаги в одной сессии. Коррекция — отдельный запрос с указанием на ошибку.
Пример применения
Универсальность принципа: Хотя исследование про draw.io XML, принципы работают для любого структурированного вывода: JSON конфиги, HTML/CSS, Markdown таблицы. Для пользователя ChatGPT/Claude самое прямое применение — Mermaid диаграммы, которые рендерятся прямо в чате.
Задача: Создать архитектурную диаграмму микросервисной системы для презентации проекта инвестору.
Промпт:
Ты — эксперт по созданию диаграмм в формате Mermaid.
ПРАВИЛА:
- Выводи ТОЛЬКО код Mermaid, без объяснений и лишнего текста
- Используй корректный синтаксис (все стрелки, блоки, связи должны быть валидны)
- Не добавляй комментарии в коде
ПРИМЕР ФОРМАТА:
graph TD
A[Клиент] --> B[API Gateway]
B --> C[Сервис авторизации]
B --> D[Сервис заказов]
ЗАДАЧА:
Нарисуй архитектуру облачной платформы для онлайн-школы:
- Фронтенд (React приложение)
- API Gateway
- Три микросервиса: курсы, платежи, уведомления
- База PostgreSQL
- Очередь сообщений RabbitMQ
- CDN для видео
Покажи связи между компонентами.
Результат:
Модель выдаст валидный Mermaid-код без лишних объяснений. ChatGPT автоматически отрендерит диаграмму визуально. Вы увидите граф с блоками и стрелками. Если синтаксис сломан — скопируйте ошибку и напишите "исправь, ошибка в строке X" — модель поправит через self-correction.
Почему это работает
Слабость LLM: При генерации структурированных форматов (XML, JSON, код) модель легко делает синтаксические ошибки — пропускает закрывающие теги, добавляет текст вне структуры, путает вложенность. Это происходит потому что LLM обучены на естественном языке, где правила гибкие. В коде и разметке одна лишняя буква ломает весь вывод.
Сильная сторона LLM: Модель хорошо следует паттернам из примеров (few-shot learning) и точно выполняет жёсткие constraints ("только X, без Y"), если они явно прописаны.
Как метод использует сильную сторону: System prompt задаёт чёткие рамки ("только Mermaid, без текста") + даёт пример формата → модель видит паттерн и воспроизводит структуру точнее. Если вывод сломан — self-correction loop с конкретной ошибкой ("незакрытый тег в строке 5") направляет модель на исправление. Это как code review: LLM видит свою ошибку в контексте и фиксит.
Рычаги управления промптом:
- Примеры формата — добавь 2-3 few-shot примера вместо одного → ещё выше точность, но больше токенов. Для простых задач один пример достаточен.
- "Без объяснений" — убери эту инструкцию → модель будет комментировать код, полезно для обучения синтаксису, но ломает автоматический парсинг.
- Валидация вручную — если формат сложный (например, специфичный JSON schema), добавь в промпт "проверь себя на ошибки перед выводом" → модель сделает внутреннюю валидацию.
- Двухэтапная генерация — для сложных диаграмм сначала попроси "распиши структуру словами", потом "преобразуй в Mermaid" → точнее, чем генерация в один проход.
Шаблон промпта
Для Mermaid диаграмм (работает в ChatGPT/Claude):
Ты — эксперт по созданию диаграмм в формате {формат: Mermaid/PlantUML/другой}.
ПРАВИЛА:
- Выводи ТОЛЬКО код {формат}, без объяснений и лишнего текста
- Используй корректный синтаксис (все элементы должны быть валидны)
- Не добавляй комментарии в коде
ПРИМЕР ФОРМАТА:
{пример корректной диаграммы в нужном формате}
ЗАДАЧА:
{описание диаграммы: что включить, какие связи, какие метки}
Что подставлять:
- {формат} — Mermaid (для ChatGPT), PlantUML, Graphviz, или другой текстовый формат диаграмм
- {пример корректной диаграммы} — скопируй простую рабочую диаграмму нужного типа (flowchart, sequence, ER-diagram)
- {описание диаграммы} — опиши компоненты, связи, метки; можно списком или текстом
🚀 Быстрый старт — вставь в чат:
Вот шаблон для генерации диаграмм. Адаптируй под мою задачу: [твоя задача].
Задавай уточняющие вопросы, чтобы заполнить поля.
[вставить шаблон выше]
LLM спросит какой тип диаграммы нужен (flowchart, sequence, архитектурная), какие компоненты включить, какие связи показать — потому что без этих деталей невозможно сгенерировать правильную структуру. Она возьмёт паттерн из шаблона (жёсткие правила + пример формата) и адаптирует под твою задачу.
Ограничения
⚠️ Сложность: Диаграммы с 20+ элементами — модель начинает пропускать компоненты или путать связи. Для таких случаев лучше разбить на несколько под-диаграмм.
⚠️ Пространственные отношения: Модель слабо контролирует точное расположение элементов (например, "поставь блок А ровно по центру между Б и В"). Работает для логической структуры, но не для pixel-perfect layout.
⚠️ Специализированные форматы: Для редких синтаксисов (например, кастомные DSL) модель может галлюцинировать несуществующие конструкции, если в обучающих данных таких примеров мало. Нужны подробные few-shot примеры.
⚠️ Self-correction требует контекста: Если диаграмма очень большая и не влезает в контекстное окно вместе с ошибкой — коррекция не сработает. Лимит контекста — реальное ограничение для мега-диаграмм.
Как исследовали
Исследователи создали web-приложение на Next.js с интеграцией Claude 3.7 через Amazon Bedrock и протестировали на 10 задачах — от простых flowcharts до AWS-архитектур с 15 элементами. Проверяли три вещи: валидность синтаксиса XML (проходит ли парсер), семантическую точность (все ли компоненты на месте) и качество layout (5 человек оценивали визуально).
Главная находка: Claude выдавала валидный XML в 90% случаев с первой попытки, остальные 10% сломаны синтаксически — незакрытые теги, неправильные ID. После одной итерации self-correction (система отдаёт ошибку парсера обратно в модель с просьбой исправить) точность достигала 100%. По семантике результат ещё лучше: 94% компонентов правильны с первого раза, после уточнения ("добавь X") — все 100%.
Что удивило: модель почти идеально воспроизводила стиль типовых диаграмм — в AWS-архитектурах правильно использовала иконки для EC2, RDS, S3, в flowcharts ставила ромбы для решений. Видимо, в обучающих данных было много таких схем. Оценка layout — 4.34 из 5, что почти неотличимо от ручной работы.
Инсайт для практики: Self-correction работает очень эффективно для структурированных форматов — достаточно дать модели конкретную ошибку ("строка 12, незакрытый тег"), и она фиксит. Это значит, что в чате ChatGPT можно делать то же самое: если Mermaid-код сломан, просто скопируй ошибку и напиши "исправь". Не нужна автоматическая pipeline — ручной feedback loop работает так же.
Скорость: Среднее время генерации — 7.4 секунды от промпта до готовой диаграммы. Исследователи замерили, что это в 4-5 раз быстрее, чем рисовать диаграмму руками в draw.io. Для простых схем (3-5 элементов) время ещё меньше — 3-4 секунды.
Адаптации и экстраполяции
🔧 Техника: Self-validation → проверка перед выводом
В оригинале система проверяет вывод после генерации через XML-парсер. Но можно сделать self-validation внутри промпта — модель сама проверяет себя перед тем как выдать результат.
ПРАВИЛА:
- Выводи ТОЛЬКО код Mermaid, без объяснений
- ПЕРЕД ВЫВОДОМ: мысленно проверь синтаксис (все стрелки валидны, скобки закрыты)
- Если нашёл ошибку — исправь ДО вывода
Эффект: Снижает число итераций коррекции. Модель делает внутреннюю проверку и сразу выдаёт более чистый результат. Работает как "code review перед commit".
🔧 Техника: Двухэтапная генерация → сложность через декомпозицию
Для очень сложных диаграмм (15+ элементов, много связей):
Шаг 1: Попроси модель составить план словами
Опиши структуру диаграммы:
- Какие основные блоки (перечисли)
- Какие связи между ними (кто с кем соединён)
- Какие метки на стрелках
Шаг 2: Когда план готов → попроси преобразовать в Mermaid
Теперь преобразуй этот план в валидный Mermaid-код.
Следуй правилам из первого промпта.
Эффект: Модель сначала рассуждает о структуре, потом генерирует синтаксис. Это снижает ошибки в сложных диаграммах, потому что на первом шаге модель фокусируется на логике, на втором — на синтаксисе. Принцип Chain-of-Thought для структурированного вывода.
🔧 Техника: Обратный инжиниринг → диаграмма из изображения
В исследовании для воссоздания диаграммы из картинки использовали мультимодальность Claude:
Шаг 1: Загрузи изображение диаграммы → попроси описать словами
Проанализируй эту диаграмму. Перечисли:
- Все блоки и их названия
- Все связи (стрелки) между блоками
- Метки на стрелках
Шаг 2: Используй текстовое описание для генерации Mermaid
Теперь создай Mermaid-диаграмму на основе этого описания.
Применение: У тебя есть скриншот архитектуры из статьи/презентации → хочешь редактируемую версию. Или: нарисовал диаграмму от руки на бумаге, сфоткал → хочешь цифровую версию.
Ресурсы
GenAI-DrawIO-Creator: A Framework for Automated Diagram Generation
Код исследования: https://github.com/DayuanJiang/next-ai-draw-io
Jinze Yu, Dayuan Jiang — AWS Generative AI Innovation Center, Japan
Отсылки из исследования:
- Prompting is Programming (Beurer-Kellner et al., 2023) — промптинг как язык программирования для LLM
- Grammar-constrained decoding (Geng et al., 2024) — генерация структурированного вывода без fine-tuning
- Few-shot learning (Brown et al., 2020) — in-context примеры для обучения LLM новым форматам
- Speculative decoding (Leviathan et al., 2023) — техника для быстрого streaming вывода от LLM