![8a087985b9d2de2fdd67dc6c9cf02c51.png](https://i-blog.csdnimg.cn/blog_migrate/5dfa2c715141ea78aae6e62597ad351b.jpeg)
一、前言
在平常的工作中画一些架构图,流程图应该是再正常不过了,画图的工具也是根据每个人的喜好进行选择,有的选择Visio,有的选择PowerDesigner,还有直接用在线的processOn等。这些工具各有优劣,都能实现画图的目标。但也有一些不足,比如:如何跟团队其他成员进行共享?目前看只能拷贝源文件或复制链接,如何进行版本控制?因为画图也是一个不断迭代的过程,也会有回到之前历史版本的情况。那么今天要跟大家介绍的这个画图软件,就是基于代码进行绘制,也就是现在所说的Diagrams as code,能够和代码一样放在像Git这样的版本控制系统中,团队成员签出代码的同时就签出了这些架构图,架构图类似上图所示,是不是很赞!
这个图是采用PlantUML+C4 Model+graphviz绘制的,下面就介绍一下如何在IDEA里进行集成。
二、环境集成
1、前置条件
必须安装JDK和IDEA。
我的版本是JDK8和IDEA 2019.3.2(Ultimate Edition)
2、安装PlantUML插件
在IDEA的File——>Settings...——>Plugins,在插件这里搜索PlanUML,选择PlanUML integration进行安装,安装完后重启IDEA使插件生效。
![bf928cd621473cb04f2c99b16c0e0ec1.png](https://i-blog.csdnimg.cn/blog_migrate/6f624c88d2af197950add0e7086e968a.jpeg)
安装PlantUML插件
3、安装graphviz绘图工具
如果不安装graphviz,那么使用plantUML语法编写的代码不能生成图形,会显示如下报错信息:
![3c7439874e78c7126ddb57a769cea8be.png](https://i-blog.csdnimg.cn/blog_migrate/0f0a81c98a53fb856f67eb6333e04318.jpeg)
显示异常
①下载https://graphviz.gitlab.io/_pages/Download/windows/graphviz-2.38.zip
②解压到一个文件夹下,比如D:softwaregraphviz-2.38
③设置环境变量GRAPHVIZ_DOT
![ef234df0f60bcd91a54989088491d866.png](https://i-blog.csdnimg.cn/blog_migrate/e62fba22e1517bbc58825dad787368b1.jpeg)
环境变量
4、IDEA中配置graphviz
在IDEA的plantUML中设置graphviz的执行文件dot.exe
![c5ccd225bce7ca626389261031b7de61.png](https://i-blog.csdnimg.cn/blog_migrate/6aa80d67815f20624bdad33f5235c683.jpeg)
配置dot路径
创建一个test.puml文件,验证是否配置成功,内容如下:
![d157daa1a6472552c5c4ebd188ec29a1.png](https://i-blog.csdnimg.cn/blog_migrate/5c2a0ce7c6d7a8896c58697419e50c94.jpeg)
测试成功
从右侧的内容可以看出,PlantUML和graphviz安装成功了。到这一步,可以使用PlantUML来绘制一些图形了,比如:时序图,组件图等,如下所示:
![06c4846aad611bbb4ab3b660858b2036.png](https://i-blog.csdnimg.cn/blog_migrate/8b1bb67222abf139a5cad91f4a72a1e7.jpeg)
plantUML原生图
这样的图形也能满足我们的需求,只是看起来不够美观,下面就与C4 Model进行集成。
5、集成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
最后生产的图形如下,和开始的架构图的样式一样,通过这种方式绘制的架构图,是不是很专业啊。
![c370b1b42cbfd26a895a9b841e3862a9.png](https://i-blog.csdnimg.cn/blog_migrate/aa52fa676063a82eb3a46425671d9430.jpeg)
C4 Model版的架构图