Read this post in: de_DEen_USes_ESfr_FRhi_INid_IDjapl_PLpt_PTvizh_CNzh_TW

Справочник по справочнику VPASCode PlantUML Playbook

Подборка статей из справочника VPASCode PlantUML Playbook, включающая руководства по синтаксису для UML и не-UML диаграмм, созданных с помощью кода.

Основы PlantUML и синтаксиса

  1. Основы синтаксиса PlantUML: Освойте основы синтаксиса PlantUML, включая объявление диаграмм с помощью @startuml/@enduml, определения сущностей, операторы отношений, директивы стилизации и распространенные ключевые слова. Научитесь структурировать чистые, легко читаемые скрипты PlantUML, которые автоматически генерируют профессиональные диаграммы. [[34]]

  2. Руководство по синтаксису диаграмм вариантов использования PlantUML: Научитесь моделировать функциональные требования и взаимодействия акторов с помощью диаграмм вариантов использования PlantUML. Охватывает акторов, варианты использования, границы системы, отношения включения/расширения и паттерны обобщения для документирования требований и карты пользовательских историй.

  3. Руководство по синтаксису диаграмм классов PlantUML: Проектируйте статические структуры системы с помощью диаграмм классов PlantUML. Освойте объявления классов/атрибутов/методов, модификаторы видимости, наследование (<|--), композицию (*--), агрегацию (o--), и отношения ассоциации для документирования архитектуры объектно-ориентированных систем. [[49]]

  4. Руководство по синтаксису последовательностных диаграмм PlantUML: Моделируйте потоки сообщений и временные взаимодействия между компонентами системы. Изучите объявления участников, синхронные/асинхронные сообщения (->, -->), полосы активации, циклы, блоки alt/else, а также синтаксис создания/деактивации для проектирования API и диаграмм коммуникации микросервисов. [[51]]

  5. Руководство по синтаксису диаграмм активностей PlantUML: Визуализируйте бизнес-процессы и алгоритмические рабочие процессы с помощью синтаксиса диаграмм активностей PlantUML. Охватывает начальные/конечные узлы, действия, условные ветви (if/then/else), циклы (repeat/while), параллельные ветви и разделенные дорожки для документирования процедурной логики. [[46]]

  6. Руководство по синтаксису диаграмм состояний PlantUML: Моделирование конечных автоматов и переходов жизненного цикла объектов. Изучите объявления состояний, стрелки переходов (-->), действия входа/выхода, составные состояния и параллельные области для проектирования событийно-ориентированных систем и спецификации поведения. [[36]]

  7. Руководство по синтаксису диаграмм объектов PlantUML: Иллюстрируйте конкретные экземпляры объектов и их отношения во время выполнения в определённый момент. Освойте именование объектов, присвоение значений атрибутов, синтаксис связей и ассоциации на уровне экземпляров для отладки и визуализации сценариев тестирования. [[15]]

  8. Руководство по синтаксису диаграмм компонентов PlantUML: Отображение модульной архитектуры программного обеспечения с компонентами, интерфейсами и зависимостями. Изучите объявления компонентов, предоставляемые/требуемые интерфейсы (<>), стрелки зависимостей и группировка пакетов для документирования микросервисов и систем на основе плагинов. [[35]]

Расширенные типы диаграмм PlantUML

  1. Руководство по синтаксису диаграмм развертывания PlantUML: Моделирование физической инфраструктуры и топологии развертывания во время выполнения. Освойте узел, облако, рамка, база данных, и артефакт элементы, синтаксис вложенных контейнеров и маркировка сетевых протоколов для руководств DevOps и диаграмм архитектуры облака. [[31]]

@startuml
skinparam shadowing false
skinparam defaultFontName "Arial"

' Определение стилей
skinparam node {
BackgroundColor #F1F8FF
BorderColor #005CC5
FontColor #032F62
}

skinparam database {
BackgroundColor #FFF5E6
BorderColor #D96F00
FontColor #5C3000
}

skinparam artifact {
BackgroundColor #E6FFF1
BorderColor #008670
FontColor #004D40
}

left to right direction

' Зоны сети / узлы
node "Сеть доставки контента" as cdn <<CDN>> {
artifact "Кэшированные статические ресурсы" as static
}

node "Балансировщик нагрузки" as lb <<F5 / HAProxy>>

