又被驚到了！用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源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。