老實(shí)說我第一次接觸 diagram-design 這個(gè)詞時(shí)以為它只是把圖畫得好看一點(diǎn)。后來在一次跨平臺(tái)系統(tǒng)方案評(píng)審會(huì)上我拿著自己花了一下午排版的架構(gòu)圖被連問了三遍這條虛線到底表示什么這兩個(gè)模塊之間的箭頭誰先發(fā)起上面的網(wǎng)關(guān)區(qū)域包不包括外部依賴場(chǎng)面一度非常尷尬。也就是從那天起我意識(shí)到 diagram 設(shè)計(jì)的核心從來不是美化而是建模。這篇文章我想把過去幾年在真實(shí)項(xiàng)目里沉淀下來的 Diagram 設(shè)計(jì)方法完整講一遍適合三類人看畫架構(gòu)圖和技術(shù)方案圖的開發(fā)、寫流程圖和時(shí)序圖的產(chǎn)品或運(yùn)營、以及所有想把畫圖變成可持續(xù)維護(hù)資產(chǎn)的人。我會(huì)從圖的本質(zhì)拆解、心智模型搭建、體檢方法、工具選型、協(xié)作生命周期和典型翻車案例這幾個(gè)方向展開全部是實(shí)操驗(yàn)證過的東西。1. 先把好不好看放下Diagram 的核心是建模不是畫畫1.1 我為什么從畫圖工具用戶轉(zhuǎn)變成Diagram設(shè)計(jì)者最開始的兩年我畫圖的方式很簡(jiǎn)單打開繪圖工具用鼠標(biāo)拖一堆矩形框再拉幾條帶箭頭的線連起來最后花大量時(shí)間調(diào)對(duì)齊、配色、陰影導(dǎo)出 PNG 丟進(jìn)文檔。那時(shí)候我自認(rèn)為畫得挺快直到有一次給某跨平臺(tái)系統(tǒng)補(bǔ)畫支付鏈路的架構(gòu)圖需求方每隔一天就讓我改一個(gè)分支我連續(xù)重畫了五個(gè)版本后來甚至找不到最新版是哪張圖。問題不是繪圖工具的熟練度而是我從一開始就沒把圖當(dāng)成需要持續(xù)演進(jìn)的模型。當(dāng)我把一張圖定義為一次性溝通載體時(shí)圖的生命周期天然只有兩三天。一旦需求變化、角色調(diào)整、異常分支補(bǔ)全整張圖就散架只能推倒重來。而模型思維是另一套玩法先定義圖里有哪些對(duì)象、對(duì)象之間有哪些關(guān)系、邊界在哪、時(shí)序是什么然后再?zèng)Q定怎么畫。圖的樣式只是一層薄薄的外衣里面那層骨架才是真正值錢的東西。這個(gè)轉(zhuǎn)變直接改變了我的工作習(xí)慣現(xiàn)在畫任何一張圖我都會(huì)先在草稿上回答幾個(gè)問題——這張圖給誰看看完之后他需要做什么決定圖里有沒有隱藏假設(shè)這些信息是否可以被修改和追溯如果這些問題答不上來我是不會(huì)打開繪圖軟件的。1.2 一張圖的信息完整性節(jié)點(diǎn)、關(guān)系、邊界、時(shí)序一個(gè)都不能少我過手過大量需求部門、研發(fā)部門互相傳閱的 Diagram發(fā)現(xiàn)信息殘缺才是最常見的病根不是畫得丑。殘缺通常長(zhǎng)這樣圖里確實(shí)有框、有箭頭但讀者看完之后仍然不知道誰先啟動(dòng)、系統(tǒng)邊界在哪、異常情況怎么處理。對(duì)比一下我整理的一個(gè)經(jīng)驗(yàn)表格信息維度殘缺版表現(xiàn)完整版表現(xiàn)節(jié)點(diǎn)只有服務(wù)A服務(wù)B這類籠統(tǒng)命名每個(gè)節(jié)點(diǎn)說明類型系統(tǒng)、模塊、角色、外部依賴關(guān)系只有箭頭分不清調(diào)用、數(shù)據(jù)流還是事件邊上標(biāo)注關(guān)系類型必要時(shí)寫觸發(fā)條件邊界所有東西畫在一個(gè)大框里內(nèi)外不分明確區(qū)分系統(tǒng)內(nèi)、系統(tǒng)外、第三方依賴時(shí)序看不出先后步驟更像存在關(guān)系圖有清晰主鏈路或說明這是靜態(tài)關(guān)系圖一個(gè)很直接的驗(yàn)證方法把你畫好的圖擋住標(biāo)題和說明文字拿給一個(gè)完全不知道上下文的人看讓他復(fù)述這張圖在表達(dá)什么。如果他只能說出有幾個(gè)方塊和幾條線說明信息完整度不夠。圖作為一個(gè)可視化接口最基本的要求是讓讀者看到名詞節(jié)點(diǎn)、動(dòng)詞關(guān)系、邊界容器和順序時(shí)序四者缺一不可。四條要素里時(shí)序最容易被忽略大家總默認(rèn)流程自然是從左往右讀可一旦圖里有跨層調(diào)用、異步回調(diào)、失敗重試這種默認(rèn)就失效了。2. 動(dòng)手前先搭心智模型用對(duì)象思維代替線條思維2.1 一切Diagram都能拆成四類基本語法元素很多人畫圖時(shí)腦子想的只有兩件事這里要畫一個(gè)框那里要拉一條線。這個(gè)習(xí)慣會(huì)讓圖越畫越亂。我后來總結(jié)了一個(gè)更穩(wěn)固的拆解方式所有 Diagram 最終都能被翻譯成四種語法元素——對(duì)象、關(guān)系、容器、注釋對(duì)應(yīng)到閱讀視角分別是名詞、動(dòng)詞、限定詞和潛規(guī)則。對(duì)象就是他看到的系統(tǒng)里有哪些實(shí)體比如用戶、網(wǎng)關(guān)、訂單服務(wù)、數(shù)據(jù)庫。關(guān)系就是實(shí)體之間的動(dòng)詞調(diào)用、訂閱、寫入、通知、依賴都是動(dòng)詞。容器負(fù)責(zé)解釋這件事發(fā)生在什么邊界里泳道、子圖、虛線分區(qū)都屬于容器。注釋則承擔(dān)了圖面上不方便用節(jié)點(diǎn)和關(guān)系表達(dá)的約束條件例如超時(shí)時(shí)間 30 秒失敗后進(jìn)入重試隊(duì)列。為什么要這樣拆因?yàn)樗屛以诋媹D時(shí)有了強(qiáng)制檢查項(xiàng)。畫完對(duì)象要數(shù)數(shù)動(dòng)詞有沒有標(biāo)注畫完關(guān)系要檢查所有箭頭是不是都有方向畫完流程要確認(rèn)每個(gè)節(jié)點(diǎn)都有進(jìn)出邊而不是只畫到一半。你可以用一個(gè)生活化的類比來理解節(jié)點(diǎn)是名詞連線是動(dòng)詞泳道是段落注釋是腳注。一篇合格的短文不會(huì)只有名詞堆砌你的圖也一樣。2.2 泳道和群組多層上下文下的隱藏主角我在評(píng)審中見過太多箭頭大戰(zhàn)的流程示意圖幾百個(gè)箭頭纏在一起根本分不清誰在做什么。這時(shí)候只要把泳道加上去很多問題立刻消失。泳道的本質(zhì)是給每個(gè)節(jié)點(diǎn)分配歸屬上下文讓讀者一眼知道這個(gè)動(dòng)作發(fā)生在誰的地盤上。泳道怎么畫有幾個(gè)經(jīng)驗(yàn)性的判斷規(guī)則如果圖要講的是人、系統(tǒng)、外部平臺(tái)之間的協(xié)作按角色畫泳道最合適如果圖要講的是數(shù)據(jù)在子系統(tǒng)內(nèi)部的流轉(zhuǎn)按子系統(tǒng)或?qū)蛹?jí)畫分區(qū)更合適如果圖里同時(shí)存在人和技術(shù)組件不要混在一個(gè)泳道體系里要么全按角色分要么全按系統(tǒng)分否則兩層上下文會(huì)互相打架。群組的另一個(gè)作用是控制嵌套深度。我的原則是群組嵌套最多兩層外層是系統(tǒng)或角色內(nèi)層是子模塊或狀態(tài)區(qū)再往下的細(xì)節(jié)應(yīng)該拆到子圖里而不是無限往里套。無限套娃的圖看起來很高深實(shí)際閱讀成本極高讀者每深入一層就要重新記住一次全局位置大腦很快會(huì)過載。2.3 用邊的關(guān)系屬性解決線太多的經(jīng)典難題當(dāng)一個(gè)圖里連接線超過 20 條畫面就開始失控但我發(fā)現(xiàn)真正的問題往往不是線太多而是每根線的關(guān)系語義沒有區(qū)分。兩個(gè)對(duì)象之間可能同時(shí)存在同步調(diào)用、異步事件、數(shù)據(jù)上報(bào)三種關(guān)系如果全部畫成同一種實(shí)線讀者必須靠猜才知道哪條是主鏈路。解決辦法是給邊建立屬性字典。我在團(tuán)隊(duì)里推行過一個(gè)很簡(jiǎn)單的線型約定實(shí)線表示強(qiáng)依賴同步調(diào)用虛線表示異步或可選路徑點(diǎn)線表示數(shù)據(jù)流或事件流。顏色不參與表達(dá)關(guān)系類型因?yàn)榇蛴〕珊诎谆蛘吲龅缴ぷx者時(shí)會(huì)直接失效顏色只用來標(biāo)記圖的狀態(tài)比如紅色表示異常路徑、綠色表示正常路徑、灰色表示已下線。每根線上最多寫一個(gè)標(biāo)簽只寫觸發(fā)條件、關(guān)鍵參數(shù)或結(jié)果狀態(tài)不要同時(shí)堆三四個(gè)信息片段線旁的字越多讀者越容易失去閱讀節(jié)奏。這個(gè)約定看起來簡(jiǎn)單但讓圖的表達(dá)能力上了一個(gè)臺(tái)階。我在復(fù)盤時(shí)經(jīng)常發(fā)現(xiàn)很多圖之所以看著亂問題不在布局而是邊上承載的信息沒有分類全部混在一起。3. 我驗(yàn)證過的一套三層體檢法改圖不再看緣分3.1 語義層讀圖人不產(chǎn)生歧義我很少看第一版 Diagram 就滿意通常都會(huì)進(jìn)入一輪修改循環(huán)。這個(gè)循環(huán)里我用的是一套三層體檢法先查語義、再查結(jié)構(gòu)、最后查視覺。語義層要解決的問題只有一個(gè)——每個(gè)元素是否表意準(zhǔn)確。自檢時(shí)我會(huì)挨個(gè)問每個(gè)節(jié)點(diǎn)能不能不加解釋就看懂箭頭方向是依賴方向還是調(diào)用方向有沒有因?yàn)槌驅(qū)е伦x者誤判調(diào)用鏈容器內(nèi)外是否區(qū)分了屬于和連接的區(qū)別如果節(jié)點(diǎn)叫訂單中心但外面還畫了一個(gè)訂單流程是不是會(huì)讓人誤解這些歧義只有在變成文字答案時(shí)才能暴露出來。最有效的做法是把圖的所有標(biāo)注單獨(dú)列一遍讀出來像不像一個(gè)通順的故事。我見過一張把用戶和客戶混用的業(yè)務(wù)圖全圖上下定義不一致讀者看了半天以為有兩個(gè)人其實(shí)是同一個(gè)角色的兩種叫法。3.2 結(jié)構(gòu)層布局、層級(jí)、流向一致語義沒問題之后才開始看結(jié)構(gòu)。結(jié)構(gòu)層的核心訴求是讀圖順序與真實(shí)執(zhí)行順序一致。主線最好遵循固定的閱讀方向絕大多數(shù)情況是自上而下或從左到右不要一會(huì)兒從左往右、一會(huì)兒從右往左。支線可以脫離主線方向但分叉點(diǎn)和匯合點(diǎn)要盡量靠近主線的入口和出口讓讀者能在心里建立回到主線的路徑。我還有一個(gè)非常實(shí)用的結(jié)構(gòu)檢查項(xiàng)圖里所有長(zhǎng)距離連線是不是都必要。若一根線從畫面最左上角穿到最右下角通常說明相關(guān)的兩個(gè)節(jié)點(diǎn)布局距離不對(duì)或者它們之間本來就不該直接連中間可能缺了一個(gè)中間節(jié)點(diǎn)。調(diào)整布局時(shí)優(yōu)先把關(guān)系緊密的節(jié)點(diǎn)就近擺放再把全局連線的數(shù)量壓到最低畫面一下子就干凈了。3.3 呈現(xiàn)層視覺減噪與對(duì)比強(qiáng)化最后處理的是顏色、字號(hào)、間距、線寬。呈現(xiàn)層的核心不是好看而是減少視覺噪聲。一個(gè)我反復(fù)使用的標(biāo)準(zhǔn)是全圖語義色不超過五種同一色系的不同深淺不算額外顏色但飽和度過高、互相沖突的彩色要果斷砍掉。陰影、圓角、描邊風(fēng)格全圖必須統(tǒng)一不要每個(gè)節(jié)點(diǎn)各用一套樣式那是花哨不是設(shè)計(jì)。舉個(gè)例子有一張某后臺(tái)系統(tǒng)的調(diào)用關(guān)系圖一開始每個(gè)子系統(tǒng)都用不同漸變底色看著很豐富可團(tuán)隊(duì)交流時(shí)發(fā)現(xiàn)根本記不住哪個(gè)顏色對(duì)應(yīng)哪個(gè)系統(tǒng)。后來我把顏色收斂成四種核心服務(wù)用藍(lán)、基礎(chǔ)設(shè)施用灰、外部依賴用橙、異常流程用紅。視覺負(fù)擔(dān)瞬間降下來大家交流時(shí)甚至可以直接說藍(lán)色節(jié)點(diǎn)那條鏈路。呈現(xiàn)層還有一個(gè)容易被忽視的點(diǎn)字體層級(jí)。圖的標(biāo)題、分組名、節(jié)點(diǎn)名、邊標(biāo)注的字號(hào)要梯度分明不要讓邊標(biāo)注和節(jié)點(diǎn)名一樣大否則讀者分不清主次。3.4 體檢后進(jìn)行動(dòng)線測(cè)試三層體檢完之后我還會(huì)做一個(gè)特殊測(cè)試叫動(dòng)線測(cè)試先把圖縮到剛好能看全貌的大小盯著圖看五秒然后閉眼回憶結(jié)構(gòu)再睜眼看第二次。如果第二次睜眼后視線能被主線帶著走說明動(dòng)線合格如果視線在某個(gè)區(qū)域反復(fù)游離說明那個(gè)區(qū)域的層級(jí)或連線有問題。更硬核的方法是找一個(gè)新同事讓他看著圖講一遍我在旁邊記錄他每次停頓和皺眉的位置。這些卡殼點(diǎn)就是圖的語義斷層。這個(gè)方法不復(fù)雜卻非常有效因?yàn)楫媹D的人太熟悉自己的圖了很多理解跳躍在自己眼中是順理成章只有外人才能戳破。4. 工具選型的真實(shí)分界線穩(wěn)定交付場(chǎng)景vs快速探索場(chǎng)景4.1 快速探索期白板類工具怎么用不失控工具沒有絕對(duì)的優(yōu)劣只有場(chǎng)景是否匹配。項(xiàng)目早期、方案還沒有定型時(shí)最適合的是無限畫布的白板類工具隨時(shí)畫、隨時(shí)改、隨時(shí)擦參會(huì)的人可以一起上手。但這類工具有一個(gè)被低估的副作用一張白板畫著畫著就變成了垃圾場(chǎng)節(jié)點(diǎn)到處漂箭頭往多個(gè)方向長(zhǎng)最后沒人能看出重點(diǎn)。我總結(jié)出三個(gè)控制白板失控的約束第一打開白板的第一件事是把討論主題用最大字號(hào)釘在左上角之后每畫一塊內(nèi)容都回到主題判斷它和主題是什么關(guān)系第二新出現(xiàn)的內(nèi)容先問自己這是已有的節(jié)點(diǎn)還是新節(jié)點(diǎn)是已有節(jié)點(diǎn)就繼續(xù)連線是新節(jié)點(diǎn)再創(chuàng)建不要隨手復(fù)制一個(gè)外觀相近的框第三單獨(dú)留一塊待定區(qū)把有爭(zhēng)議的備選方案、臨時(shí)想法扔進(jìn)去別讓它們混進(jìn)主線圖區(qū)。做完這三件事白板即使畫得很潦草結(jié)構(gòu)上也是清晰的。4.2 穩(wěn)定交付期文本化繪圖和版本管理閉環(huán)一旦方案進(jìn)入穩(wěn)定交付階段我強(qiáng)烈建議切換到文本化繪圖方案。這類方案用文本描述節(jié)點(diǎn)、連線和分組關(guān)系讓繪圖程序自動(dòng)渲染成圖好處無可替代圖可以和代碼一起放進(jìn)倉庫每次改動(dòng)都產(chǎn)生 diff評(píng)審時(shí)可以精確看到改了哪根線、動(dòng)了哪個(gè)節(jié)點(diǎn)而不是在兩張 PNG 之間反復(fù)對(duì)比。我的習(xí)慣是把圖文件放在文檔目錄下命名帶上主題和版本前綴例如下單鏈路-v2. 每次需求變更先改文本描述再生成預(yù)覽通過后再提交評(píng)審。因?yàn)?diff 非常明確評(píng)審效率極高。這套玩法的缺點(diǎn)是自由排版能力弱不太適合自由發(fā)揮的創(chuàng)意草圖所以我的選型規(guī)律是需要長(zhǎng)期維護(hù)的架構(gòu)圖、狀態(tài)圖、時(shí)序圖全部用文本化方案臨時(shí)討論、給客戶演示用的視覺驚艷圖才用拖拽式繪圖工具精修。4.3 什么時(shí)候該從一人一圖切換到多人同圖團(tuán)隊(duì)里最常見的協(xié)作問題是一人改圖全員傳閱最后誰都不知道手里的圖是不是最新版。我判斷是否需要切換成多人實(shí)時(shí)協(xié)作的標(biāo)志很簡(jiǎn)單單張圖的有效節(jié)點(diǎn)超過 10 個(gè)并且有兩個(gè)人以上頻繁在同一周期內(nèi)修改這張圖。滿足這兩個(gè)條件就不要再發(fā)文件了直接放到支持多人編輯的共享畫布或共享文檔里。但多人協(xié)作也容易出問題最大的坑是缺乏分區(qū)。大家都在中央?yún)^(qū)域畫線網(wǎng)互相交叉。正確的做法是開工前先劃分區(qū)域指定每個(gè)區(qū)域的負(fù)責(zé)人用明顯顏色或標(biāo)題把區(qū)隔畫出來然后約定別人的區(qū)域只能看不能跑進(jìn)去亂加節(jié)點(diǎn)。多人同圖能放大協(xié)作效率也能放大混亂約束永遠(yuǎn)要在動(dòng)手之前定下來。5. 從交付圖片到維護(hù)模型Diagram在團(tuán)隊(duì)協(xié)作里的生命周期5.1 評(píng)審時(shí)重點(diǎn)問圖的四個(gè)問題圖一旦進(jìn)入評(píng)審環(huán)節(jié)就不是畫得好不好看的問題而是這張圖能不能支撐決策。我在評(píng)審 Diagram 時(shí)固定會(huì)問四個(gè)問題你可以直接拿去用這張圖的主要讀者是誰他們的專業(yè)背景和圖的抽象層級(jí)是否匹配讀者看完圖后需要做哪個(gè)決定圖里有信息支持他做決定嗎圖里有沒有隱藏假設(shè)比如默認(rèn)某外部服務(wù)永遠(yuǎn)可用這類沒寫出來的前提明天需求發(fā)生了變化改這張圖需要?jiǎng)佣嗌賯€(gè)地方改動(dòng)影響面有多大這四個(gè)問題能迅速把展示圖和決策圖區(qū)分開。展示圖追求完整和美觀決策圖追求重點(diǎn)突出和結(jié)論清晰。很多 Diagram 之所以在評(píng)審會(huì)上被反復(fù)挑戰(zhàn)不是因?yàn)樗嬪e(cuò)了而是因?yàn)樗鼪]有回答任何人的具體問題。我在會(huì)議開始前會(huì)把四個(gè)問題投影出來引導(dǎo)大家按這個(gè)框架提問討論效率明顯提升。5.2 用版本記錄倒逼設(shè)計(jì)變更記錄把圖變成文本化方案之后我額外建立了一個(gè)小規(guī)范每次 Diagram 的大版本變更必須在文件頭部寫一段變更說明記錄為什么改、從什么改成什么、影響誰。例如把同步回調(diào)改為事件訂閱原因是第三方接口高峰期頻繁超時(shí)這種說明價(jià)值極高。三個(gè)月后再回來翻圖你不僅能看清當(dāng)下的系統(tǒng)結(jié)構(gòu)還能看到設(shè)計(jì)選擇的演變歷史。相比翻聊天記錄去猜某個(gè)決定是怎么來的直接看圖文件的變更日志要靠譜得多。如果團(tuán)隊(duì)喜歡用文檔系統(tǒng)也可以把變更說明寫進(jìn)文檔評(píng)論里但一定要與圖本身綁定不能單獨(dú)散落在群聊里。Diagram 從靜態(tài)圖片變成帶歷史的模型就是從這段說明文字開始的。5.3 圖與文檔、代碼之間的同步節(jié)奏最后要解決的是保鮮期問題。很多團(tuán)隊(duì)的圖之所以慢慢沒人看就是因?yàn)閳D里反映的還是半年前的狀態(tài)大家默認(rèn)它已過期。我給不同類型圖定過不同的更新節(jié)奏供你參考圖類型更新時(shí)機(jī)保存位置架構(gòu)總覽圖里程碑評(píng)審時(shí)更新不必每次提交代碼都動(dòng)文檔庫或代碼倉庫存文本源文件業(yè)務(wù)流程圖流程變化當(dāng)周更新過期視為失效與相關(guān) PR 或需求文檔綁定時(shí)序圖/接口交互圖只用于設(shè)計(jì)階段代碼落地后不強(qiáng)制維護(hù)存放在設(shè)計(jì)文檔內(nèi)這里的關(guān)鍵不是什么時(shí)候不更新而是為什么這張圖仍然有價(jià)值。沒有保鮮期的圖會(huì)逐漸變成團(tuán)隊(duì)里的噪音最終被大家無視。我最常做的一個(gè)動(dòng)作是打開一張三個(gè)月沒人動(dòng)過的圖詢問團(tuán)隊(duì)它是否仍然準(zhǔn)確如果沒人能回答就把它標(biāo)記為待更新或干脆移到歸檔區(qū)。寧缺毋濫是維護(hù)圖資產(chǎn)最重要的原則。6. 翻車現(xiàn)場(chǎng)復(fù)盤我見過最典型的五種爛圖及挽救方案6.1 塞進(jìn)200個(gè)節(jié)點(diǎn)還想一屏看清有一種圖打開后密密麻麻全是小塊幾乎每個(gè)像素都被信息占滿縮放鼠標(biāo)滾輪好幾圈才找到入口。這類圖的通病是想用一張圖表達(dá)所有層次的信息結(jié)果哪個(gè)層次都沒表達(dá)到位。挽救方案只有一個(gè)拆圖。先把原始圖按維度拆成總覽圖局部詳圖索引圖三層?？傆[圖只放一級(jí)節(jié)點(diǎn)讓讀者 30 秒內(nèi)理解全貌局部詳圖負(fù)責(zé)展開某個(gè)子系統(tǒng)的內(nèi)部關(guān)系索引圖標(biāo)明每張局部圖在總覽圖中的位置。單張 Diagram 的有效節(jié)點(diǎn)控制在 20 到 30 個(gè)以內(nèi)超過就繼續(xù)往下拆。拆圖最大的阻力來自畫圖人的心理我這張圖是全的拆開就不完整了。但讀者需要的是分層理解一次性灌入只會(huì)勸退。6.2 箭頭滿天飛但沒有一條表達(dá)清楚為什么還有一種圖節(jié)點(diǎn)不超過二十個(gè)可箭頭至少畫了七八十條每條都掛著不同方向的曲線看得人頭暈。細(xì)看才發(fā)現(xiàn)大部分線上都沒有任何標(biāo)注讀者根本不知道這條線代表調(diào)用了還是引用了還是屬于。這類圖的修復(fù)不能只靠刪線而是要給邊補(bǔ)語義。我習(xí)慣把每個(gè)節(jié)點(diǎn)的出入邊先列成清單區(qū)分哪些是核心依賴、哪些是可選依賴、哪些是數(shù)據(jù)引用。然后只把必要的邊畫在圖上每根邊都帶上動(dòng)詞或觸發(fā)條件如果兩個(gè)節(jié)點(diǎn)之間關(guān)系太多就用一條總線連接再在旁邊用注釋展開關(guān)系明細(xì)。箭頭不是越多越嚴(yán)謹(jǐn)恰恰相反連接關(guān)系越克制閱讀速度越快。6.3 美化過度導(dǎo)致語義丟失我見過一張用 3D 立體塊加漸變背景畫的架構(gòu)圖單獨(dú)看很炫結(jié)果投影到會(huì)議室大屏上暗部細(xì)節(jié)全糊掉了根本看不清文字。還有一張圖為了美觀把所有節(jié)點(diǎn)都做成了圓角膠囊形連狀態(tài)判斷也看不出區(qū)別語義識(shí)別完全靠猜。圖形設(shè)計(jì)里有一條原則結(jié)構(gòu)用形狀狀態(tài)用顏色層級(jí)用大小。畫 Diagram 時(shí)同樣適用。節(jié)點(diǎn)類型用形狀區(qū)分矩形表示系統(tǒng)模塊圓角矩形表示角色或流程步驟菱形表示判斷圓柱表示存儲(chǔ)。顏色只負(fù)責(zé)狀態(tài)或優(yōu)先級(jí)不承擔(dān)類型區(qū)分。背景裝飾、貼圖、紋理一律不加。最實(shí)用的做法是先用純線框畫出完整結(jié)構(gòu)全部通過后再統(tǒng)一上色不要邊畫邊配顏色否則注意力會(huì)被視覺效果帶走。6.4 只畫happy path異常分支全靠腦補(bǔ)業(yè)務(wù)方拿來的流程圖十張有八張只畫了成功路徑用戶取消、超時(shí)、重復(fù)提交、第三方異常、數(shù)據(jù)校驗(yàn)失敗這些分支完全沒有體現(xiàn)。評(píng)審時(shí)一提異常畫圖的人開始口頭補(bǔ)充可這些補(bǔ)充沒落在圖上代碼實(shí)現(xiàn)時(shí)就會(huì)被遺漏。修復(fù)方法很直接在圖的底部或右側(cè)專門留一個(gè)異常區(qū)泳道把每個(gè)交互節(jié)點(diǎn)的失敗出口全部畫進(jìn)去至少覆蓋超時(shí)、拒絕、系統(tǒng)異常三類。如果節(jié)點(diǎn)太多畫不下可以在節(jié)點(diǎn)下方加注釋標(biāo)記失敗出口見異常區(qū)。異常分支不需要畫得多精美但它必須在圖上存在。我也同意有些圖為了保持簡(jiǎn)潔可以省略次要異常但核心鏈路的每個(gè)關(guān)鍵節(jié)點(diǎn)至少要有一個(gè)失敗出口這是 Diagram 真實(shí)性的底線。6.5 每次改動(dòng)都推倒重畫沒人能維護(hù)最后一種翻車不是某一張圖的問題而是整套維護(hù)方式出了病每來一個(gè)新需求畫圖的人就重開一張新圖舊圖全部廢棄。過了幾個(gè)月圖庫里躺著一堆最終版最終版2真的最終版團(tuán)隊(duì)再也分不清哪個(gè)有效只能靠記憶。我前面提到的文本化方案其實(shí)天然能避免這種問題因?yàn)槊看胃膭?dòng)的 diff 都在根本不需要新建文件名。如果還在用拖拽式工具則要強(qiáng)制自己按模塊而不是按整圖來改主圖只放穩(wěn)定的結(jié)構(gòu)骨架頻繁變化的部分做成子圖或組件改動(dòng)時(shí)只替換局部。圖也需要像代碼一樣做模塊化重構(gòu)抽公共組件標(biāo)識(shí)復(fù)用塊這樣才能在需求變化中長(zhǎng)久活下來。7. 讓Diagram成為項(xiàng)目里的活文檔這是我最后的建議把圖當(dāng)模型維護(hù)之后我對(duì) diagram-design 的理解就從輸出一張圖變成了建立一個(gè)可視化溝通協(xié)議。圖的每次評(píng)審都像代碼 review重點(diǎn)不是審美而是邏輯一致性和可追溯性。我現(xiàn)在經(jīng)手的每個(gè)項(xiàng)目都有一套固定的圖資產(chǎn)規(guī)范快速探索期的草圖在共享白板里完成穩(wěn)定架構(gòu)圖存成文本化源文件決策評(píng)審只看 diff每張長(zhǎng)期維護(hù)的圖都帶修正日志。這套做法讓我少了很多圖又過期了的罵名也讓新同事入職后可以自己沿著圖的變更記錄理解系統(tǒng)的演化過程。最后分享一個(gè)小習(xí)慣我每隔兩周會(huì)花十幾分鐘打開項(xiàng)目里最重要的三五張核心圖做一次過時(shí)檢查。做法很簡(jiǎn)單看著圖問自己能不能在 30 秒內(nèi)把這張圖講清楚講不清就當(dāng)場(chǎng)改改完順手更新版本記錄。別小看這 30 秒的自檢很多圖就是在這一次次復(fù)述中漸漸完善成團(tuán)隊(duì)真正離不開的活文檔的。有一回排查某系統(tǒng)的線上故障所有人圍著一張半年前的架構(gòu)圖討論了三分鐘最后才發(fā)現(xiàn)圖里少畫了一條異常兜底鏈路而問題恰恰出在那條鏈路上。從那以后我再也不把畫圖當(dāng)手繪而是當(dāng)成一次建?！冉ńY(jié)構(gòu)再談樣式圖和代碼一樣都是需要認(rèn)真維護(hù)的資產(chǎn)。