node "Сервер приложений" as appServer <<Ubuntu Linux>> {
node "Docker-контейнер" as docker {
artifact "app.war" as artifactApp
}
}

node "Сервер базы данных" as dbServer <<Кластер>> {
database "Продуктовая БД" as db <<PostgreSQL>>
}

' Соединения с метками протокола
cdn --> lb : HTTP/HTTPS (порт 443)
lb --> artifactApp : HTTP (порт 8080)
artifactApp --> db : JDBC / SQL (порт 5432)

@enduml

Пример: Классическая трёхуровневая архитектура, показывающая CDN, балансировщик нагрузки, сервер приложений с вложенным артефактом и уровень базы данных с соединениями, помеченными протоколами. [[1]]

@startuml

skinparam shadowing false

skinparam defaultFontName "Arial"

skinparam linetype ortho

' Определения стилей

skinparam rectangle {

    BackgroundColor #F4F6F9

    BorderColor #A0AAB2

    FontColor #232F3E

}

skinparam node {

    BackgroundColor #E2F3FC

    BorderColor #4A90E2

    FontColor #111111

}

skinparam database {

    BackgroundColor #FFF2E6

    BorderColor #FF9900

    FontColor #232F3E

}

' Точка входа в инфраструктуру

node "AWS Route 53" as dns

node "AWS Application Load Balancer" as alb

dns --> alb : Перенаправить трафик

' Глобальный периметр облака

rectangle "Регион AWS Cloud" {

   

    ' Граница кластера Kubernetes, охватывающего зоны доступности

    rectangle "Кластер Amazon EKS" as eks {

       

        ' Зона доступности 1

        rectangle "Зона доступности us-east-1a" as az1 #line.dashed {

            node "Рабочий узел EC2 (AZ1)" as node1 {

                rectangle "Под Frontend" as podWeb1 <<K8s Pod>> {

                    artifact "Контейнер Nginx" as containerWeb1

                }

                rectangle "Под API Backend" as podApi1 <<K8s Pod>> {

                    artifact "Контейнер приложения Go" as containerApi1

                }

            }

        }

        ' Зона доступности 2

        rectangle "Зона доступности us-east-1b" as az2 #line.dashed {

            node "Рабочий узел EC2 (AZ2)" as node2 {

                rectangle "Под Frontend" as podWeb2 <<K8s Pod>> {

                    artifact "Контейнер Nginx" as containerWeb2

                }

                rectangle "Под API Backend" as podApi2 <<K8s Pod>> {

                    artifact "Контейнер приложения Go" as containerApi2

                }

            }

        }

    }

    ' Общий уровень базы данных

    rectangle "Система хранения Amazon Aurora" as storage {

        database "Основная Aurora (писатель)" as dbMaster

        database "Реплика Aurora (читатель)" as dbReplica

    }

}

' Маршрутизация и матрица трафика

alb --> podWeb1 : HTTP/S (порт 80/443)

alb --> podWeb2 : HTTP/S (порт 80/443)

podWeb1 --> podApi1 : gRPC (порт 50051)

podWeb2 --> podApi2 : gRPC (порт 50051)

podApi1 --> dbMaster : TCP (порт 5432)

podApi2 --> dbMaster : TCP (порт 5432)

dbMaster .right.> dbReplica : Автоматическая репликация хранилища

@enduml

Пример: Развертывание Kubernetes, ориентированное на облако, в зонах доступности AWS с маршрутизацией через балансировщик нагрузки, вложенными подами и общим кластером базы данных. [[1]]

  1. Руководство по синтаксису диаграмм временных интервалов PlantUML: Визуализируйте точные продолжительности состояний и временные ограничения вдоль линейных временных шкал. Узнайте надежный/краткийстили участников, @временная_точканазначение состояний, часыгенерация волновых форм, и <->аннотации ограничений для встраиваемых систем и спецификации протоколов. [[30]]

@startuml
skinparam handwritten false
skinparam shadowing false
skinparam defaultFontName "Arial"

' Заголовок диаграммы временных интервалов
title Временная шкала синхронизации регистра шины данных

' Определение периодической формы сигнала часов (период 10 единиц, высокий уровень 5 единиц)
clock "Системные часы" как CLK с периодом 10 импульс 5

' Определение надежного участника шины данных
robust "Регистр шины данных" как BUS

' Время 0: начальное состояние регистра
@0
BUS пуст

