又被惊到了！用PlantUML+graphviz+C4 Model画架构图(IDEA版)

1、前言

在日常的工做中画一些架构图，流程图应该是再正常不过了，画图的工具也是根据每一个人的喜爱进行选择，有的选择Visio，有的选择PowerDesigner，还有直接用在线的processOn等。这些工具各有优劣，都能实现画图的目标。但也有一些不足，好比：如何跟团队其余成员进行共享？目前看只能拷贝源文件或复制连接，如何进行版本控制？由于画图也是一个不断迭代的过程，也会有回到以前历史版本的状况。那么今天要跟你们介绍的这个画图软件，就是基于代码进行绘制，也就是如今所说的Diagrams as code，可以和代码同样放在像Git这样的版本控制系统中，团队成员签出代码的同时就签出了这些架构图，架构图相似上图所示，是否是很赞！

这个图是采用PlantUML+graphviz+C4 Model绘制的，下面就介绍一下如何在IDEA里进行集成。

2、环境集成

一、前置条件

必须安装JDK和IDEA。

个人版本是JDK8和IDEA 2019.3.2(Ultimate Edition)

二、安装PlantUML插件

在IDEA的File——>Settings...——>Plugins，在插件这里搜索PlanUML，选择PlanUML integration进行安装，安装完后重启IDEA使插件生效。

三、安装graphviz绘图工具

若是不安装graphviz，那么使用plantUML语法编写的代码不能生成图形，会显示以下报错信息：

①下载https://graphviz.gitlab.io/_pages/Download/windows/graphviz-2.38.zip

②解压到一个文件夹下，好比D:\software\graphviz-2.38

③设置环境变量GRAPHVIZ_DOT

四、IDEA中配置graphviz

在IDEA的plantUML中设置graphviz的执行文件dot.exe

建立一个test.puml文件，验证是否配置成功，内容以下：

从右侧的内容能够看出，PlantUML和graphviz安装成功了。到这一步，可使用PlantUML来绘制一些图形了，好比：时序图，组件图等，以下所示：

这样的图形也能知足咱们的需求，只是看起来不够美观，下面就与C4 Model进行集成。

五、集成C4 Model

要集成C4 Model须要将`C4.puml`、`C4_Context.puml`、 `C4_Container.puml` 和`C4_Component.puml`文件拷贝到代码里，存放到一个可以找到的路径下。这几个文件在官方的代码库里，地址为

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

下面添加一个样例代码，验证是否OK。注意：这几个文件中使用了域名，国内访问不了，由于已经下载到本地，改为相对路径便可。

@startuml Basic Sample!include ../c4/C4_Container.pumlPerson(admin, "Administrator")System_Boundary(c1, "Sample System") { Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines")}System(twitter, "Twitter")
Rel(admin, web_app, "Uses", "HTTPS")Rel(web_app, twitter, "Gets tweets from", "HTTPS")@enduml

最后生产的图形以下，和开始的架构图的样式同样，经过这种方式绘制的架构图，是否是很专业啊。

本文分享自微信公众号 - DevOps探索者（devopsagile）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。