Введение

В современной инженерии программного обеспечения подход «Диаграмма как код» (DaC) революционизировал способ документирования архитектуры систем.VPasCode, разработанный компанией Visual Paradigm, выделяется как единая браузерная платформа, поддерживающая несколько синтаксисов, таких как PlantUML, Mermaid и Graphviz. Хотя написание кода для генерации диаграмм обеспечивает точность, ручное обновление сложных структур, например добавление атрибутов к нескольким подклассам, может быть утомительным.

Именно здесьвстроенный ИИ VPasCode проявляет свои лучшие качества. Интегрируя обработку естественного языка непосредственно в редактор, VPasCode позволяет разработчикам уточнять свои визуальные модели в режиме диалога. В этом руководстве рассматривается, как использовать функцию «Изменить с помощью ИИ» для мгновенного обновлениядиаграммы классов UML, устраняя разрыв между текстовым кодом и визуальным дизайном без необходимости покидать рабочее пространство.

---

Ключевые понятия

Прежде чем переходить к шагам, полезно понять основные используемые технологии:

• Диаграмма как код (DaC): Методология, при которой диаграммы генерируются из текстового исходного кода, а не рисуются вручную с помощью мыши. Это обеспечивает возможность контроля версий диаграмм и их легкую воспроизводимость.
  

• PlantUML: Популярный инструмент с открытым исходным кодом, который использует простое текстовое описание для создания диаграмм UML. В приведенном ниже примере синтаксис PlantUML определяет классы, такие какКлиент, Заказ, иОплата.

• Модификация с помощью встроенного ИИ: В отличие от внешних ИИ-инструментов, где необходимо копировать и вставлять код туда и обратно, встроенный ИИ VPasCode понимает контекст вашего текущего файла. Он анализирует существующий код PlantUML, применяет запрошенные изменения (например, добавление атрибутов) и автоматически переписывает код.

• Рендеринг в реальном времени: VPasCode предоставляет разделенный экран, где изменения кода слева мгновенно отображаются на визуальной диаграмме справа, обеспечивая немедленную обратную связь.

---

Пошаговое руководство: уточнение диаграммы классов с помощью встроенного ИИ VPasCode

Быстрое и удобное уточнение диаграммы классов непосредственно в VPasCode без использования внешних инструментов можно выполнить за несколько простых шагов с помощью встроенной функции ИИ.

Исходная точка

Представьте, что у вас есть базовая диаграмма классов электронной коммерции, определённая в PlantUML. У вас есть классОплата с тремя дочерними классами:Наличные, Чек, иКредитВ настоящее время эти дочерние классы являются пустыми оболочками, наследующими только от родительского класса.

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

Рисунок 1: Начальное состояние диаграммы классов в VPasCode. Обратите внимание на классыНаличные, Чек, иКредит не имеют конкретных атрибутов.

Шаг 1: Откройте меню ИИ

Чтобы начать процесс уточнения, найдите элементы управления ИИ в интерфейсе редактора.

• Нажмите наИИвыпадающую кнопку, расположенную в верхнем левом разделе над редактором кода. Это меню открывает доступ к интеллектуальному управлению диаграммой.

Рисунок 2: Нажатие на выпадающее меню ИИ открывает варианты изменения или перевода кода диаграммы.

Шаг 2: Выберите опцию «Изменить»

Меню ИИ предлагает различные возможности в зависимости от ваших потребностей. Для структурных изменений вы будете использовать функцию «Изменить».

• В выпадающем меню нажмите наИзменитьопцию с иконкой ИИ рядом с ней. Это сообщает системе, что вы намерены изменить существующую логику и структуру диаграммы, а не создавать что-то с нуля.

Шаг 3: Опишите желаемые изменения

Это самый важный этап, на котором естественный язык заменяет ручное программирование. Вам не нужно знать точный синтаксис PlantUML для новых атрибутов; вы просто описываете, что хотите.

• В окне AI Modify диалоговом окне, которое появится, введите описание на естественном языке о том, как вы хотите улучшить или изменить вашу диаграмму.

• Пример запроса: «Добавьте несколько атрибутов к дочерним классам класса Payment на диаграмме классов»

• Нажмите кнопку AI Modify для отправки вашего запроса.

Рисунок 3: Диалоговое окно AI Modify. Пользователь вводит запрос на естественном языке (1) и запускает процесс (2).

Шаг 4: Просмотр улучшенной диаграммы

После отправки запроса движок VPasCode начинает работу. Он анализирует запрос, определяет целевые классы (Cash, Check, Credit) и внедряет соответствующие атрибуты и методы на основе стандартных знаний предметной области.

• Искусственный интеллект автоматически обработает ваше описание, обновит код и отразит добавленные классы, атрибуты или методы непосредственно в вашей визуальной диаграмме классов.

