1. 從一張草圖到一套系統(tǒng)diagram-design 到底在解決什么問題第一次看到 “diagram-design” 這個標(biāo)題很多人會以為它只是教你怎么畫圖——選個模板、拖幾個框、連幾條線導(dǎo)出 PNG 就完事了。但真正做過技術(shù)方案、寫過設(shè)計(jì)文檔、給團(tuán)隊(duì)講過架構(gòu)的人都知道畫圖這件事遠(yuǎn)沒有看上去那么輕松。一張好的架構(gòu)圖能讓評審會上的人三分鐘看懂你的思路一張?jiān)愀獾膱D講半小時別人還在問“這個箭頭到底代表什么”。diagram-design 要解決的正是從“隨手畫”到“系統(tǒng)化設(shè)計(jì)”之間的那道鴻溝。我做了十多年技術(shù)方案和文檔工作畫過的圖少說也有幾千張。早期用畫圖工具后來用代碼生成再后來自己維護(hù)了一套圖表規(guī)范。踩過的坑包括圖例不統(tǒng)一導(dǎo)致讀者誤解、配色太花導(dǎo)致重點(diǎn)丟失、布局混亂導(dǎo)致信息層級不清、版本迭代后圖沒同步導(dǎo)致文檔和實(shí)際脫節(jié)。這些問題看似瑣碎但每一個都真實(shí)地消耗過團(tuán)隊(duì)的時間和信任。diagram-design 的核心價值就是把這些零散的經(jīng)驗(yàn)固化成一套可復(fù)用的設(shè)計(jì)系統(tǒng)讓畫圖這件事從“手藝活”變成“工程活”。這篇文章適合三類人看第一類是需要頻繁輸出技術(shù)圖表但沒受過設(shè)計(jì)訓(xùn)練的工程師第二類是需要統(tǒng)一團(tuán)隊(duì)文檔視覺規(guī)范的負(fù)責(zé)人第三類是對信息可視化感興趣、想讓自己的圖“看起來更專業(yè)”的任何人。我會從設(shè)計(jì)思路、核心要素、實(shí)操流程、常見問題四個維度把 diagram-design 這套方法拆開揉碎講清楚。不管你現(xiàn)在用的是哪種畫圖工具這套思路都能直接遷移過去。2. 整體設(shè)計(jì)思路為什么圖表也需要一套“設(shè)計(jì)系統(tǒng)”2.1 圖表混亂的根源缺少約束大部分人畫圖的過程是這樣的打開工具拖一個矩形輸入文字再拖一個箭頭調(diào)整顏色覺得不好看再換一個。整個過程沒有任何預(yù)設(shè)規(guī)則每個決定都是臨時的。結(jié)果就是畫出來的圖在局部看沒問題但放到整個文檔體系里就顯得格格不入。更麻煩的是當(dāng)團(tuán)隊(duì)多人協(xié)作時每個人都有自己的“臨時決定”最終文檔里的圖風(fēng)格五花八門讀者需要不斷重新適應(yīng)。這跟早期前端開發(fā)的狀態(tài)很像——沒有組件庫的時候每個頁面都從頭寫樣式最后整個產(chǎn)品視覺不一致。diagram-design 的思路就是給圖表建立一套“組件庫”和“樣式指南”顏色有固定語義、形狀有固定含義、間距有固定比例、連線有固定規(guī)則。一旦這些約束建立起來畫圖就從“每次都要做一百個決定”變成“在框架內(nèi)做幾個關(guān)鍵決定”。2.2 約束不是限制而是效率工具有人可能會擔(dān)心搞一套規(guī)范會不會讓圖變得死板我的實(shí)際經(jīng)驗(yàn)恰恰相反。約束越清晰創(chuàng)作越高效。就像寫代碼時有了好的框架你不需要每次糾結(jié)目錄結(jié)構(gòu)怎么建、錯誤怎么處理可以把精力集中在業(yè)務(wù)邏輯上。圖表設(shè)計(jì)也一樣當(dāng)顏色、形狀、間距這些底層決策被固化后你可以把全部注意力放在信息結(jié)構(gòu)本身——哪些是核心模塊、它們之間是什么關(guān)系、讀者應(yīng)該按什么順序看。diagram-design 的約束體系主要覆蓋四個維度語義色板、形狀語法、空間節(jié)奏、連線規(guī)則。下面逐個拆解。2.3 語義色板顏色不是裝飾是信息很多人的圖表配色邏輯是“好看就行”但專業(yè)圖表里顏色承擔(dān)的是信息編碼功能。diagram-design 建議把顏色分成三類結(jié)構(gòu)色、狀態(tài)色、強(qiáng)調(diào)色。結(jié)構(gòu)色用于區(qū)分不同層級或不同子系統(tǒng)通常選低飽和度的色系比如灰藍(lán)、灰綠、灰紫它們不搶眼但能清晰劃分區(qū)域。狀態(tài)色用于表示運(yùn)行狀態(tài)比如正常、警告、異常通常用綠、黃、紅這個經(jīng)典組合但要注意飽和度不能太高否則整張圖會顯得刺眼。強(qiáng)調(diào)色用于突出當(dāng)前討論的重點(diǎn)模塊通常只用一個高飽和度的顏色比如橙色或亮藍(lán)而且一張圖里強(qiáng)調(diào)色出現(xiàn)的面積不應(yīng)超過總面積的百分之十。我自己的習(xí)慣是在項(xiàng)目開始前先定好一套六色色板三個結(jié)構(gòu)色、兩個狀態(tài)色、一個強(qiáng)調(diào)色所有圖都從這六個顏色里選。這樣即使畫了二十張圖放在一起看也是統(tǒng)一的。2.4 形狀語法每種形狀都有固定含義形狀在圖表里不是隨便選的。diagram-design 推薦建立一套形狀語法矩形代表服務(wù)或模塊圓角矩形代表外部系統(tǒng)或用戶角色圓柱體代表數(shù)據(jù)存儲菱形代表判斷或網(wǎng)關(guān)虛線框代表邊界或分組。這套語法一旦定下來讀者看到形狀就能大致猜出含義不需要每次都看圖例。這里有個細(xì)節(jié)容易被忽略形狀的圓角半徑和線條粗細(xì)也需要統(tǒng)一。我見過很多圖有的矩形圓角大、有的圓角小有的邊框粗、有的邊框細(xì)放在一起就顯得很業(yè)余。建議圓角半徑統(tǒng)一用 4px 或 8px邊框統(tǒng)一用 1.5px 或 2px具體數(shù)值根據(jù)圖的尺寸調(diào)整但同一張圖里必須一致。2.5 空間節(jié)奏間距比對齊更重要對齊是基本功但真正讓圖看起來舒服的是間距節(jié)奏。diagram-design 建議采用 8px 基準(zhǔn)網(wǎng)格所有元素之間的間距都是 8 的倍數(shù)8、16、24、32、48。同一層級的模塊間距一致不同層級之間用更大的間距區(qū)分。這樣即使不看內(nèi)容光看布局就能感受到信息的層次。我自己的經(jīng)驗(yàn)是畫圖時先把所有模塊按邏輯分組組內(nèi)間距用 16px組間間距用 32px整個圖的外邊距用 48px。這個規(guī)則簡單到可以背下來但效果非常明顯。2.6 連線規(guī)則箭頭不是越多越好連線是圖表里最容易失控的部分。很多圖密密麻麻全是箭頭讀者根本追不過來。diagram-design 的建議是能不用箭頭就不用能用一條線表達(dá)就不用兩條。具體規(guī)則包括主流程用實(shí)線加箭頭數(shù)據(jù)流向用虛線加箭頭依賴關(guān)系用無箭頭實(shí)線雙向關(guān)系用無箭頭虛線。同一對模塊之間只保留一條連線如果需要表達(dá)多種關(guān)系用標(biāo)簽區(qū)分而不是畫多條線。另外連線盡量走直角避免斜線和曲線。直角連線看起來更整潔也更容易追蹤。如果必須交叉盡量讓交叉點(diǎn)集中在空白區(qū)域不要壓在模塊上。3. 核心要素拆解從零搭建一套圖表規(guī)范3.1 第一步確定圖表的“閱讀路徑”在動手畫任何圖之前先問自己一個問題讀者應(yīng)該按什么順序看這張圖是從左到右、從上到下還是從中心向外輻射這個閱讀路徑?jīng)Q定了整體的布局方向。diagram-design 推薦三種基本布局線性布局適合流程和時序?qū)蛹壊季诌m合架構(gòu)和分類網(wǎng)絡(luò)布局適合關(guān)系和依賴。線性布局從左到右或從上到下層級布局從中心或頂部展開網(wǎng)絡(luò)布局則圍繞核心節(jié)點(diǎn)分布。選定布局后所有模塊的擺放都要服務(wù)于這條閱讀路徑不要隨意放置。我見過很多圖的問題就在于沒有閱讀路徑模塊東一個西一個讀者眼睛不知道該往哪看。解決這個問題的方法很簡單畫完之后瞇著眼睛看如果能隱約看出一條主線說明布局是成功的如果看到的是一盤散沙那就需要重新調(diào)整。3.2 第二步建立模塊的“視覺權(quán)重”不是所有模塊都同等重要但很多圖里所有模塊看起來一樣大、一樣重讀者無法區(qū)分主次。diagram-design 建議通過三個維度建立視覺權(quán)重尺寸、顏色、位置。核心模塊可以稍微大一點(diǎn)或者用強(qiáng)調(diào)色或者放在閱讀路徑的起點(diǎn)或中心。次要模塊用結(jié)構(gòu)色尺寸稍小放在邊緣或后方。輔助信息用最淺的顏色和最小的字號放在角落或底部。這樣讀者一眼就能看出哪些是重點(diǎn)。具體操作上我通常把模塊分成三級一級模塊占圖面面積的百分之五十以上二級模塊占百分之三十三級模塊占百分之二十。字號也相應(yīng)分為三檔比如一級用 16px二級用 14px三級用 12px。這些數(shù)值不是絕對的但分級思路是關(guān)鍵。3.3 第三步統(tǒng)一文字規(guī)范文字是圖表里信息密度最高的部分但也是最容易被忽視的。diagram-design 建議統(tǒng)一四個文字屬性字體、字號、字重、對齊方式。字體選無襯線字體比如系統(tǒng)默認(rèn)的 sans-serif保證在不同設(shè)備上都能清晰顯示。字號分三檔就夠了標(biāo)題 16-18px正文 13-14px注釋 11-12px。字重只用兩種常規(guī)和加粗加粗只用于模塊名稱或關(guān)鍵標(biāo)簽。對齊方式統(tǒng)一用居中對齊或左對齊同一張圖里不要混用。還有一個細(xì)節(jié)文字不要貼邊。模塊內(nèi)的文字距離邊框至少留 8px 的內(nèi)邊距否則看起來會很擠。如果文字太長寧可換行也不要縮小字號縮小字號會破壞整體的字號層級。3.4 第四步定義連線樣式連線樣式包括顏色、粗細(xì)、線型、箭頭四個屬性。diagram-design 的建議是連線顏色比模塊邊框顏色淺一度粗細(xì)統(tǒng)一用 1.5px線型只用實(shí)線和虛線兩種箭頭只用一種樣式。實(shí)線用于主流程和強(qiáng)關(guān)系虛線用于輔助流程和弱關(guān)系。箭頭大小要統(tǒng)一不要有的箭頭大有的箭頭小。如果連線需要標(biāo)簽標(biāo)簽放在連線中間背景用白色或淺色遮擋連線避免文字和線重疊。我自己的習(xí)慣是連線顏色用比模塊邊框淺百分之二十的灰色這樣連線不會搶模塊的視覺焦點(diǎn)。箭頭用簡單的三角形不要用花哨的樣式。3.5 第五步制定圖例和標(biāo)注規(guī)則圖例是圖表的“說明書”但很多圖要么沒有圖例要么圖例太復(fù)雜。diagram-design 建議如果一張圖里用到的形狀和顏色不超過五種可以不加圖例超過五種必須加圖例。圖例放在圖的右下角或底部用最小的字號只列出非常規(guī)的形狀和顏色。標(biāo)注則用于解釋特殊模塊或特殊關(guān)系。標(biāo)注的文字要簡短不超過一行用引線指向被標(biāo)注的對象。引線用細(xì)虛線顏色比連線更淺。標(biāo)注不要太多一張圖里超過五個標(biāo)注就會顯得雜亂。4. 實(shí)操流程從需求到成圖的完整步驟4.1 需求梳理先想清楚再動手畫圖之前先花十分鐘把需求理清楚。具體要回答四個問題這張圖給誰看他們需要從中獲取什么信息這張圖會放在哪里文檔、PPT、白板需要多詳細(xì)給不同的人看圖的詳細(xì)程度完全不同。給高層看只需要核心模塊和主流程給開發(fā)看需要接口和數(shù)據(jù)流向給運(yùn)維看需要部署和網(wǎng)絡(luò)拓?fù)?。放在文檔里可以詳細(xì)放在 PPT 里要精簡放在白板上要留白。我自己的習(xí)慣是先在紙上或白板上畫一個草圖確定模塊和關(guān)系然后再用工具正式畫。草圖階段不考慮美觀只考慮邏輯是否完整。邏輯確認(rèn)后再進(jìn)入正式繪制這樣返工的概率會大大降低。4.2 工具選擇適合場景的才是最好的畫圖工具沒有絕對的好壞關(guān)鍵看場景。diagram-design 本身不綁定任何工具但不同工具適合不同的需求。工具類型適合場景優(yōu)勢注意事項(xiàng)代碼生成類需要版本控制、頻繁迭代可 diff、可復(fù)用、易維護(hù)學(xué)習(xí)曲線陡布局調(diào)整不直觀拖拽式在線工具快速出圖、團(tuán)隊(duì)協(xié)作上手快、模板多、協(xié)作方便免費(fèi)版有限制復(fù)雜圖容易卡桌面繪圖軟件精細(xì)控制、離線使用功能全、性能好、導(dǎo)出格式多協(xié)作不便文件管理麻煩白板工具頭腦風(fēng)暴、早期討論自由度高、適合探索不適合最終交付需要重繪我的建議是早期討論用白板工具正式文檔用代碼生成或桌面軟件需要協(xié)作時用在線工具。不管用什么工具最終導(dǎo)出的圖要統(tǒng)一格式和分辨率文檔里用 PNG 或 SVGPPT 里用 PNG白板拍照只用于內(nèi)部討論。4.3 布局繪制先骨架后血肉正式繪制時先畫骨架——把所有模塊用最簡單的矩形擺出來確定位置和大小。這個階段不要管顏色和文字只看布局是否合理、閱讀路徑是否清晰。骨架確認(rèn)后再填充顏色、文字、連線。骨架階段有個技巧用灰度模式畫。把所有模塊都設(shè)成灰色這樣你會更關(guān)注布局和層級而不是被顏色干擾?；叶饶Ｊ较氯绻麑蛹壡逦由项伾笾粫逦叶饶Ｊ较氯绻麑蛹壔靵y加顏色也救不回來。4.4 細(xì)節(jié)打磨五個檢查點(diǎn)圖基本畫完后用五個檢查點(diǎn)過一遍對齊、間距、顏色、文字、連線。對齊檢查所有模塊是否對齊到網(wǎng)格同一層級的模塊是否左對齊或居中對齊間距檢查組內(nèi)間距是否一致組間間距是否大于組內(nèi)間距顏色檢查顏色是否超過六種強(qiáng)調(diào)色是否只用于重點(diǎn)文字檢查字號是否統(tǒng)一是否有文字溢出或貼邊連線檢查是否有不必要的連線連線是否交叉過多這五個檢查點(diǎn)過完圖的質(zhì)量基本就有保障了。我自己的經(jīng)驗(yàn)是前三個檢查點(diǎn)能解決百分之八十的視覺問題后兩個檢查點(diǎn)能解決百分之八十的邏輯問題。4.5 導(dǎo)出與歸檔讓圖可維護(hù)圖不是畫完就結(jié)束了還要考慮后續(xù)的維護(hù)。diagram-design 建議源文件、導(dǎo)出文件、版本說明三者一起歸檔。源文件用于后續(xù)修改導(dǎo)出文件用于文檔引用版本說明記錄每次修改的內(nèi)容和時間。如果用的是代碼生成工具源文件本身就是版本可控的只需要在提交信息里寫清楚修改內(nèi)容。如果用的是拖拽工具建議每次修改后另存一個版本不要覆蓋舊版本。導(dǎo)出文件統(tǒng)一命名規(guī)則比如“項(xiàng)目名-圖名-版本號-日期”方便查找。5. 常見問題與排查技巧實(shí)錄5.1 圖太亂怎么辦做減法而不是加法圖太亂是最常見的問題。很多人的第一反應(yīng)是調(diào)整布局或換顏色但真正有效的方法是做減法。具體步驟先刪掉所有非必要的模塊只保留核心模塊再刪掉所有非必要的連線只保留主流程最后刪掉所有非必要的裝飾只保留信息本身。我試過一張圖從三十個模塊刪到十二個模塊信息量沒有減少但可讀性提升了一倍。刪減的標(biāo)準(zhǔn)是如果刪掉這個模塊讀者是否還能理解核心信息如果能就刪掉。5.2 顏色不夠用怎么辦用形狀和標(biāo)簽補(bǔ)充有時候模塊類型太多六種顏色不夠用。這時候不要增加顏色而是用形狀和標(biāo)簽來區(qū)分。比如同樣是矩形可以用不同的邊框樣式實(shí)線、虛線、雙線來區(qū)分同樣是結(jié)構(gòu)色可以用不同的填充深淺來區(qū)分。另一個方法是分組。把相關(guān)模塊放在一個虛線框里框上標(biāo)注組名這樣組內(nèi)模塊可以用同一種顏色組間用不同顏色。分組不僅能解決顏色不夠的問題還能讓信息層級更清晰。5.3 連線交叉太多怎么辦調(diào)整布局或分層連線交叉太多通常是因?yàn)椴季植缓侠?。解決方法有兩個調(diào)整模塊位置讓相關(guān)模塊靠近或者分層把圖分成上下兩層或左右兩層層內(nèi)連線層間用少量連線連接。如果調(diào)整布局后還是交叉太多可以考慮把一張圖拆成兩張。第一張畫高層概覽第二張畫細(xì)節(jié)。讀者先看概覽理解整體再看細(xì)節(jié)深入局部。拆圖的原則是每張圖只講一個故事。5.4 團(tuán)隊(duì)風(fēng)格不統(tǒng)一怎么辦建立共享規(guī)范文檔團(tuán)隊(duì)協(xié)作時風(fēng)格不統(tǒng)一是必然的。解決方法不是反復(fù)口頭強(qiáng)調(diào)而是建立一份共享的規(guī)范文檔。文檔里寫清楚顏色值、字號、間距、形狀規(guī)則、連線規(guī)則并附上正例和反例。每次新成員加入時先讀這份文檔再畫圖。規(guī)范文檔不需要很長一頁紙就夠了。關(guān)鍵是要有正例和反例的對比圖這樣比純文字描述直觀得多。我自己的團(tuán)隊(duì)用一份兩頁的規(guī)范文檔新成員基本一天就能上手兩周后畫的圖就能和老成員保持一致。5.5 常見問題速查表問題現(xiàn)象可能原因排查方法解決技巧圖看起來亂模塊太多、連線太多數(shù)模塊數(shù)和連線數(shù)刪減到核心模塊和主流程重點(diǎn)不突出顏色和尺寸沒有分級瞇眼看圖看是否有主線用強(qiáng)調(diào)色和尺寸區(qū)分主次讀者看不懂缺少圖例或標(biāo)注找沒看過圖的人試讀加圖例加關(guān)鍵標(biāo)注風(fēng)格不統(tǒng)一沒有共享規(guī)范對比團(tuán)隊(duì)成員的圖建立規(guī)范文檔附正反例修改后不同步源文件和導(dǎo)出文件分離檢查文檔里的圖是否最新源文件、導(dǎo)出文件、版本說明一起歸檔5.6 獨(dú)家避坑技巧第一個技巧畫圖前先定色板。不要畫到一半再選顏色那樣很容易越加越多。先定好六色色板畫圖時只從這六個顏色里選從源頭控制顏色數(shù)量。第二個技巧用灰度模式檢查層級。畫完骨架后把所有模塊設(shè)成灰色看層級是否清晰?；叶饶Ｊ较聦蛹壡逦宇伾蟛艜逦５谌齻€技巧找沒看過圖的人試讀。自己畫的圖自己看得懂但別人不一定。找一個沒參與項(xiàng)目的同事讓他看圖說一遍理解你能發(fā)現(xiàn)很多自己忽略的問題。第四個技巧保存歷史版本。每次大改之前另存一個版本這樣改壞了可以回退。我自己的習(xí)慣是用日期命名版本比如“架構(gòu)圖-20240115”一目了然。第五個技巧圖不要超過一屏。如果一張圖需要滾動才能看完說明信息量太大了考慮拆圖。一屏能看完的圖讀者更容易建立整體認(rèn)知。6. 從單張圖到圖表體系diagram-design 的擴(kuò)展思路6.1 建立項(xiàng)目級的圖表庫單張圖畫得再好如果項(xiàng)目里有幾十張圖風(fēng)格各異整體效果還是會打折扣。diagram-design 的擴(kuò)展思路是建立項(xiàng)目級的圖表庫把常用的模塊、連線、圖例做成模板畫新圖時直接復(fù)用。模板庫不需要很復(fù)雜一個文件就夠了。里面放常用的形狀組合、顏色樣式、文字樣式畫圖時復(fù)制粘貼改改文字就行。這樣既能保證風(fēng)格統(tǒng)一又能提高效率。我自己的模板庫里有二十多個常用模塊畫一張新圖的時間從一小時縮短到二十分鐘。6.2 圖表與文檔的同步維護(hù)圖表和文檔脫節(jié)是常見問題。文檔更新了圖沒更新圖更新了文檔沒更新。解決方法是把圖表源文件放在文檔同一個目錄下每次更新文檔時順便檢查圖表是否需要更新。如果用的是代碼生成工具可以把圖表生成腳本集成到文檔構(gòu)建流程里文檔構(gòu)建時自動生成最新圖表。這樣只要源文件更新圖表就會自動同步不會出現(xiàn)脫節(jié)。6.3 圖表評審的檢查清單團(tuán)隊(duì)協(xié)作時圖表評審是保證質(zhì)量的重要環(huán)節(jié)。diagram-design 建議用一份檢查清單來評審信息是否完整層級是否清晰顏色是否統(tǒng)一文字是否可讀連線是否合理是否符合項(xiàng)目規(guī)范評審時不要只說“好看”或“不好看”要具體指出問題。比如“這個模塊的顏色和那個模塊太接近建議換一個”“這條連線和那條連線交叉了建議調(diào)整布局”。具體的反饋才能帶來具體的改進(jìn)。6.4 持續(xù)迭代圖表規(guī)范也需要版本管理圖表規(guī)范不是一成不變的隨著項(xiàng)目發(fā)展可能需要增加新的形狀、新的顏色、新的規(guī)則。這時候要對規(guī)范進(jìn)行版本管理記錄每次修改的內(nèi)容和原因。版本管理不需要很復(fù)雜一個更新日志就夠了。每次修改規(guī)范時在日志里寫清楚改了什么、為什么改、影響哪些圖。這樣新成員能了解規(guī)范的演變過程老成員能追溯歷史決策。我個人在實(shí)際操作中的體會是圖表設(shè)計(jì)這件事入門容易精通難。畫出一張能看的圖不難但畫出一套風(fēng)格統(tǒng)一、信息清晰、可維護(hù)的圖表體系需要持續(xù)的投入和迭代。diagram-design 提供的不是一套死板的規(guī)則而是一種系統(tǒng)化的思維方式——把每一次畫圖都當(dāng)作一次信息設(shè)計(jì)把每一張圖都當(dāng)作整個文檔體系的一部分。一旦建立起這種思維方式你會發(fā)現(xiàn)不僅圖變好看了連思考問題的方式都變得更結(jié)構(gòu)化了。最后再分享一個小技巧每次畫完圖把它打印出來或者縮小到百分之五十看一遍。縮小后如果還能看清主線和重點(diǎn)說明圖的視覺層級是成功的如果縮小后一片模糊說明模塊太大、間距太小需要調(diào)整。這個技巧簡單但非常有效我?guī)缀趺繌垐D都會用。