如何畫出別人一看就懂的架構圖?

来源:https://www.cnblogs.com/88223100/archive/2022/10/01/How-to-draw-an-architecture-diagram-that-others-can-understand-at-a-glance.html
-Advertisement-
Play Games

技術傳播的價值,不僅僅體現在通過商業化產品和開源項目來縮短我們構建應用的路徑,加速業務的上線速率,也體現在優秀工程師在工作效率提升、產品性能優化和用戶體驗改善等經驗方面的分享,以提高我們的專業能力。本文作者阿裡巴巴技術專家三畫,分享了自己和團隊在畫好架構圖方面的理念和經驗,首發於阿裡內部技術分享平臺... ...


 

 

技術傳播的價值,不僅僅體現在通過商業化產品和開源項目來縮短我們構建應用的路徑,加速業務的上線速率,也體現在優秀工程師在工作效率提升、產品性能優化和用戶體驗改善等經驗方面的分享,以提高我們的專業能力。本文作者阿裡巴巴技術專家三畫,分享了自己和團隊在畫好架構圖方面的理念和經驗,首發於阿裡內部技術分享平臺,梓敬、鵬升和餘樂對此文亦有貢獻。

 

當我們想用一張或幾張圖來描述我們的系統時,是不是經常遇到以下情況:

 

  • 對著畫布無從下手、刪了又來?

     

  • 用一張圖描述我的系統,並且讓產品、運營、開發都能看明白?

     

  • 畫了一半的圖還不清楚受眾是誰?

     

  • 畫出來的圖到底是產品圖功能圖還是技術圖又或是大雜燴?

     

  • 圖上的框框有點少是不是要找點兒框框加進來?

     

  • 佈局怎麼畫都不滿意……

 

如果有同樣的困惑,本文將介紹一種畫圖的方法論,來讓架構圖更清晰。

 

一、基礎概念

 

1、什麼是架構

 

架構就是對系統中的實體以及實體之間的關係所進行的抽象描述,是一系列的決策。

 

架構是結構和願景。

 

系統架構是概念的體現,是對物/信息的功能與形式元素之間的對應情況所做的分配,是對元素之間的關係以及元素同周邊環境之間的關係所做的定義。

 

做好架構是個複雜的任務,也是個很大的話題,本篇就不做深入了。有了架構之後,就需要讓干係人理解、遵循相關決策。

 

2、什麼是架構圖

 

系統架構圖是為了抽象的表示軟體系統的整體輪廓和各個組件之間的相互關係和約束邊界,以及軟體系統的物理部署和軟體系統的演進方向的整體視圖。

 

3、架構圖的作用

 

一圖勝千言。要讓干係人理解、遵循架構決策,就需要把架構信息傳遞出去。架構圖就是一個很好的載體。那麼,畫架構圖是為了:

 

  • 解決溝通障礙

     

  • 達成共識

     

  • 減少歧義

 

4、架構圖分類

 

搜集了很多資料,分類有很多,有一種比較流行的是4+1視圖,分別為場景視圖、邏輯視圖、物理視圖、處理流程視圖和開發視圖。

 

1)場景視圖

 

場景視圖用於描述系統的參與者與功能用例間的關係,反映系統的最終需求和交互設計,通常由用例圖表示。

 

 

 

2)邏輯視圖

 

邏輯視圖用於描述系統軟體功能拆解後的組件關係,組件約束和邊界,反映系統整體組成與系 統如何構建的過程,通常由UML的組件圖和類圖來表示。

 

 

 

3)物理視圖

 

物理視圖用於描述系統軟體到物理硬體的映射關係,反映出系統的組件是如何部署到一組可電腦器節點上,用於指導軟體系統的部署實施過程。

 

 

 

4)處理流程視圖

 

處理流程視圖用於描述系統軟體組件之間的通信時序,數據的輸入輸出,反映系統的功能流程 與數據流程,通常由時序圖和流程圖表示。

 

 

 

 

5)開發視圖

 

開發視圖用於描述系統的模塊劃分和組成,以及細化到內部包的組成設計,服務於開發人員,反映系統開發實施過程。

 

 

 

以上 5 種架構視圖從不同角度表示一個軟體系統的不同特征,組合到一起作為架構藍圖描述系統架構。

 