' Время 10: шина данных переходит в состояние чтения
@10
BUS читает

' Время 20: шина данных переходит в состояние записи
@20
BUS записывает

' Время 22: отображение пользовательской текстовой метки на временной шкале
@22
note top of BUS : T_WRITE

' Время 30: шина данных становится заблокированной
@30
BUS заблокирован

' Время 35: отображение пользовательской текстовой метки на временной шкале
@35
note top of BUS : T_LOCK

' Время 40: шина данных возвращается в пустое состояние
@40
BUS пуст

' Добавление аннотаций временных ограничений с использованием явных числовых точек
@22 <-> @35 : {13 TU Продолжительность}

@enduml

Пример: Краткая временная шкала, показывающая состояния регистра шины данных (Пусто → Чтение → Запись → Заблокировано), синхронизированные с периодической формой сигнала системных часов. [[12]]

@startuml

skinparam shadowing false

skinparam defaultFontName "Arial"

' Заголовок диаграммы временных интервалов с несколькими потоками

title Синхронизация потоков веб-клиента и рабочего потока аутентификации

' Объявление временных шкал с использованием стиля надежного участника

robust "Поток веб-клиента" как CLIENT

robust "Поток рабочего аутентификации" как AUTH

' Время 0 мс: начальные состояния бездействия

@0

CLIENT бездействует

AUTH бездействует

' Время 10 мс: клиент инициирует запрос на аутентификацию

@10

CLIENT находится в состоянии "Ожидание аутентификации"

AUTH находится в состоянии "Проверка учетных данных"

' Время 25 мс: клиент отправляет дополнительные данные / аутентификация начинает генерацию токена

@25

AUTH находится в состоянии "Генерация JWT-токена"

' Время 40 мс: аутентификация завершает генерацию токена и отвечает клиенту

@40

AUTH бездействует

CLIENT аутентифицирован

' Время 55 мс: клиент возвращается к состоянию по умолчанию

@55

CLIENT бездействует

' Аннотация временного окна ограничений (с @10 по @40) — 30 мс

@10 <-> @40 : {30 мс Окно генерации}

@enduml

Пример: Надежная временная шкала с несколькими потоками, отображающая состояния веб-клиента и рабочего потока аутентификации с аннотацией временного ограничения окна генерации 30 мс. [[12]]

  1. Руководство по синтаксису диаграмм ERD PlantUML: Проектируйте диаграммы сущность-связь для документирования схем базы данных. Освойте объявление сущностей, типизацию атрибутов, обозначение первичных/внешних ключей и отношения мощности (1|o--o{) для моделирования данных и планирования миграции SQL.

  2. Руководство по синтаксису диаграмм ArchiMate PlantUML: Моделируйте уровни корпоративной архитектуры с использованием спецификации ArchiMate. Изучите элементы уровней бизнеса/приложения/технологий, концепции мотивации и типы отношений для стратегического планирования ИТ и документирования управления.

  3. Руководство по синтаксису модели C4 PlantUML: Реализуйте модель C4 для визуализации архитектуры программного обеспечения на четырех уровнях абстракции: Контекст, Контейнер, Компонент и Код. Освойте Человек, Система, Контейнер, и Компонент стереотипы с границами контейнеров и стилизацией отношений для согласованной коммуникации архитектуры с заинтересованными сторонами.

Примечание по встроенным диаграммам: Все примеры кода PlantUML в документации VPASCode отображаются как интерактивные, редактируемые диаграммы непосредственно в браузере. Ссылки на изображения PNG выше показывают статические предварительные просмотры примеров диаграмм; для полной интерактивности, включая живое редактирование, проверку синтаксиса и экспорт в PNG/SVG, перейдите непосредственно по URL каждой статьи на vpascode.com/docs. [[54]]

Функции редактора VPasCode: В каждой статье есть кнопки «Редактировать PlantUML в VPasCode», которые запускают пример кода в бесплатном редакторе VPasCode, работающем в браузере — для использования не требуется вход в систему или установка. Изменения мгновенно отображаются благодаря реальному времени отображения. [[54]]

Справочник составлен на основе документации VPASCode. VPasCode — это бесплатный онлайн-редактор для диаграмм PlantUML, Mermaid и Graphviz, работающий в браузере, который не требует входа в систему или установки. [[54]]

Leave a Reply