Используйте VSCode+PlantUML+C4-Model для быстрого рисования архитектурных схем

Архитектура

Используйте VSCode+PlantUML+C4-Model для быстрого рисования архитектурных схем

О модели C4

Недавно я смотрел C4-Model.Его концепция очень практична.Схема архитектуры должна быть четко ориентирована на толпу.В соответствии с разной толпой создаются четыре диаграммы для описания системы или архитектуры. Системный контекст --> Контейнер --> Компонент --> Код Четыре уровня.

层级

Для описания того, для чего используется графика на каждом уровне, можно найти здесь:woohoo.info Q.capable/article/C4-…

В центре внимания этой статьи меньше, не обсуждение этих аспектов Дао, а описание того, как это сделать, то есть аспект искусства.

Установить vscode

На самом деле, вы можете использовать plantUML напрямую, но интерфейс plantUML относительно прост, а функции относительно слабы, а в vscode есть подключаемый модуль для plantUML, который проще в использовании.

Установка vscode очень проста, вы можете напрямую загрузить файл dmg с https://code.visualstudio.com/Download и установить его в приложение под MAC.

Установите плагин plantUML&Graphviz для vscode

plantUML — это инструмент, который может рисовать диаграммы UML с помощью текста и кода. Ему не нужно учитывать такие факторы, как отношение, цвет, местоположение и т. д., что удобно и быстро. Соответствующая функция плагина в vscode аналогична.

Graphviz — это подключаемый модуль предварительного просмотра графики. По умолчанию plantUML может отображать только временные диаграммы. Для более сложной графики требуется подключаемый модуль Graphviz, помогающий в отображении.

Найдите установку непосредственно на торговой площадке vscode следующим образом:

file

PS: Для запуска plantUML требуется среда Java, пожалуйста, установите jdk самостоятельно и настройте переменные среды.

Если Graphviz не установлен, при рендеринге будет выдано сообщение об ошибке:

/opt/local/bin/dot File not exist.

Настроить сниппеты, соответствующие C4-модели

vscode имеет концепцию рабочей области, которая представляет собой рабочий каталог. Откройте каталог через File-->open..., и этот каталог будет использоваться как рабочая область по умолчанию.

В рабочем пространстве скрытый подкаталог .vscode в текущем каталоге будет считываться по умолчанию для получения настроек текущего рабочего пространства.Здесь мы только настраиваем фрагменты (фрагменты кода) C4-Model, чтобы помочь в написании операторов при рисовании .

Сначала извлеките исходный код проекта C4-PlantUML из github, как показано ниже.

git clone https://github.com/RicardoNiepel/C4-PlantUML

Вы можете увидеть его структуру кода:

file

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

file

Практический рисунок

Вы чувствуете себя немного взволнованным, когда рисование может быть реализовано в коде? Общий синтаксис графики UML можно найти здесь http://plantuml.com/zh/sitemap-language-specification

Я лишь кратко представляю здесь модель C4.

общие элементы

В C4-Model есть несколько относительно интуитивно понятных элементов:

Person:人员
System:系统，包含DB、Application、WebPage等
System_ext:外部系统
System_Boundary:系统边界，在这个边界中的都是系统的组成部分，里面一般是Container级别的组件
Container:容器，不是Docker之类的容器，简单点可以直接理解为System的组成部分，比如DB、Application等
ContainerDb:DB
Container_Boundary:容器边界，在这个边界范围内的都是容器的组成部分，里面一般都是Component级别的数据
Component:组件，比如一个Controller，一个Service逻辑处理类，一个Domain等
Rel:连接线

Также необходимо подчеркнуть, что для обычных инструментов рисования суффикс файла нужно сохранять как .uml, а для c4 — как .puml. Сначала сохраните его как соответствующий суффикс, и фрагменты вступят в силу в последующем процессе написания.

Существует также специальный код для указания режима графика — обратите внимание на () после него:

LAYOUT_WITH_LEGEND()

Добавление этой строки кода после включения приведет к созданию следующего содержимого в правом нижнем углу сгенерированного графика:

file

LAYOUT_AS_SKETCH()

При таком представлении черновика вся визуализированная графика находится в черновом стиле, как показано ниже:

file

LAYOUT_TOP_DOWN

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

LAYOUT_LEFT_RIGHT

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

Начните писать соответствующий код
@startuml
!include /Users/alankim/gitspace/C4-PlantUML/C4_Container.puml

'LAYOUT_WITH_LEGEND()
LAYOUT_AS_SKETCH()

Person(user, "用户")

System_Boundary(item, "商品相关"){
    System(itemCenter, "商品中心", "")
    System(priceCenter, "价格中心", "")
    System(InventoryCenter,"销售库存","")
}

System_Ext(orderPlatform, "订单平台")
System_Ext(wmsStock,"wms库存")
System_Ext(buy,"导购平台")

Rel(wmsStock, InventoryCenter, "库存上抛")
Rel(buy,itemCenter,"商品信息查询")
Rel(user,orderPlatform,"提交订单")
Rel(buy,priceCenter,"价格查询")
Rel(orderPlatform,InventoryCenter,"扣减库存")
Rel(InventoryCenter, itemCenter, "查询商品sku")
Rel(priceCenter,itemCenter,"查询商品sku")
Rel(user,buy,"用户浏览")

@enduml

Эта картина более сложная, и большинство компонентов в основном используются.Соответствующая сгенерированная графика выглядит следующим образом:

file

Эта статья опубликована в блогеOpenWriteвыпуск!

Категории