大家好，我是老貓。今天和大家分享一下程序員日常的繪圖思路，以及一些老貓日常使用的繪圖工具。

為什么要畫圖？

我們?cè)谶M(jìn)行系統(tǒng)設(shè)計(jì)的時(shí)候，為了更加具象地呈現(xiàn)系統(tǒng)的輪廓以及各個(gè)組件或者系統(tǒng)之間的關(guān)系和邊界以及工作流程。我們就會(huì)畫邏輯架構(gòu)圖，模塊圖、流程圖、時(shí)序圖等等。

在日常開發(fā)中，軟件設(shè)計(jì)圖是一種非常好的表達(dá)方式，尤其在技術(shù)評(píng)審的時(shí)候，一幅好的設(shè)計(jì)圖可能比干巴巴的文字更能說明問題。正所謂“一圖勝千言”。

軟件工程中的繪圖

不知道大家有沒有聽說過“4+1”模型。其實(shí)在很早的時(shí)候，大概1995年的時(shí)候，Philippe Kruchten在IEEE Software上就發(fā)表了“The 4+1 View Model of Architecture”的論文。這篇論文引起了極大的關(guān)注，最終被RUP采納。

“4+1”咱們來看一下下圖。

4+1

分別解釋一下：

• 場(chǎng)景視圖：主要用于系統(tǒng)參與者和功能之間的關(guān)系，老貓理解一般由用例圖組成。
• 邏輯視圖：描述軟件拆解之后的組件關(guān)系、組件約束和邊界，反映系統(tǒng)整體組成和系統(tǒng)構(gòu)建，通常由組件圖和類圖自稱。
• 物理視圖：描述系統(tǒng)軟件到物理硬件的映射關(guān)系，主要指軟件的部署架構(gòu)圖，這里老貓的理解是可能運(yùn)維人員更需要關(guān)注。
• 處理流程：主要描述軟件組件之間的通信時(shí)序以及輸入輸出，反映系統(tǒng)功能流程和數(shù)據(jù)流程，這里咱們可以用時(shí)序圖以及流程圖來表示。
• 開發(fā)視圖：描述系統(tǒng)的業(yè)務(wù)模塊劃分以及內(nèi)部的組成設(shè)計(jì)，反映系統(tǒng)的開發(fā)實(shí)施過程。

老貓之前寫過一篇文章【新接手一個(gè)業(yè)務(wù)系統(tǒng)，我是這么熟悉的】。這篇文章的寫作思路，主要也是從上面這些點(diǎn)切入去寫的。

開發(fā)人員如何繪制技術(shù)評(píng)審的圖？

工作這么多年之后，老貓發(fā)現(xiàn)，寫代碼的時(shí)候其實(shí)是最安逸的時(shí)候，只要事先方案設(shè)計(jì)得好，流程繪制得精準(zhǔn)，模型設(shè)計(jì)得合理。戴上耳機(jī)寫代碼就是一種享受。因?yàn)閷懘a的時(shí)候只要對(duì)著設(shè)計(jì)稿去擼就好了。

那么咱們?cè)谧黾夹g(shù)方案設(shè)計(jì)的時(shí)候應(yīng)該從哪些點(diǎn)去切入進(jìn)行畫設(shè)計(jì)圖呢？老貓日常的繪圖思路主要是從整體到局部，從概要到細(xì)節(jié)，到最終的模型落地。

例如關(guān)于設(shè)計(jì)支付系統(tǒng)，咱們先把各個(gè)系統(tǒng)之間關(guān)系以及功能模塊梳理清楚，讓參與評(píng)審的人能夠?qū)χЦ断到y(tǒng)的架構(gòu)有個(gè)整體的認(rèn)知。具體如下：

支付整體架構(gòu)

通過上面的的圖，可以表示清楚系統(tǒng)和系統(tǒng)之間的層級(jí)關(guān)系，可以讓評(píng)審人一目了然地知道，你當(dāng)前所設(shè)計(jì)的系統(tǒng)在整個(gè)架構(gòu)領(lǐng)域?qū)儆谀囊粔K。另外的話也能夠讓人清晰地感知每個(gè)系統(tǒng)的主要的功能是什么。

