3.8 繪制架構圖：減少溝通成本

對于架構復雜的項目而言，架構圖是必不可少的。架構圖能讓一個團隊中的新成員快速地了解現(xiàn)有系統(tǒng)的各個組成部分。對于復雜的系統(tǒng)，架構圖一般展示的是各個子系統(tǒng)之間如何通信；對于簡單的系統(tǒng)，架構圖則可以是由項目的技術棧組成的。

在簡單的前端項目里，架構圖可能只表現(xiàn)不同框架之間的關系，以及不同層級的組件庫之間的使用關系。即使不看架構圖，我們也可以清晰地了解項目的架構。

對于復雜的前端項目來說，我們可能采用微前端的方式來設計應用架構。各個應用之間可能存在一定的關聯(lián)性，以及底層的一些共用依賴等。在微應用化的前端方案里，架構圖的作用更多是描述項目的構建過程。

繪制項目架構圖有多種方式，既可以使用代碼生成，也可以使用專業(yè)工具繪制。當然，也可以是某次會議上的討論結果，然后將拍照記錄到文檔中。總之，我們需要為后來者建立一個有效的文檔機制，以方便未來的開發(fā)者能夠在需要的時候，找到原有的系統(tǒng)設計和現(xiàn)在架構之間的一些差異。

3.8.1 代碼生成

對于可能不斷變化的事物而言，能使用版本工具記錄是最好的選擇。對于架構圖的記錄也是如此，因此我們要考慮的第一種方式就是：代碼生成架構圖。

在筆者的工具箱里，Graphviz就是一個不錯的工具。它是一個由AT&T實驗室啟動的開源工具包，用于繪制DOT語言腳本描述的圖形。它也提供了可供其他軟件使用的庫，比如Darge.js是一個可以直接在瀏覽器渲染Graphviz的庫。

Graphviz之所以方便是因為語法特別簡單——和我們平時表達的方式是一樣的，即：

        "包管理" -> "包發(fā)布" -> "自動部署"
        "CLI" -> "部署"
        "腳本語言（Bash, Perl, Ruby, Python etc)" -> "部署"
        "腳本語言（Bash, Perl, Ruby, Python etc)" -> "構建"
        "＊nix" -> "軟件編譯" -> "部署"
        "構建" -> "軟件編譯"

我們只需要關注如何編寫它們之間的關系，就能快速地繪制出流程圖。

Graphviz也有一些明顯的缺點，比如它的自動化生成連線，容易導致線條間重疊；它生成的UI圖，看上去不是那么美觀。因此，它更適合在開發(fā)者之間使用，當我們有一些更高級的需求時，則可以考慮使用其他工具。

3.8.2 專業(yè)工具

與代碼生成相比，使用專業(yè)的工具來繪制架構圖是一種更方便的選擇。但是因為它們專業(yè)，所以在價格上也體現(xiàn)了一定的專業(yè)性。比如Windows系統(tǒng)的Visio、macOS上的OmniGraffle都是一些非常不錯的軟件，只是它們價格昂貴。當然，除了架構圖，這些專業(yè)的軟件還能做出更豐富的與項目管理相關的軟件圖。

除了這些專有的閉源軟件，還可以選擇使用開源軟件，比如Dia。它是開源的流程圖軟件，是GNU開源計劃中的一部分，作者是Alexander Larsson。它可以將多種需求以模塊化的方式進行設計，如流程圖、網(wǎng)絡圖、電路圖等。

3.8.3 軟件附帶工具

專業(yè)的繪圖軟件都是相當昂貴的，并且不是很好用。筆者有時會使用macOS上自帶的Keynote來繪制層級架構圖。對于不復雜的架構來說，它相當方便，并且快速有效。macOSKeynote的示例如圖3-3所示。

由于寫作需要，筆者購買了Office 365套裝。其中的Word和Powerpoint是自帶的，SmartArt也適用于架構圖的繪制。SmartArt自帶一系列的模板，可以幫助我們快速地畫出系統(tǒng)架構，如圖3-4所示。

仔細探索，也許就會發(fā)現(xiàn)正在使用的編輯器可能也可以直接生成架構圖，而不需要專門繪制。

3.8.4 在線工具

除了使用上述離線工具，我們還可以使用在線工具來繪制架構及流程圖。由于篇幅限制，這里就不展開討論了。

值得注意的是，如果不是會員，這些在線工具會在超出容量限制之后，將超出容量的圖直接發(fā)布到互聯(lián)網(wǎng)上。