二、怎樣的架構圖是好的架構圖

 

上面的分類是前人的經驗總結,圖也是從網上摘來的,那麼這些圖畫的好不好呢?是不是我們要依葫蘆畫瓢去畫這樣一些圖?

 

先不去管這些圖好不好,我們通過對這些圖的分類以及作用,思考了一下,總結下來,我們認為,在畫出一個好的架構圖之前, 首先應該要明確其受眾,再想清楚要給他們傳遞什麼信息 ,所以,不要為了畫一個物理視圖去畫物理視圖,為了畫一個邏輯視圖去畫邏輯視圖,而應該根據受眾的不同,傳遞的信息的不同,用圖準確地表達出來,最後的圖可能就是在這樣一些分類里。那麼,畫出的圖好不好的一個直接標準就是:受眾有沒有準確接收到想傳遞的信息。

 

明確這兩點之後,從受眾角度來說,一個好的架構圖是不需要解釋的,它應該是自描述的,並且要具備一致性和足夠的準確性,能夠與代碼相呼應。

 

三、畫架構圖遇到的常見問題

 

1、方框代表什麼?

 

 

 

為什麼適用方框而不是圓形,它有什麼特殊的含義嗎?隨意使用方框或者其它形狀可能會引起混淆。

 

2、虛線、實線什麼意思?箭頭什麼意思?顏色什麼意思?

 

隨意使用線條或者箭頭可能會引起誤會。

 

3、運行時與編譯時衝突?層級衝突?

 

 

 

架構是一項複雜的工作,只使用單個圖表來表示架構很容易造成莫名其妙的語義混亂。

 

四、本文推薦的畫圖方法

 

 

 

C4 模型使用容器(應用程式、數據存儲、微服務等)、組件和代碼來描述一個軟體系統的靜態結構。這幾種圖比較容易畫,也給出了畫圖要點,但最關鍵的是,我們認為,它明確指出了每種圖可能的受眾以及意義。

 

下麵的案例來自 C4 官網,然後加上了一些我們的理解,來看看如何更好地表達軟體架構。

 

1、語境圖(System Context Diagram)

 

 

 

這是一個想象的待建設的互聯網銀行系統,它使用外部的大型機銀行系統存取客戶賬戶、交易信息,通過外部電郵系統給客戶發郵件。可以看到,非常簡單、清晰,相信不需要解釋,都看的明白,裡面包含了需要建設的系統本身,系統的客戶,和這個系統有交互的周邊系統。

 

1)用途

 

這樣一個簡單的圖,可以告訴我們,要構建的系統是什麼;它的用戶是誰,誰會用它,它要如何融入已有的IT環境。這個圖的受眾可以是開發團隊的內部人員、外部的技術或非技術人員。即:

 

  • 構建的系統是什麼

     

  • 誰會用它

     

  • 如何融入已有的IT環境

 

2)怎麼畫

 

中間是自己的系統,周圍是用戶和其它與之相互作用的系統。這個圖的關鍵就是梳理清楚待建設系統的用戶和高層次的依賴,梳理清楚了畫下來只需要幾分鐘時間。

 

2、容器圖(Container Diagram)

 

容器圖是把語境圖裡待建設的系統做了一個展開。

 

 

 

 

上圖中,除了用戶和外圍系統,要建設的系統包括一個基於java\spring mvc的web應用提供系統的功能入口,基於xamarin架構的手機app提供手機端的功能入口,一個基於java的api應用提供服務,一個mysql資料庫用於存儲,各個應用之間的交互都在箭頭線上寫明瞭。

 

看這張圖的時候,不會去關註到圖中是直角方框還是圓角方框,不會關註是實線箭頭還是虛線箭頭,甚至箭頭的指向也沒有引起太多註意。

 

我們有許多的畫圖方式,都對框、線的含義做了定義,這就需要畫圖的人和看圖的人都清晰的理解這些定義,才能讀全圖裡的信息,而現實是,這往往是非常高的一個要求,所以,很多圖只能看個大概的含義。

 

1)用途

 

這個圖的受眾可以是團隊內部或外部的開發人員,也可以是運維人員。用途可以羅列為:

 

  • 展現了軟體系統的整體形態

     

  • 體現了高層次的技術決策

     

  • 系統中的職責是如何分佈的,容器間的是如何交互的

     

  • 告訴開發者在哪裡寫代碼

 

