我一直在用 draw.io做一些和UML流程圖，圖表或者曲線圖相關的事情。它在豐富的功能和用戶的手工控制方面做出了合理的權衡。

但是，接下來我會告訴你如何自動化一些無聊的鼠標點擊;）

避免從一開始就犯錯

 

Daniel Woods的 “Microservices: The Right Way” 演講里其中一張幻燈片

如果它不是這樣的話事情也不會變得這么有趣。事實上，這里最好能有一張更清晰地展現組件之間關系和職責的圖片。不然的話最終結果就是像上面看到的這樣 ;)

訣竅便是在做的時候不斷審視它哪個地方不對，這樣一來便不太可能做的這么糟了。

在做圖的時候 —— 你也在同時給自己一個整體的感覺，它們將會怎么交互，問題域是什么，上下文，邊界，等等。

"光紙上談兵是沒用的，長期的戰略規劃才是無價的。"

― Winston Churchill

行動起來！

假設我們有一個簡單的社交應用。當然，這是一個很簡單的設定，但是你可以注意到這里面存在許多的關聯關系。

 

客戶端：前端應用和瀏覽器擴展。

API網管：認證API和主服務API。

微服務：照片，圖表還有好友這些微服務。

我花了相當長的時間來排列方塊，拖放箭頭還有調整。而這只是因為我想要以一個更可讀的方式來對齊它們。

你可以想象排列50個這樣的方塊有多無聊嗎？100個呢？然后我如果再刪除一個？我敢打賭你會放棄這件事情，然后選擇回來繼續碼代碼。

和 Graphviz 結緣

我從Terraform獲得了靈感 —— 一個創建和維護生產環境基礎設施的工具。它支持配置任意和基礎設施相關的服務，這里面包含了從AWS EC2的實例到來自于50個云廠商提供的集群和負載均衡。它還提供了一個有趣的 terraform graph 命令，可以根據現有配置生成一個可視化的圖表展現。

 

‘terraform graph’命令的示例輸出

因此我決定采用相同的技巧，但是針對的是一個更高層面的微服務架構。以下是一個用DOT編寫的Graphviz配置。

digraph architecture {

rankdir=LR;



subgraph client_side_apps {

  front_end -> {auth_api, my_app_api};

  extension -> {auth_api, my_app_api};



  {rank=same; front_end, extension, auth_api};

}



subgraph api_gateways {

  my_app_api -> {photos_ms, chats_ms, friends_ms};

}



subgraph microservices {

  photos_ms -> {database};

  chats_ms -> {database, cache};

  friends_ms -> {database, facebook_api};

}

} 

你只需要將它渲染成一個.png文件即可。你可以使用在線編輯器或者直接在機器上渲染。為了不弄臟系統，我為此創建了一個Docker鏡像：

cat file.dot | docker container run --rm -i vladgolubev/dot2png > file.png

通過執行上述這行簡單代碼，兩分鐘內你便可以得到這樣一個令人驚嘆的輸出結果！

提示：你可以將代碼復制粘貼到一個在線的編輯器： http://dreampuf.github.io/GraphvizOnline/

在微服務之間添加一個新的依賴的想法實現起來從未如此簡單。我需要做的只是添加一行新的代碼，隨即 Graphviz 會很好地將它們組織在一起。

作為最后的點睛之筆，我喜歡添加一些顏色。因此你立馬可以看到下面的效果：

• 綠色 — node.js
• 紅色 — api gateway
• 黃色 — front-end
• 藍色 — storage，database
• 灰色 — 3rd-party API

這并不是最優的顏色布局，但是你已經知道可以這樣做了 ;)

相信我，有大量圖表的情況也很容易做到這一點。

全部代碼放在： https://gist.github.com/vladgo ... 70882

小結

我在給一張微服務架構圖頻繁添加修改時遇到了問題。每一次變更都要用箭頭手工修補。如今我可以放心實驗，看看新的微服務是如何適配我的系統。當然，你還可以做的更好，將它放到版本控制系統里，這樣一來便可以得到架構圖的修改變更歷史！

但是這取決于你。選擇一款最合適的工具吧。Google搜索[微服務可視化]( https://www.google.com/search?q=microservice visualization)的方案，你將會被一大票商業解決方案轟炸的。

可視化的設計會使得檢查和調試變得更容易。

― Unix的基本哲學