Мы рады объявить о крупном обновлении VPasCode: полная поддержка языка D2 языка диаграмм как кода! Благодаря этому обновлению архитекторы, разработчики и технические писатели могут мгновенно преобразовывать декларативные текстовые скрипты D2 в чистые, профессиональные визуальные диаграммы без каких-либо сложностей.
Независимо от того, создаете ли вы сложную облачную архитектуру, топологию микросервисов или организационные рабочие процессы, VPasCode работает как ваш основной бесплатный редактор D2 и функционально насыщенный онлайн-инструмент D2. Ощутите бесшовную визуализацию в реальном времени прямо в вашем браузере.
Чтобы узнать больше о возможностях нашей платформы и обновлениях, посетите официальную страницу VPasCode.
Как работает интеграция D2 в VPasCode
Использование D2 в VPasCode быстрое, интуитивно понятное и разработано для максимальной продуктивности. Рабочая среда имеет удобную двухпанельную компоновку:
- Левая панель (редактор кода): Просто вставьте, введите или отредактируйте свой скрипт D2. Автоматическое определение формата в VPasCode мгновенно распознает ваш код без необходимости ручного переключения языка.
- Правая панель (живой визуализатор): Наблюдайте, как ваша диаграмма динамически отображается в режиме реального времени при наборе или изменении блоков кода.
Видео ниже показывает, как создать диаграмму D2 в редакторе диаграмм как кода Visual Paradigm VPasCode.
Готовы попробовать сами? Немедленно приступайте к работе с нашим редактором VPasCode.
Ключевые функции, включенные в поддержку D2
Помимо живого отображения, наша новая интеграция D2 включает в себя разнообразные возможности для совместной работы и вывода, подходящие для вашей рабочей среды:
- Гибкие варианты экспорта: Скачайте готовые диаграммы мгновенно в виде масштабируемых векторных графиков SVG или изображений высокого разрешения в формате PNG для отчетов, презентаций и документации.
- Интеграция с буфером обмена: Быстро скопируйте изображение вашего отрисованного диаграммы прямо в буфер обмена одним щелчком, чтобы вставить прямо в Slack, электронные письма или текстовые редакторы.
- Мгновенное sharing по ссылке: Легко делитесь своей работой с коллегами или клиентами с помощью прямых гиперссылок. Самое лучшее — для просмотра ваших совместно используемых диаграмм не требуется вход в систему.
Демонстрация: создание базовой сетевой диаграммы в D2
Чтобы увидеть, насколько легко моделировать системы с помощью этогобесплатного редактора D2, рассмотрим следующий пример базовой многоуровневой сетевой архитектуры.
Исходный код D2
направление: справа
клиент -> балансировщик_нагрузки: HTTPS
балансировщик_нагрузки -> app1: HTTP
балансировщик_нагрузки -> app2: HTTP
app1 -> redis: GET
app2 -> redis: GET
app1 -> postgres: SQL
app2 -> postgres: SQL
клиент.форма: человек
балансировщик_нагрузки.форма: прямоугольник
app1.форма: шестиугольник
app2.форма: шестиугольник
redis.форма: цилиндр
postgres.форма: цилиндр
redis.стиль.заливка: "#fee2e2"
postgres.стиль.заливка: "#dcfce7"Как это отображается в нашем онлайн-редакторе D2
Когда вы вставляете приведённый выше скрипт в VPasCode, движок автоматически обрабатывает отношения, направление и пользовательские стили фигур:
- Клиентклиент стилизован как отдельный иконка человека, инициирующего HTTPS-запросы к прямоугольномубалансировщику_нагрузки.
- Трафик чётко разделяется между двумя шестиугольными узлами приложения (app1 и app2).
- Оба узла приложения безопасно запрашивают слои кэширования на заднем плане (redis, стилизованные в мягкий красный оттенок) и реляционные хранилища данных (postgres, стилизованные в мягкий зелёный оттенок).
Больше примеров диаграмм D2
Базовые фигуры
сервер -> клиент: HTTP
сервер -> база данных: запрос
клиент: {
форма: человек
стиль.заливка: "#cfe2ff"
}
база данных: {
форма: цилиндр
стиль.заливка: "#d1e7dd"
}
сервер.стиль.заливка: "#fff3cd"
Контейнеры
сеть: {
веб: {
форма: шестиугольник
стиль.заливка: "#e7f1ff"
}
api: {
форма: прямоугольник
стиль.заливка: "#fff3cd"
}
база_данных.основная: {
форма: цилиндр
стиль.заливка: "#d1e7dd"
}
база_данных.кэш: {
форма: цилиндр
стиль.заливка: "#f8d7da"
}
веб -> api: REST
api -> база_данных.основная: SQL
api -> база_данных.кэш: поиск
}Стилизованные
переменные: {
d2-настройки: {
набросок: true
двигатель_расположения: elk
}
}
aws: {
vpc: {
веб: {
форма: прямоугольник
стиль: {
заливка: "#fef3c7"
обводка: "#d97706"
ширина_обводки: 2
шрифт: моно
}
}
api: {
форма: прямоугольник
стиль.заливка: "#dbeafe"
}
база_данных: {
форма: цилиндр
стиль.заливка: "#dcfce7"
}
}
}
пользователь -> aws.vpc.веб: HTTPS {
стиль.анимация: true
}
aws.vpc.веб -> aws.vpc.api: HTTP
aws.vpc.api -> aws.vpc.база_данных: SQL {
стиль.штрих: 5
}Последовательность
форма: диаграмма_последовательности
пользователь -> api: GET /users
api -> база_данных: SELECT *
база_данных -> api: строки
api -> пользователь: 200 OK
пользователь -> api: POST /users
api -> база_данных: INSERT
база_данных -> api: строка
api -> пользователь: 201 СозданоПримечания: Вы можете создать диаграмму последовательности с помощью PlantUML. Ознакомьтесь, как это сделать, по адресу:
Полное руководство по диаграммам последовательности PlantUML: синтаксис, примеры и лучшие практики
Что такое VPasCode?
Если вы новичок на нашей платформе, Visual Paradigm VPasCode — это единое решение для создания диаграмм на основе кода, работающее в браузере, разработанное для современных технических команд. Оно устраняет неудобства ручных инструментов рисования с перетаскиванием, позволяя полностью определять архитектуру и модели данных с помощью кода.
Помимо D2, VPasCode поддерживает широкий спектр популярных форматов диаграмм и структурированных языков, включая PlantUML, Mermaid, Graphviz, ECharts, SQL, YAML, JSON, и основные языки программирования, такие как Java, Python, Rust, и TypeScript. Основное редактирование кода, предварительный просмотр в реальном времени и экспорт изображений полностью бесплатны.
Начните создавать сегодня
Улучшите свою техническую документацию и архитектурное моделирование уже сегодня. Оцените скорость и удобство новых возможностей D2, запустив приложение прямо сейчас на сайте Редактор VPasCode.