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

但是，接下來我會(huì)告訴你如何自動(dòng)化一些無聊的鼠標(biāo)點(diǎn)擊;）

避免從一開始就犯錯(cuò)

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

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

訣竅便是在做的時(shí)候不斷審視它哪個(gè)地方不對(duì)，這樣一來便不太可能做的這么糟了。

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

"光紙上談兵是沒用的，長(zhǎng)期的戰(zhàn)略規(guī)劃才是無價(jià)的。"

― Winston Churchill

行動(dòng)起來！

假設(shè)我們有一個(gè)簡(jiǎn)單的社交應(yīng)用。當(dāng)然，這是一個(gè)很簡(jiǎn)單的設(shè)定，但是你可以注意到這里面存在許多的關(guān)聯(lián)關(guān)系。

客戶端：前端應(yīng)用和瀏覽器擴(kuò)展。

API網(wǎng)管：認(rèn)證API和主服務(wù)API。

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

我花了相當(dāng)長(zhǎng)的時(shí)間來排列方塊，拖放箭頭還有調(diào)整。而這只是因?yàn)槲蚁胍砸粋€(gè)更可讀的方式來對(duì)齊它們。

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

和 Graphviz 結(jié)緣

我從Terraform獲得了靈感 —— 一個(gè)創(chuàng)建和維護(hù)生產(chǎn)環(huán)境基礎(chǔ)設(shè)施的工具。它支持配置任意和基礎(chǔ)設(shè)施相關(guān)的服務(wù)，這里面包含了從AWS EC2的實(shí)例到來自于50個(gè)云廠商提供的集群和負(fù)載均衡。它還提供了一個(gè)有趣的 terraform graph 命令，可以根據(jù)現(xiàn)有配置生成一個(gè)可視化的圖表展現(xiàn)。

‘terraform graph’命令的示例輸出

因此我決定采用相同的技巧，但是針對(duì)的是一個(gè)更高層面的微服務(wù)架構(gòu)。以下是一個(gè)用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};

}

} 

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

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

通過執(zhí)行上述這行簡(jiǎn)單代碼，兩分鐘內(nèi)你便可以得到這樣一個(gè)令人驚嘆的輸出結(jié)果！

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

在微服務(wù)之間添加一個(gè)新的依賴的想法實(shí)現(xiàn)起來從未如此簡(jiǎn)單。我需要做的只是添加一行新的代碼，隨即 Graphviz 會(huì)很好地將它們組織在一起。

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

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

這并不是最優(yōu)的顏色布局，但是你已經(jīng)知道可以這樣做了 ;)

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

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

小結(jié)

我在給一張微服務(wù)架構(gòu)圖頻繁添加修改時(shí)遇到了問題。每一次變更都要用箭頭手工修補(bǔ)。如今我可以放心實(shí)驗(yàn)，看看新的微服務(wù)是如何適配我的系統(tǒng)。當(dāng)然，你還可以做的更好，將它放到版本控制系統(tǒng)里，這樣一來便可以得到架構(gòu)圖的修改變更歷史！

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

可視化的設(shè)計(jì)會(huì)使得檢查和調(diào)試變得更容易。

― Unix的基本哲學(xué)