VPasCode — это веб-среда для создания и просмотра диаграмм на основе текстового кода. Она поддерживает языки диаграмм, включая PlantUML, Mermaid, Graphviz и D2, объединяя редактирование кода, живую рендеринг и инструменты с поддержкой ИИ в одном месте. Вы пишете или генерируете скрипт диаграммы, а VPasCode отображает его в виде визуальной диаграммы.
1. Начните создание диаграммы
-
Откройте VPasCode в своём веб-браузере.
-
Начните с пустого редактора или вставьте существующий скрипт диаграммы.
-
Для PlantUML включите стандартные
@startumlи@endumlмаркеры. VPasCode может обнаруживать синтаксис PlantUML и активировать соответствующий рендерер. -
Проверяйте отрендеренную диаграмму по мере работы.
2. Создайте диаграмму с помощью ИИ
Используйте помощника ИИ, чтобы преобразовать описание на естественном языке в код диаграммы. Будьте конкретны в отношении элементов и связей, которые вы хотите включить.
Например, вы можете запросить:
Создайте диаграмму последовательности для аутентификации входа пользователя, включая пользователя, веб-приложение, службу аутентификации и базу данных.
Проверьте сгенерированный код и его результат рендеринга. Уточните запрос, если отсутствуют важные участники, шаги или связи.
3. Уточните существующий код
Вместо того чтобы начинать заново, используйте инструкции на естественном языке для изменения уже имеющейся диаграммы. Опишите желаемое изменение и укажите, где оно должно быть размещено.
Например:
Добавьте проверку шлюза оплаты сразу после шага отправки заказа.
Затем проверьте обновлённый код и диаграмму, чтобы убедиться, что изменение соответствует предполагаемому рабочему процессу.
4. Исправьте ошибки
Если диаграмма не отображается ожидаемым образом, используйте инструмент ИИ для исправления ошибок кода, чтобы помочь диагностировать и исправить проблемы синтаксиса. Он может выявить такие проблемы, как опечатки, отсутствующие скобки или несовпадение токенов, внести исправление и объяснить, что пошло не так.
После применения исправления проверьте как код, так и отрендеренную диаграмму, чтобы убедиться в правильности результата.
5. Переведите текст диаграммы
Используйте инструмент ИИ для перевода диаграмм, чтобы перевести текст внутри диаграммы, например метки, свойства классов и описания сообщений. Это поможет подготовить диаграммы для международных команд.
Проверьте переведённые термины в контексте, особенно техническую лексику и имена, которые должны остаться без изменений.
6. Примените тему
Выберите тему в редакторе, чтобы изменить визуальный стиль диаграммы. Доступные варианты включают классическую тему Visual Paradigm и классические альтернативы. Настройки темы могут автоматически применить соответствующие параметры внешнего вида.
Перед экспортом проверьте результат на читаемость и согласованность.
7. Экспорт и обмен
Выберите формат экспорта, подходящий для способа использования диаграммы:
| Формат | Полезно для |
|---|---|
| SVG | Масштабируемая веб-документация и технические вики |
| PNG | Чат-приложения, трекеры ошибок и презентации |
| Официальные документы и печать |
Чтобы поделиться диаграммой, используйте прямую ссылку или QR-код, сгенерированный платформой.
Практичный рабочий процесс
-
Опишите систему, процесс или архитектуру, которую вы хотите смоделировать.
-
Сгенерируйте начальный код диаграммы с помощью ИИ или вставьте существующий скрипт.
-
Просмотрите живую отрисовку и уточните диаграмму с помощью целевых инструкций.
-
Используйте исправление ошибок, если проблемы с синтаксисом препятствуют отрисовке.
-
При необходимости переведите подписи или примените тему.
-
Экспортируйте в формате, подходящем для вашей документации или презентации.
-
Поделитесь диаграммой, используя её URL или QR-код.
