ZenUML: создание диаграмм последовательности и блок-схем на основе простого текстового кода

Общее введение

ZenUML - это многоплатформенное решение для создания диаграмм на основе кода, ориентированное на создание диаграмм последовательности и блок-схем. Оно позволяет избежать задержек при взаимодействии с сервером за счет рендеринга диаграмм в реальном времени в браузере, так что мыслительный процесс пользователя не прерывается неэффективными операциями перетаскивания или медленно загружающейся анимацией.Диаграммы ZenUML - это не просто статичные изображения, пользователь может взаимодействовать с диаграммами, например, выделив сообщение на диаграмме в режиме редактирования, автоматически выбрать соответствующий код.ZenUML уделяет особое внимание конфиденциальности и безопасности, никогда не отправляя данные на сервер для рендеринга. Данные никогда не отправляются на сервер для визуализации, что обеспечивает безопасность пользовательских данных. Инструмент соответствует стандарту OMG UML 2.5.1 и предлагает богатые расширения, такие как облачные иконки, чтобы сделать диаграммы более читабельными.ZenUML используется в различных отраслях, таких как финтех, телекоммуникации и розничная торговля, и поддерживается на различных платформах, включая Confluence, веб-приложения, расширения для браузеров, плагины для IDE и настольные приложения.

Список функций

• Рендеринг в реальном времени: рендеринг графиков в реальном времени в браузере без взаимодействия с сервером.
• Интерактивные графики: пользователи могут взаимодействовать с графиками и быстро перемещаться по сложным графикам.
• Конфиденциальность и безопасность: никакие данные не отправляются на сервер для визуализации, что обеспечивает безопасность данных.
• Соответствие стандартам: соответствует OMG UML 2.5.1 и предоставляет широкие возможности расширения.
• Многоплатформенная поддержка: поддерживаются Confluence, веб-приложения, расширения для браузеров, плагины для IDE и настольные приложения.
• Более простой DSL: используйте более простой язык DSL, чтобы сократить количество строк кода и улучшить читаемость и сопровождаемость.
• Профессиональная поддержка: обеспечивается установка, обучение и поддержка при выходе из строя, причем большинство проблем решается в течение 8 часов.
• Богатые расширения: например, иконки облаков, чтобы сделать графики более читаемыми.

Использование помощи

Процесс установки

1. Использование веб-приложений::
   • Посетите веб-сайт ZenUML (https://zenuml.com/).
   • Зарегистрируйтесь и войдите в свою учетную запись.
   • Войдите в рабочую область и начните создавать график.
2. Установка плагина Confluence::
   • В бэкенде администрирования Confluence выберите Применить.
   • Найдите "ZenUML" и нажмите "Установить".
   • После завершения установки добавьте макрос ZenUML на страницу и начните создавать диаграмму.
3. Установка расширений для браузеров::
   • Найдите "ZenUML" в магазине расширений вашего браузера.
   • Нажмите "Добавить в браузер" и следуйте инструкциям, чтобы завершить установку.
   • После завершения установки нажмите на значок ZenUML на панели инструментов браузера, чтобы начать создание диаграммы.
4. Установка подключаемого модуля IDE::
   • Найдите "ZenUML" в магазине плагинов IDE.
   • Нажмите "Установить" и следуйте подсказкам, чтобы завершить установку.
   • После установки откройте плагин ZenUML в IDE и начните создавать диаграммы.

Процесс использования

1. Создание диаграмм последовательностей::
   • Выберите "Новая диаграмма" в рабочей области.
   • Выберите шаблон Sequence Diagram (Диаграмма последовательности).
   • Пишите код, используя, например, DSL-язык ZenUML:

    Alice -> Bob: Hello Bob, how are you?
   Bob --> Alice: I am good thanks!
   

   • Просматривайте графики в режиме реального времени, вносите коррективы и оптимизируйте работу.
2. Создание блок-схем::
   • Выберите "Новая диаграмма" в рабочей области.
   • Выберите шаблон "Блок-схема".
   • Пишите код, используя, например, DSL-язык ZenUML:

    start
   :Step 1;
   :Step 2;
   :Step 3;
   end
   

   • Просматривайте графики в режиме реального времени, вносите коррективы и оптимизируйте работу.
3. Экспорт и совместное использование графиков::
   • Когда вы закончите создание диаграммы, нажмите кнопку "Экспорт" и выберите формат экспорта (PNG, SVG и т. д.).
   • Поделитесь графиками с помощью ссылки или кода для встраивания.
4. Дополнительные возможности::
   • Улучшите читаемость графиков с помощью значков облаков и других расширений.
   • Выделите сообщения на графике в режиме редактирования, чтобы быстро перейти к коду.
   • Посетите справочный центр ZenUML, чтобы получить дополнительные советы и поддержку.

общие проблемы

• Как вы обеспечиваете безопасность данных? ZenUML не отправляет данные на сервер для рендеринга, все операции выполняются локально для обеспечения безопасности данных.
• Как получить техническую поддержку? Посетите Справочный центр ZenUML, чтобы отправить запрос в службу поддержки. Большинство вопросов решается в течение 8 часов.
• Поддерживает ли он командную работу? ZenUML поддерживает совместную работу в команде, где пользователи могут обмениваться ссылками на диаграммы, совместно редактировать и просматривать диаграммы.

Точилка для схем D2

Существует множество инструментов для создания схем.

Мне нравится использовать инструменты для построения диаграмм на основе текстового кода, такие как Mermaid, Plantuml, Graphviz.

Все они генерируют изображения на основе кода и идеально подходят для размещения в репозиториях кода для версионирования.

Недавно я обнаружил гораздо более простой в использовании инструмент такого рода D2Ниже представлен простой, интуитивно понятный и мощный инструмент.

D2 можно использовать в командной строке или в браузере. Предположим, у вас есть файл с кодом изображенияexample.d2Команда для создания изображения выглядит следующим образом.

$ d2 example.d2

Чаще всего я использую его через браузер. В нем есть онлайн-генератор play.d2lang.com(Ниже), вставьте код, нажмите кнопку "компиляция", и изображение будет сгенерировано немедленно.

Если вам нужен узел A (имя узла - A), просто введите A.

A

A - это просто имя узла, если вы хотите настроить содержимое узла, напишите его так, как показано ниже.

A: A

Затем добавьте узел.

A: A
B: B

Соедините их.

A: A
B: B
A -> B

Соединение может быть выполнено с помощью положительной стрелки (->), или вы можете использовать обратную стрелку (<-), и даже двунаправленные стрелки (<->). Если вам не нужны стрелки, просто соедините линии (--).

К стрелкам также можно добавить текст.

A: A
B: B
A -> B: соединение

Между узлами может быть несколько соединений.

A: A
B: B
A -> B: Запрос
A <- B: Ответ

Соединения узлов также могут быть записаны в одной строке.

A -> C <- B: Соединения

Стадия 1 -> Стадия 2 -> Стадия 3 -> Стадия 4
Стадия 4 -> Стадия 1: Обратная связь

Этого синтаксиса достаточно, чтобы нарисовать базовую схему проводки, не так ли просто.

D2 может рисовать очень сложные диаграммы, подробнее о синтаксисе см.(компьютерный) файл.

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

A: A
A.форма: круг

Форма может быть даже изменена на облако, чтобы обозначить облачный сервис.

A: A
A.форма: облако

Цвет линии также можно изменить.

A: A
A.style.stroke: red