使用VSCode+PlantUML+C4-Model快速画架构图

关于C4-Model

最近在看C4-Model，它的理念很实用，架构图要明确面向人群，根据面向人群的不同，产出四幅图来描述一个系统或者一个架构。System Context --> Container --> Component --> Code 四个层次。

层级

具体每个层级的图形用来描述什么，可以参见这里：https://www.infoq.cn/article/C4-architecture-model

本文的关注点更小，不讨论这些道的层面，而是描述怎么做，也就是术的层面。

安装vscode

其实直接使用plantUML也可以，不过plantUML的界面比较简陋，功能也比较弱，而vscode中有plantUML的插件，使用起来更顺手。

vscode的安装很简单，MAC下直接https://code.visualstudio.com/Download下载dmg文件安装到Application即可。

安装vscode的plantUML&Graphviz插件

plantUML是一款可以通过文字、代码画UML图的工具，不需要考虑态度配色、位置等因素，方便快速。而vscode上对应的插件功能类似。

Graphviz是一款图形化预览插件，plantUML默认只能渲染出时序图，对于比较复杂的图形，则需要Graphviz插件协助渲染。

直接在vscode的marketplace中搜索安装，如下所示：

file

PS: 运行plantUML需要Java环境，请自行安装jdk并配置环境变量。

如果未安装Graphviz，在渲染的时候会报错：

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

配置C4-model对应的snippets

vscode有工作区的概念，也就是一个工作目录。通过File-->open... 打开一个目录，就会默认把这个目录作为一个工作区。

在工作区中会默认读取当前目录下的一个隐藏子目录 .vscode 来获取当前工作区的设置，在这里我们只自定义C4-Model的snippets(代码片段)，用于辅助画图时语句编写。

首先从github上拉取C4-PlantUML项目源码，如下

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

可以看到其代码结构：

file

我们需要的snippets文件就在这里，直接复制这个目录到工作区即可，比如我的工作区：

file

实操画图

当画图可以用代码实现时，是不是觉得有点兴奋，普通的UML图形语法可以参考这里http://plantuml.com/zh/sitemap-language-specification

我这里只针对C4-Model来简单介绍下。

常见元素

在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。先保存为对应的后缀，snippets才会在后续的编写过程中生效。

还有一些特殊的代码用来指定图的模式--注意后面要加上()：

LAYOUT_WITH_LEGEND()

在include之后加上这行代码，会在生成图形的右下角生成如下内容：

file

LAYOUT_AS_SKETCH()

加上这个表示草稿，整个渲染生成的图形都是草稿样式，如下：

file

LAYOUT_TOP_DOWN

排列方向，顾名思义为从上到下排列，注意不需要加括号

LAYOUT_LEFT_RIGHT

排列方向，顾名思义为从左到右排列，注意不需要加括号

开始写对应的code

@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

转载自：
作者：AlanKim
链接：https://www.jianshu.com/p/0d1917cd04e3
来源：简书

使用VSCode+PlantUML+C4-Model快速画架构图相关推荐

plantuml样式_自定义PlantUML和C4 Model样式
什么是PlantUml PlantUml是一个支持快速绘制的开源项目.其定义了一套完整的语言用于实现UML关系图的描述.并基于强大的graphviz图形渲染库进行UML图的生成.绘制的UML图还可以导 ...
如何画架构图之C4模型画法
如何画架构图之C4模型画法之前一直看别人画架构图,自己画的很烂,最近看了一点点资料,整理了下,分享出来,希望对别人有帮助,如果有不对的地方欢迎指正. C4架构图要解答的问题: 1,为哪些用户提供什么 ...
如何画架构图之C4方法
如何画架构图之C4方法用C4方法: C4表示由高到低逐步细化的4中图. 分别是: 语境.容器.组件和类语境: 要求做到给不懂技术的客户能考得懂的图,只要能表达口语的语境即可. 传达少量的信息,比如 ...
不会画架构图的程序员不是好的技术扛把子，手把手练起来~
1.前言你是否对大厂展示的五花八门,花花绿绿的架构设计图所深深吸引,当我们想用几张图来介绍下业务系统,是不是对着画布不知从何下手?作为技术扛把子的筒子们是不是需要一张图来描述系统,让系统各个参与方都 ...
画架构图的软件_程序员为什么要学会画技术架构图？
来源: https://www.infoq.cn/article/GhprrUlOYyOqS8*FR1pH 技术传播的价值,不仅仅体现在通过商业化产品和开源项目来缩短我们构建应用的路径,加速业务的上线 ...
架构设计实践思路：什么是架构，怎么画架构图？
点击蓝色字体"肉眼品世界",关注公众号改变,从一点一滴积累开始作者丨胡斌策划丨小智本文是架构设计实践五部曲系列文章的第一篇,架构与架构图.本文将对架构作深入的阐释,并教你什 ...
我是怎么画架构图的？
技术传播的价值,不仅仅体现在通过商业化产品和开源项目来缩短我们构建应用的路径,加速业务的上线速率,也体现在优秀工程师在工作效率提升.产品性能优化和用户体验改善等经验方面的分享,以提高我们的专业能力. ...
教你画架构图，看一次就会了
当我们想用一张或几张图来描述我们的系统时,是不是经常遇到以下情况: 对着画布无从下手.删了又来? 用一张图描述我的系统,并且让产品.运营.开发都能看明白? 画了一半的图还不清楚受众是谁? 画出来的图到 ...
手把手教你画架构图，看一次就会了！
点击上方"Java基基",选择"设为星标" 做积极的人,而不是积极废人! 源码精品专栏原创 | Java 2020 超神之路,很肝~ 中文详细注释的开源项目 ...

使用VSCode+PlantUML+C4-Model快速画架构图

使用VSCode+PlantUML+C4-Model快速画架构图

使用VSCode+PlantUML+C4-Model快速画架构图相关推荐

最新文章

热门文章