2)怎麼畫

 

用一個框圖來表示,內部可能包括名稱、技術選擇、職責,以及這些框圖之間的交互,如果涉及外部系統,最好明確邊界。

 

3、組件圖(Component Diagram)

 

 

 

 

組件圖是把某個容器進行展開,描述其內部的模塊。

 

1)用途

 

這個圖主要是給內部開發人員看的,怎麼去做代碼的組織和構建。其用途有:

 

  • 描述了系統由哪些組件/服務組成

     

  • 釐清了組件之間的關係和依賴

     

  • 為軟體開發如何分解交付提供了框架

 

4、類圖(Code/Class Diagram)

 

 

 

這個圖很顯然是給技術人員看的,比較常見,就不詳細介紹了。

 

五、案例分享

 

下麵是內部的一個實時數據工具的架構圖。作為一個應該自描述的架構圖,這裡不多做解釋了。如果有看不明白的,那肯定是還畫得不夠好。

 

 

 

畫好架構圖可能有許多方法論,本篇主要介紹了C4這種方法,C4的理論也是不斷進化的。但不論是哪種畫圖方法論,我們回到畫圖初衷,更好地交流,我們在畫的過程中不必被條條框框所限制。簡而言之,畫之前想好:畫圖給誰看,看什麼,怎麼樣不解釋就看懂。


>>>>

參考資料

 

  • C4 官網

  • 為什麼需要軟體架構圖

 

 

作者丨三畫

 

 

本文來自博客園,作者:古道輕風,轉載請註明原文鏈接:https://www.cnblogs.com/88223100/p/How-to-draw-an-architecture-diagram-that-others-can-understand-at-a-glance.html


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 我們在創建條形碼時,如果以圖片的方式將創建好的條碼保存到指定文件夾路徑,可以在程式中直接載入圖片使用;已生成的條碼圖片,需要通過讀取圖片中的條碼信息,如條碼類型、條碼繪製區域在圖片中的四個頂點坐標位置等,可參考本文中的方法。 註:讀取時,也支持讀取二維碼類型。 引入dll 調用API:Spire.B ...
  • 前言 WPF 的 ComboBox 控制項等綁定 enum 值很繁瑣,很讓人頭疼,網上也有提供了一些方法,基本是使用 ObjectDataProvider 方式和 MarkupExtension 方式, 有沒有辦法綁定值為 enum 類型就自動載入所有枚舉值選項,下麵記錄一種方法; 實現方式 主要通過 ...
  • CORS跨域訪問問題往往出現在“瀏覽器客戶端”通過ajax調用“服務端API”的時候。而且若是深究原理,還會發現跨域問題其實還分為【簡單跨域】與【複雜跨域】這兩種情況。 網上對解決跨域限制有很多說明文章,但絕大多數要麼解決的不完善(比如,沒有區分【簡單跨域】與【複雜跨域】),要麼就是解決方案過於複雜 ...
  • 一. 背景 我們在日常開發中,可能你會遇到這樣的需求:"每個月的3號給用戶發信息,提醒用戶XXX "、"每天的0點需要統計前一天的考勤記錄"、"每個月的1號計算上個月的庫存情況"、"定時初始化數據供其它業務使用"、"每隔2分鐘輪詢查資料庫看某業務是否被審核通過,並提示用戶" 等等。 以上需求在開發中 ...
  • 一、crond任務調度 概述: 使用crontab 指令進行定時任務的設置,任務調度是指系統在某個時間端執行的特定任務或程式,例如:病毒掃描,資料庫備份等 基本語法: crontab 【選項】 常用選項: -e編輯crontab定時任務 -l查詢crontab任務 -r刪除當前用戶所有的cronta ...
  • MySQL基本知識 1.資料庫 1.1.創建資料庫 語法: CREATE DATABASE [IF NOT EXISTS] db_name [create_specification[,create_specification]...] create_specification: [DEFAULT] ...
  • #背景 webpack構建過程中的hooks都有什麼呢?除了在網上看一些文章,還可以通過更直接的辦法,結合官方文檔快速讓你進入webpack的hook世界 寫一個入口文件 //index.js const webpack = require("webpack"); const path = requ ...
  • 一、Spring Cloud Stream 在實際的企業開發中,消息中間件是至關重要的組件之一。消息中間件主要解決應用解耦,非同步消息,流量削鋒等問題,實現高性能,高可用,可伸縮和最終一致性架構。不同的中間件其實現方式,內部結構是不一樣的。如常見的RabbitMQ和Kafka,由於這兩個消息中間件的架 ...
