最近在工作中常常遇到需要绘制技术设计图的场景，虽然日常工作中照猫画虎也能画出一个勉强像样的的技术设计图出来，但是每次在绘制的时候选择什么图形、元素总会产生困惑，对各种设计图之间的设计边界也比较模棱两可。导致的结果就是产出的设计图五花八门、形状各异。 在这篇文章中，我会按照设计图种类为维度，梳理出不同类型的技术设计图的绘制方法和绘制要点。
总的来说，我们可以把常见的技术设计图分为以下几类：
- 流程图
- 架构图
- 时序图
- 泳道图
- 状态图
- 用例图
流程图
流程图是是“开始，结束，行动，状态与判断”的组合。 我们来看百度百科中流程图符号的一个图集：
用上述的六种常见符号，就可以绘制出一张简单的流程图。 其中几个符号我们可以重点记忆以下：
- 判断
- 处理
- 输入输出
以上几个符号，基本就是我们在绘制流程图时最常用到的符号。如果遇到无法通过符号准确的表达某一步骤的时候，可以灵活的自定义一些符号。
架构图
定义
- 系统架构图是为了抽象的表示软件系统的整体轮廓和各个组件之间的相互关系和约束边界;
- 架构就是对系统中的实体以及实体之间的关系所进行的抽象描述，是一系列的决策;
- 架构是结构和愿景.
架构图的分类
在绘制流程图的过程，我发现这样一个问题：我需要绘制实体之间的关系，也需要描述整个应用的数据流，我无法将这些过程蹂躏在同一张架构图中，那么如何将我们的架构图分类、正交的组合，是我们需要的思考的问题。
比较流行的架构图分类套法有两种：4+1视图和C4视图。我们在下面的章节里以4+1视图为例为大家介绍物种视图的画法。
- 逻辑视图
- 开发视图
- 处理流程视图
- 物理视图
- 场景视图 5种架构视图从不同角度表示一个软件系统的不同特征，组合到一起作为架构蓝图描述系统架构。
逻辑视图
设计的对象模型（使用面向对象的设计方法时）。这是一个静态视图，描绘的是系统的静态逻辑结构。论文中使用的是对象模型，不过并不是强制的，只要能表达出意图即可。
物理视图
描述了软件到硬件的映射，反映了分布式特性。这是一个静态视图，表示系统的各个组件、子系统是如何部署的。
处理流程视图
捕捉设计的并发和同步特征。这是一个流程图，通过对进程的描述，将系统中的各个组件串联到一起。和上面的逻辑视图结合，可以得到一个相对动态的系统结构。
开发视图
场景视图
整合上述四个视图。通过一个个的用例流程将系统组件串联到一起。既可用于完善上面的各个视图，也可以用于验证上面的视图意图。
时序图
时序图中包括如下元素：角色，对象，生命线，控制焦点和消息。 时序图分两个方向：横向（对象），纵向（时间轴） 中间的实线与虚线箭头代表在各个对象之间传递的消息，调用方法。
消息
消息可以分为：
- 同步消息
- 异步消息
- 自关联消息
- 返回消息
片段
alt（判断）
loop（循环）
opt（switch）
par（并行）
泳道图
又叫 跨职能流程图。旨在展示工作流中每个步骤涉及的流程和职能部门。泳道流程图是一种特殊的图表可以展示出一个商业过程之间的关系，并展示为那个过程负责的功能板块（比如说部门）。泳道流程图专注于价值活动之间的逻辑关系，更好地展示每个价值活动的责任。
状态图
状态图也就是传统意义上的状态机描述，用于描述状态流转的过程。
状态图主要包括三个要素：
- 状态
- 变迁
- 事件
用例图
用例图主要用了四描述“用户、需求、系统功能单元”之间的关系。它展示一个外部用户能够观察到的系统功能模型图。 用例图主要包含几个要素：
- 参与制（Actor）：小人
- 用例（Use Case）：椭圆
- 关联（Association）：普通箭头实心线，箭头指向消息接收方
- 泛化（Generalization）：继承关系，三角箭头实心线，子类指向父类
- 包括（Include）： 普通箭头虚线，指向分解出来的用例
- 扩展（Extend）：普通箭头虚线，指向基类用例
参考文档：