• Результат: Как видно ниже, класс Cash теперь имеет cashTendered, класс Check имеет bankID и название банка, и Кредит класс включает номер и дата истечения срока. Код слева был обновлен, чтобы соответствовать визуализации справа.

Рисунок 4: Уточненная диаграмма. ИИ успешно заполнил дочерние классы соответствующими атрибутами и методами, обновив как код, так и визуальное представление.

---

Заключение

Интеграция ИИ в инструменты «Диаграмма как код», такие как VPasCode, представляет собой значительный скачок в производительности для архитекторов и разработчиков программного обеспечения. Следуя этому простому четырехшаговому процессу, вы можете превратить скелетную диаграмму классов в подробный проектный документ за считанные секунды.

Возможность сказать «Добавить атрибуты к дочерним элементам Payment» и наблюдать, как код и диаграмма обновляются одновременно, устраняет неудобства ручного редактирования синтаксиса. Независимо от того, моделируете ли вы сложную корпоративную систему или простое приложение, встроенный ИИ VPasCode гарантирует, что ваша документация будет развиваться так же быстро, как и ваши идеи.

Готовы попробовать сами? Посетите VPasCode, чтобы начать мгновенно превращать ваш текст в профессиональные диаграммы

Справочные статьи и ресурсы для VPasCode от Visual Paradigm

Вот подборка статей и ресурсов, посвященных VPasCode от Visual Paradigm — единой платформе для создания диаграмм из текста. Ресурсы структурированы так, чтобы помочь вам понять его основные возможности, функции ИИ и интеграции в экосистему.

Основные руководства и обзоры функций

1. Полное руководство по VPasCode от Visual Paradigm: Фундаментальное руководство, объясняющее философию «Диаграмма как код» (DaC), его многодвижковую архитектуру (PlantUML, Mermaid, Graphviz) и основной интерфейс редактора с двумя панелями.

2. Освоение VPasCode: Полное руководство по созданию диаграмм с помощью ИИ: Подробное руководство по использованию функций на базе ИИ, включая чат-бота ИИ для преобразования естественного языка в диаграммы, а также о том, как переносить диаграммы, созданные ИИ, непосредственно в редактор VPasCode.

3. Глубокое погружение в VPasCode: Объединение Mermaid, PlantUML и ИИ в одной платформе: Эта статья представляет техническое глубокое погружение в поддержку платформой Mermaid, PlantUML и Graphviz, с детальным сравнением функций и практическими примерами использования.

Быстрый старт и практические руководства

4. Руководство по быстрому старту за 60 секунд | Руководство по созданию диаграмм из текста в VPasCode: Пошаговое руководство по созданию, настройке и публикации вашей первой диаграммы менее чем за минуту с использованием облачного редактора.

5. От кода к ясности: Руководство для начинающих по бесшовному созданию диаграмм с помощью VPasCode и OpenDocs: Практическое руководство по созданию реалистичных диаграмм (последовательности, C4, классы) и их отправке из VPasCode в документацию OpenDocs через интеграцию Pipeline.

Интеграция и экосистема

6. Бесшовное подключение диаграммирования к документации: VPasCode интегрируется с OpenDocs: Объявляет о прямой интеграции с конвейером, подробно описывая, как использовать функцию «Отправить в конвейер OpenDocs» для превращения диаграмм в живую документацию.

7. Бесшовное подключение диаграмм в виде кода к документации с помощью OpenDocs: Объясняет, как VPasCode выступает в роли моста между созданием диаграмм и документацией, решая проблему устаревших диаграмм за счёт мгновенных обновлений.

Возможности ИИ и кейсы

8. Visual Paradigm — визуальное моделирование, управляемое ИИ: Демонстрирует более широкую экосистему ИИ Visual Paradigm, включая разделы, посвящённые VPasCode и его способности генерировать диаграммы из текста, а также исправлению ошибок с помощью ИИ.

9. Новое в VPasCode — обзор функций при запуске: Обзор функций при запуске, выделяющий ключевые возможности: поддержка нескольких синтаксисов, исправление ошибок кода с помощью ИИ, перевод с помощью ИИ для глобальных команд и интеграция с OpenDocs.

10. Кейс: ускорение документирования архитектуры программного обеспечения с помощью VPasCode: Кейс, демонстрирующий, как VPasCode ускоряет документирование архитектуры программного обеспечения за счёт автоматической раскладки, генерации с помощью ИИ и поддержки единого движка.

Официальные страницы продуктов

11. Visual Paradigm VPasCode: единая платформа диаграмм в виде кода: Официальная страница с описанием функций продукта, содержащая информацию о поддерживаемых типах диаграмм (PlantUML, Mermaid, Graphviz), основных технических возможностях и разделе часто задаваемых вопросов.

12. Официальная документация и песочница VPasCode: Центральный узел для доступа к бесплатному редактору VPasCode Playground, официальной документации и последним обновлениям платформы.