Освоение архитектурной визуализации: как создать диаграмму контекста системы C4 в PlantUML

Зачем использовать подход «диаграмма как код» для моделей C4?

Традиционные инструменты рисования методом перетаскивания часто приводят к несовпадению блоков, несогласованному оформлению и утомительным ручным обновлениям при каждом изменении архитектуры. Используя «инструмент «диаграмма как код»например, бесплатный редактор PlantUML, ваша документация остаётся синхронизированной с кодом, управляемой по версиям и чистой. Используя «VPasCode” вы получаете рендеринг в реальном времени и автоматическое определение формата, что делает визуализацию архитектуры программного обеспечения effortless.

Кейс мастер-класса: архитектура онлайн-магазина продуктов

Чтобы продемонстрировать, как структурировать надёжную диаграмму контекста системы, рассмотрим платформу онлайн-магазина продуктов. Эта архитектура должна отражать конечных пользователей, внешних курьеров, ядро системы магазина продуктов и сторонние сервисы, такие как платёжные шлюзы и логистические провайдеры.

Вот полный исходный код PlantUML, который мы разберём пошагово:

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
skinparam vpDiagramType C4modelSystemContextDiagram

LAYOUT_TOP_DOWN()
LAYOUT_WITH_LEGEND()

title System Context diagram for Online Grocery Store

Person(customer, "Customer", "Browses the store, orders groceries, and schedules delivery")
Person_Ext(driver, "Delivery Driver", "Delivers orders to customers")

Enterprise_Boundary(grocery_co, "Online Grocery Store") {
  System(grocery_system, "Online Grocery Store System", "Allows customers to order groceries online and manages fulfillment")
}

System_Ext(payment, "Payment Gateway", "Processes card and digital wallet payments")
System_Ext(shipping, "Logistics Provider", "Plans delivery routes and schedules drivers")

Rel(customer, grocery_system, "Browses products and places orders", "HTTPS")
Rel(grocery_system, payment, "Processes payments via", "HTTPS/API")
Rel(grocery_system, shipping, "Creates delivery jobs via", "HTTPS/API")
Rel(driver, grocery_system, "Views delivery assignments", "HTTPS")

@enduml

Пошаговый разбор кода

1. Настройка базовой среды

Я начинаю с инициализации скрипта стандартными тегами PlantUML и импорта официальных макросов стандартной библиотеки C4-PlantUML. Ссылаясь на «C4_Context.puml” мы получаем доступ к семантическим элементам, специально разработанным для диаграмм контекста системы.

• Подключение библиотеки: !include .../C4_Context.puml загружает стандартные фигуры, цвета и правила оформления для людей, систем и границ.
• Тип диаграммы и макет: Установка «skinparam vpDiagramType C4modelSystemContextDiagram” обеспечивает правильную интеграцию в «VPasCode“; при этом «LAYOUT_TOP_DOWN()” аккуратно организует визуальную иерархию сверху вниз. Я также включаю «LAYOUT_WITH_LEGEND()для автоматической генерации полезного справочного руководства в правом нижнем углу холста.

2. Определение акторов и пользователей

Далее мне необходимо определить человеческих акторов, взаимодействующих с нашей экосистемой. Я различаю стандартных пользователей системы и внешние сущности с помощью специфических макросов C4:

• Основной пользователь: Я создаю основного пользователя с помощью Person(customer, "Клиент", ...) который инициирует заказы и просматривает инвентарь.
• Внешний актор: Я определяю курьера доставки с помощью Person_Ext(driver, "Курьер доставки", ...) чтобы подчеркнуть, что, хотя они взаимодействуют с нашим процессом выполнения заказов, они находятся за пределами нашего основного внутреннего периметра безопасности.

3. Установление организационных границ и основных систем

Архитектурная ясность требует четких границ. Чтобы отделить то, что принадлежит нашей компании, от того, что зависит от внешних поставщиков, я устанавливаю корпоративную границу:

• Корпоративная граница: Используя Enterprise_Boundary(grocery_co, "Интернет-магазин продуктов")создает пунктирный контейнерный блок, визуально группирующий внутреннюю инфраструктуру.
• Внутренняя система: Внутри этой границы я размещаю наш основной программный актив с помощью System(grocery_system, "Система интернет-магазина продуктов", ...).

4. Интеграция внешних систем

Ни одна современная платформа электронной коммерции не работает изолированно. Я определяю внешние зависимости за пределами корпоративной границы, используя специализированные макросы внешних систем:

• Обработка платежей: System_Ext(payment, "Платежный шлюз", ...)представляет сторонние финансовые транзакции.
• Логистика и доставка: System_Ext(shipping, "Логистический провайдер", ...)занимается планированием маршрутов и назначением водителей.

5. Отображение связей и протоколов

Чтобы связать архитектуру воедино, я отображаю направленные взаимодействия и протоколы связи с помощью Rel() макроса:

• Поток клиента: Rel(customer, grocery_system, "Browses products and places orders", "HTTPS") иллюстрирует, как пользователи безопасно подключаются к основной платформе.
• Интеграции с бэкендом: Я отображаю зависимости бэкенда, такие как обработка платежей и поставщики услуг доставки, с явными метками протоколов ("HTTPS/API") чтобы предоставить инженерам немедленный технический контекст.

Заключение & Попробуйте сами

Создание чистых диаграмм архитектуры программного обеспечения не требует громоздких настольных инструментов или сложных конфигураций файлов. Объединив мощную синтаксис C4 PlantUML с VPasCode, вы можете писать, рендерить и обмениваться диаграммами архитектуры за считанные секунды.

Готовы попробовать создать свою собственную архитектуру системы? Перейдите к бесплатному онлайн-редактору VPasCode, вставьте этот фрагмент кода и наблюдайте, как ваша диаграмма рендерится в реальном времени!