接下來的設(shè)計(jì)就是開始局部設(shè)計(jì)。局部設(shè)計(jì)的話一般需要理清楚功能點(diǎn)，以及整體的業(yè)務(wù)流程。我們挑一個(gè)下單支付的流程，簡(jiǎn)單繪制一下業(yè)務(wù)流程。具體如下：

下單支付交易流程

當(dāng)然上面的電商下單支付交易流程還是比較粗的，看起來還是不夠細(xì)，另外的也沒有達(dá)到對(duì)著流程圖就能進(jìn)行開發(fā)的地步。當(dāng)然上述的流程圖可能并沒有涉及到相關(guān)的泳道，老貓只是粗略地展現(xiàn)一下大概的意思。關(guān)于實(shí)際的場(chǎng)景中，大家還是需要根據(jù)自己的業(yè)務(wù)邏輯進(jìn)行梳理繪制。

再細(xì)化一些，那就是加上泳道，然后體現(xiàn)出不同的系統(tǒng)的內(nèi)部流程。如下圖：

泳道流程

當(dāng)繪制到這里的時(shí)候，其實(shí)咱們距離最終寫代碼還差一點(diǎn)了，那就是細(xì)致的時(shí)序邏輯。還有對(duì)應(yīng)的流程圖中的每個(gè)模型的數(shù)據(jù)庫(kù)詳細(xì)設(shè)計(jì)。再細(xì)致一點(diǎn)到實(shí)際地喚起收銀臺(tái)支付。那么咱們這邊用時(shí)序圖表示出來。這里主要把支付寶的對(duì)接流程展示給大家看一下。

時(shí)序流程

到此，基本業(yè)務(wù)流程差不多已經(jīng)很清楚了，系統(tǒng)之間的交互時(shí)序也比較清晰地表現(xiàn)出來了。那么接下來的話其實(shí)就是模型設(shè)計(jì)了，那么日常模型設(shè)計(jì)的話，當(dāng)然我們可以把每個(gè)模型之間的關(guān)系先表示出來。

數(shù)據(jù)庫(kù)設(shè)計(jì)

當(dāng)然這里的話其實(shí)字段上可以寫粗一點(diǎn)，在細(xì)節(jié)一點(diǎn)的模型完全可以用表格的形式表現(xiàn)出來。可以用word文檔中的表，也可以直接用excel直接寫。不過還有一款數(shù)據(jù)庫(kù)設(shè)計(jì)工具軟件。在下面詳細(xì)和大家介紹。

完成上面這些設(shè)計(jì)，基本就差不多了，頂多的話，可能就是具體的接口設(shè)計(jì)，包括接口的請(qǐng)求入?yún)⒁约胺祷貐?shù)的設(shè)計(jì)，當(dāng)然還有類型的設(shè)計(jì)。這里的話就不展開說了，當(dāng)然關(guān)于接口的設(shè)計(jì)也有不錯(cuò)的工具，咱們還是向下繼續(xù)看。

日常一些繪圖工具推薦

1.UML圖繪制工具

日常工作中，繪制流程圖，老貓主要用兩個(gè)工具，一款是draw.io，另外一款是wps。下面咱們分別來介紹一下。

(1) draw.io

drawio主要如下：

draw.io

這款工具，老貓覺得還是比較輕量的，除了有客戶端之外，還有網(wǎng)頁(yè)版，使用起來相當(dāng)方便，而且用起來也簡(jiǎn)單，也沒有什么學(xué)習(xí)成本。在線繪制的話，鏈接地址：https://app.diagrams.net/

大家可以打開試試。

Draw.io的特點(diǎn)包括：

