1、前言javascript
在日常的工做中畫一些架構圖,流程圖應該是再正常不過了,畫圖的工具也是根據每一個人的喜愛進行選擇,有的選擇Visio,有的選擇PowerDesigner,還有直接用在線的processOn等。這些工具各有優劣,都能實現畫圖的目標。但也有一些不足,好比:如何跟團隊其餘成員進行共享?目前看只能拷貝源文件或複製連接,如何進行版本控制?由於畫圖也是一個不斷迭代的過程,也會有回到以前歷史版本的狀況。那麼今天要跟你們介紹的這個畫圖軟件,就是基於代碼進行繪製,也就是如今所說的Diagrams as code,可以和代碼同樣放在像Git這樣的版本控制系統中,團隊成員簽出代碼的同時就簽出了這些架構圖,架構圖相似上圖所示,是否是很贊!java
這個圖是採用PlantUML+graphviz+C4 Model繪製的,下面就介紹一下如何在IDEA裏進行集成。git
2、環境集成github
一、前置條件web
必須安裝JDK和IDEA。windows
個人版本是JDK8和IDEA 2019.3.2(Ultimate Edition)微信
二、安裝PlantUML插件架構
在IDEA的File——>Settings...——>Plugins,在插件這裏搜索PlanUML,選擇PlanUML integration進行安裝,安裝完後重啓IDEA使插件生效。app
三、安裝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。注意:這幾個文件中使用了域名,國內訪問不了,由於已經下載到本地,改爲相對路徑便可。
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")
最後生產的圖形以下,和開始的架構圖的樣式同樣,經過這種方式繪製的架構圖,是否是很專業啊。
本文分享自微信公衆號 - DevOps探索者(devopsagile)。
若有侵權,請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」,歡迎正在閱讀的你也加入,一塊兒分享。