一周排行
    -Advertisement-
    Play Games
  • 經常看到有群友調侃“為什麼搞Java的總在學習JVM調優?那是因為Java爛!我們.NET就不需要搞這些!”真的是這樣嗎?今天我就用一個案例來分析一下。 昨天,一位學生問了我一個問題:他建了一個預設的ASP.NET Core Web API的項目,也就是那個WeatherForecast的預設項目模 ...
  • 很多軟體工程師都認為MD5是一種加密演算法,然而這種觀點是不對的。作為一個 1992 年第一次被公開的演算法,到今天為止已經被髮現了一些致命的漏洞。本文討論MD5在密碼保存方面的一些問題。 ...
  • Maven可以使我們在構建項目時需要用到很多第三方類jar包,如下一些常用jar包 而maven的出現可以讓我們避免手動導入jar包出現的某些問題,它可以自動下載那須所需要的jar包 我們只需要在創建的maven項目自動生成的pom.xml中輸入如下代碼 <dependencies> <!--ser ...
  • 來源:https://developer.aliyun.com/article/694020 非同步調用幾乎是處理高併發Web應用性能問題的萬金油,那麼什麼是“非同步調用”? “非同步調用”對應的是“同步調用”,同步調用指程式按照定義順序依次執行,每一行程式都必須等待上一行程式執行完成之後才能執行;非同步調 ...
  • 1.面向對象 面向對象編程是在面向過程編程的基礎上發展來的,它比面向過程編程具有更強的靈活性和擴展性,所以可以先瞭解下什麼是面向過程編程: 面向過程編程的核心是過程,就是分析出實現需求所需要的步驟,通過函數一步一步實現這些步驟,接著依次調用即可,再簡單理解就是程式 從上到下一步步執行,從頭到尾的解決 ...
  • 10瓶毒藥其中只有一瓶有毒至少需要幾隻老鼠可以找到有毒的那瓶 身似浮雲,心如飛絮,氣若游絲。 用二分查找和二進位位運算的思想都可以把死亡的老鼠降到最低。 其中,二進位位運算就是每一隻老鼠代表一個二進位0或1,0就代表老鼠存活,1代表老鼠死亡;根據數學運算 23 = 8、24 = 16,那麼至少需要四 ...
  • 一、Kafka存在哪些方面的優勢 1. 多生產者 可以無縫地支持多個生產者,不管客戶端在使用單個主題還是多個主題。 2. 多消費者 支持多個消費者從一個單獨的消息流上讀取數據,而且消費者之間互不影響。 3. 基於磁碟的數據存儲 支持消費者非實時地讀取消息,由於消息被提交到磁碟,根據設置的規則進行保存 ...
  • 大家好,我是陶朱公Boy。 前言 上一篇文章《關於狀態機的技術選型,最後一個真心好》我跟大家聊了一下關於”狀態機“的話題。從眾多技術選型中我也推薦了一款阿裡開源的狀態機—“cola-statemachine”。 於是就有小伙伴私信我,自己項目也考慮引入這款狀態機,但網上資料實在太少,能不能系統的介紹 ...
  • 使用腳本自動跑實驗(Ubuntu),將實驗結果記錄在文件中,併在實驗結束之後將結果通過郵件發送到郵箱,最後在windows端自動解析成excel表格。 ...
  • 話說在前面,我不是小黑子~ 我是超級大黑子😏 表弟大周末的跑來我家,沒事幹天天騷擾我,搞得我都不能跟小姐姐好好聊天了,於是為了打發表弟,我決定用Python做一個小游戲來消耗一下他的精力,我思來想去,決定把他變成小黑子,於是做了一個坤坤打籃球的游戲,沒想到他還挺愛玩的~ 終於解放了,於是我把游戲寫 ...