plantUML Vscode C4-Model

plantUML

一种绘图语言，有自己的语法规则，UML图绘制工具，支持通过文本、代码来生成图形。可以支持时序图、类图、对象图、活动图、思维导图等图形的绘制

@startuml
Alice -> Bob:  Request_测试
Bob --> Alice: Response_测试
@enduml

对应图为

这种UI比较捡漏，一些开源类库包，使得UI更加炫酷

C4-Model

C4-Model，是一种架构思想，架构图的绘制要明确面向人群，根据面向人群的不同，产出四幅维度图来描述一个系统或者一个架构。
4个维度为：System Context(系统级) --> Container(容器级) --> Component(组件级) --> Code(代码) 四个层次

planUML图UI较为简陋，结合vscode和一些开源C4类库，绘制架构图

1. vscode 安装插件

vscode安装PlantUML插件

2. 图形的渲染，需要java环境，要安装jdk

2.1 graphviz安装(可选)

https://graphviz.org/download/

3. 开源类库包下载

···
https://github.com/RicardoNiepel/C4-PlantUML(本文用这个)
https://github.com/plantuml-stdlib/C4-PlantUML
···
git拉到本地

4. 使用

4.1 将拉取的代码中，把 .vscode目录拷贝到要干活儿的目录
4.2 新建一个main.puml文件编写代码、文本即可，code示例如下

@startuml 演示系统1：
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

!define DEVICONS https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/main/icons/devicons
!include DEVICONS/php.puml
!include DEVICONS/mysql.puml

!define FONTAWESOME https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/main/icons/font-awesome-6/
!include FONTAWESOME/circle_user.puml

title 演示系统1方面系统后端关系网
LAYOUT_TOP_DOWN()
SHOW_LEGEND(true) 

AddElementTag("内", $borderColor="#ff0000")
AddElementTag("外", $borderColor="#00ff00")

System(media, "一段文案", "媒体平台的开放接口")
System(ziwei, "演示系统1", "一段文案", $sprite="php", $tags="内")

Rel(media, ziwei, "一段文案")
@enduml

目录结构如下：

out目录为导出的图片

一些快捷操作

• vscode 渲染快捷键 alt+d
• 右键可支持导出文件导出渲染来图片

网络访问异常

raw.githubusercontent.com 为github代码详情页，可直接引入使用，此域名需fq，也可本机dns解析

码云镜像：

例如上图示例code中，就切换了码云的code地址
https://gitee.com/coder4/C4-PlantUML?_from=gitee_search
https://gitee.com/coder4/plantuml-icon-font-sprites  #这个为icon