“一图胜千言”高度概括了通过图形来描述技术实现、项目进度、性能瓶颈等项目场景比文字描述更有视觉冲击力及直观明了。前端项目在实施的过程中也会产生大量“度量衡”数据，这些数据借助特定的图形也能方便项目参与者及时了解项目近况，以便做出决策。

本篇内容将补充些 UML、Scrum 等相关图形，以便更加便捷交流。UML 中重点介绍类图和时序图，它们在工程师的技术实现方案中较为常见且重要，应该充分掌握。Scrum 中挑选了燃尽图和甘特图作为掌握的内容项，以便项目者了解任务项的安排及任务消耗情况，属于项目管理工具范畴，应当了解。最后介绍火焰图，一种方便工程师排查性能瓶颈的工具。“工欲善其事必先利其器”，上述工具图均能在项目实施的各个环节起到便捷沟通交流提效的作用。后续章节的项目架构方案中会涉及到大量上述工具图的应用。

类图(Class diagram)

主要描述系统的结构化设计，用类图可以显示出类、接口（抽象类）以及它们之间的静态结构和关系。类图中包含类(Class)、抽象类(Abstract Class)/接口(Interface)以及类之间的关系等三类元素。

UML-类图

关系

说明

泛化(generalization)

用一条带空心箭头的直接表示，属于类的继承结构，注：最终代码中，泛化关系表现为继承非抽象类。

实现(realize)

用一条带空心箭头的虚线表示，属于类的继承结构，注：最终代码中，实现关系表现为继承抽象类

聚合(aggregation)

用一条带空心菱形箭头的直线表示，表示整体由部分构成的语义，整体和部分不是强依赖的，即使整体不存在了，部分仍然存在

组合(composition)

用一条带实心菱形箭头直线表示，表示整体由部分构成的语义，是一种强依赖的特殊聚合关系，如果整体不存在了，则部分也不存在了

关联(association)

用一条直线表示的；它描述不同类的对象之间的结构关系；它是一种静态关系， 通常与运行状态无关，一般由常识等因素决定的；它一般用来定义对象之间静态的、天然的结构； 所以，关联关系是一种“强关联”的关系。注：在最终代码中，关联对象通常是以成员变量的形式实现的。

依赖(dependency)

用一套带箭头的虚线表示，描述一个对象在运行期间会用到另一个对象的关系。注：在最终代码中，依赖关系体现为类构造方法及类方法的传入参数，箭头的指向为调用关系；依赖关系除了临时知道对方外，还是“使用”对方的方法和属性。

时序图(Sequence Diagram)

是显示对象之间交互的图，这些对象是按时间顺序排列的。顺序图中显示的是参与交互的对象及其对象之间消息交互的顺序。时序图中包括的建模元素主要有：角色（Actor）、生命线（Lifeline）、控制焦点（Focus of control）、消息（Message）等等。

UML-时序图

元素

说明

角色(Actor)

可以是人、及其甚至其他的系统或者子系统

生命线(Lifeline)

生命线在顺序图中表示为从对象图标向下延伸的一条虚线，表示对象存在的时间

控制焦点(Focus of Control)

控制焦点是顺序图中表示时间段的符号，在这个时间段内对象将执行相应的操作。用小矩形表示

消息(Message)

消息一般分为同步消息（Synchronous Message），异步消息（Asynchronous Message）和返回消息（Return Message）

燃尽图(Burdown Chart)

项目管理用工具，是用于表示剩余工作量的工作图表，由横轴（X）和纵轴（Y）组成，横轴表示时间，纵轴表示工作量。这种图表可以直观的预测何时工作将全部完成，常用于软件开发中的敏捷软件开发方式，也可以用于其他类型的工作流程监控。

燃尽图

甘特图(Gantt Chart)

项目管理用工具，也称为条状图(Bar chart)，基本是一条线条图，横轴表示时间，纵轴表示活动(项目)，线条表示在整个期间上计划和实际的活动完成情况。它直观地表明任务计划在什么时候进行，及实际进展与计划要求的对比。

甘特图

火焰图(Flame Graph)

看起来就像一团跳动的火焰，因此得名。火焰图可以将 CPU 的使用情况可视化，使我们直观地了解到程序的性能瓶颈，通常要结合操作系统的性能分析工具（profiling tracer）使用。

火焰图