3.8 绘制架构图：减少沟通成本

对于架构复杂的项目而言，架构图是必不可少的。架构图能让一个团队中的新成员快速地了解现有系统的各个组成部分。对于复杂的系统，架构图一般展示的是各个子系统之间如何通信；对于简单的系统，架构图则可以是由项目的技术栈组成的。

在简单的前端项目里，架构图可能只表现不同框架之间的关系，以及不同层级的组件库之间的使用关系。即使不看架构图，我们也可以清晰地了解项目的架构。

对于复杂的前端项目来说，我们可能采用微前端的方式来设计应用架构。各个应用之间可能存在一定的关联性，以及底层的一些共用依赖等。在微应用化的前端方案里，架构图的作用更多是描述项目的构建过程。

绘制项目架构图有多种方式，既可以使用代码生成，也可以使用专业工具绘制。当然，也可以是某次会议上的讨论结果，然后将拍照记录到文档中。总之，我们需要为后来者建立一个有效的文档机制，以方便未来的开发者能够在需要的时候，找到原有的系统设计和现在架构之间的一些差异。

3.8.1 代码生成

对于可能不断变化的事物而言，能使用版本工具记录是最好的选择。对于架构图的记录也是如此，因此我们要考虑的第一种方式就是：代码生成架构图。

在笔者的工具箱里，Graphviz就是一个不错的工具。它是一个由AT&T实验室启动的开源工具包，用于绘制DOT语言脚本描述的图形。它也提供了可供其他软件使用的库，比如Darge.js是一个可以直接在浏览器渲染Graphviz的库。

Graphviz之所以方便是因为语法特别简单——和我们平时表达的方式是一样的，即：

        "包管理" -> "包发布" -> "自动部署"
        "CLI" -> "部署"
        "脚本语言（Bash, Perl, Ruby, Python etc)" -> "部署"
        "脚本语言（Bash, Perl, Ruby, Python etc)" -> "构建"
        "＊nix" -> "软件编译" -> "部署"
        "构建" -> "软件编译"

我们只需要关注如何编写它们之间的关系，就能快速地绘制出流程图。

Graphviz也有一些明显的缺点，比如它的自动化生成连线，容易导致线条间重叠；它生成的UI图，看上去不是那么美观。因此，它更适合在开发者之间使用，当我们有一些更高级的需求时，则可以考虑使用其他工具。

3.8.2 专业工具

与代码生成相比，使用专业的工具来绘制架构图是一种更方便的选择。但是因为它们专业，所以在价格上也体现了一定的专业性。比如Windows系统的Visio、macOS上的OmniGraffle都是一些非常不错的软件，只是它们价格昂贵。当然，除了架构图，这些专业的软件还能做出更丰富的与项目管理相关的软件图。

除了这些专有的闭源软件，还可以选择使用开源软件，比如Dia。它是开源的流程图软件，是GNU开源计划中的一部分，作者是Alexander Larsson。它可以将多种需求以模块化的方式进行设计，如流程图、网络图、电路图等。

3.8.3 软件附带工具

专业的绘图软件都是相当昂贵的，并且不是很好用。笔者有时会使用macOS上自带的Keynote来绘制层级架构图。对于不复杂的架构来说，它相当方便，并且快速有效。macOSKeynote的示例如图3-3所示。

图3-3

由于写作需要，笔者购买了Office 365套装。其中的Word和Powerpoint是自带的，SmartArt也适用于架构图的绘制。SmartArt自带一系列的模板，可以帮助我们快速地画出系统架构，如图3-4所示。

图3-4

仔细探索，也许就会发现正在使用的编辑器可能也可以直接生成架构图，而不需要专门绘制。

3.8.4 在线工具

除了使用上述离线工具，我们还可以使用在线工具来绘制架构及流程图。由于篇幅限制，这里就不展开讨论了。

值得注意的是，如果不是会员，这些在线工具会在超出容量限制之后，将超出容量的图直接发布到互联网上。

上一章目录下一章