• 多種圖形元素：提供豐富的圖形元素庫(kù)，包括形狀、符號(hào)、箭頭等，用戶可以根據(jù)需要自由選擇和組合這些元素。
• 豐富的模板庫(kù)：內(nèi)置大量模板，涵蓋多個(gè)領(lǐng)域的常見圖表和圖形，如組織結(jié)構(gòu)圖、UML圖、網(wǎng)絡(luò)拓?fù)鋱D等，便于用戶快速創(chuàng)建符合自己需求的圖形。
• 實(shí)時(shí)協(xié)作：支持多人實(shí)時(shí)協(xié)作，允許用戶邀請(qǐng)他人加入繪圖工作，實(shí)現(xiàn)實(shí)時(shí)編輯和交流，提高團(tuán)隊(duì)協(xié)作效率。
• 云端存儲(chǔ)和同步：文件可以保存在云端，支持與多種云存儲(chǔ)服務(wù)集成，方便文件備份和同步。
• 導(dǎo)入導(dǎo)出多種格式：支持導(dǎo)入和導(dǎo)出多種文件格式，方便用戶在不同平臺(tái)間使用和分享圖表。

(2) wps

WPS，是金山軟件公司自主研發(fā)的一款辦公軟件品牌。相信大家在寫文檔的時(shí)候都用過。wps十分強(qiáng)大，當(dāng)然相對(duì)于draw.io來說的話也更重。但是里面內(nèi)容豐富呀。

wps

wps除了我們?nèi)粘Ｖ赖膐ffice軟件之外，其實(shí)還有繪圖工具也在里面，上圖中我們看到還包括流程圖以及思維導(dǎo)圖等等。說到流程圖的話其實(shí)和draw.io的差別不是很大，但是有個(gè)明顯的優(yōu)勢(shì)是wps內(nèi)部的流程圖模版非常多。大家可以選擇自己喜歡的風(fēng)格，然后在模版上畫出自己風(fēng)格的業(yè)務(wù)流程圖。如下：

模版

如果想用內(nèi)部精美的模版當(dāng)然是要開通會(huì)員的。

2.數(shù)據(jù)庫(kù)設(shè)計(jì)工具

關(guān)于數(shù)據(jù)庫(kù)建模工具，老貓這里自己用的是一款開源的設(shè)計(jì)工具，感覺做的還是相當(dāng)可以的。叫做pdman。官網(wǎng)地址：http://www.pdman.cn/#/ 大家有興趣的話可以了解一下，本人還是非常喜歡這款工具的，兩個(gè)字“好用”。

具體工作臺(tái)的頁(yè)面如下：

數(shù)據(jù)庫(kù)設(shè)計(jì)工具

這款工具強(qiáng)大的點(diǎn)，不但能進(jìn)行基本的數(shù)據(jù)庫(kù)設(shè)計(jì)，同時(shí)也可以逆向生成SQL，甚至直接創(chuàng)建表。一般把表字段寫好，對(duì)應(yīng)的SQL也就出來了，非常省事兒。目前好像支持mysql數(shù)據(jù)庫(kù)以及oracle數(shù)據(jù)庫(kù)生成。

3.接口設(shè)計(jì)工具-APIFOX

聊到接口設(shè)計(jì)的話，大家用得比較多的是什么呢？當(dāng)然最基本的很多朋友會(huì)用到word文檔，寫寫也挺好的。老貓覺得用word其實(shí)挺費(fèi)勁的。比較推薦大家使用：https://apifox.com/

官網(wǎng)是這么介紹的：

Apifox 是接口管理、開發(fā)、測(cè)試全流程集成工具，定位 Postman + Swagger + Mock + JMeter。通過一套系統(tǒng)、一份數(shù)據(jù)，解決多個(gè)系統(tǒng)之間的數(shù)據(jù)同步問題。只要定義好接口文檔，接口調(diào)試、數(shù)據(jù) Mock、接口測(cè)試就可以直接使用，無需再次定義；接口文檔和接口開發(fā)調(diào)試使用同一個(gè)工具，接口調(diào)試完成后即可保證和接口文檔定義完全一致。高效、及時(shí)、準(zhǔn)確！

大家可以感受一下這款工具的強(qiáng)大：

接口設(shè)計(jì)工具

關(guān)于怎么用的，老貓?jiān)诖瞬欢嘧鲑樖觯扑]大家去試試。老貓?jiān)僭趺凑f其功能強(qiáng)大，可能大家也感受不到，所以最好的方式還是自己去試試。