因为会画图

不好意思，本拐无节操的标题党了一下嘿嘿
但是本篇本拐确实想和大家叨逼叨一下程序员的画图功夫
一个只会写代码的程序员，肯定不是一个优秀的程序员，因为对于程序猿来说
没有什么工作是可以低头就开整的
也就是说，万物万码都有一个设计的过程
这种设计，可以简单，可以复杂。
下面以一个很无聊的例子，给大家叨叨一下程序员工作中图的使用
注意,不光对于程序员,本文的一些工具同样适合其他工种

别问我其他工种是什么，我也不知道 :)

举个例子

拿一个简单的例子来说，我要处理一个老拐请假的需求。老拐是一个码农
他的组长是资深码农老K
大 BOSS 是大 H
还有一个 HR 小姐姐那么，如果用 伪代码 来表示这个流程的话，是：

老拐申请请假
老K审批
if(老 K 同意){
大 H 审批
if(大 H 同意){
请假成功！
}
}
请假失败！

如上,伪代码就是用简单,精练的语言将一个功能描述出来，如果伪代码写的没问题，那么再将伪代码转化成程序，就是一个完整的功能。比如这种：

// 老拐申请请假
let laoguai = new person()
laogua.name = "老拐"
let jiatiao = new requestNote()
jiatiao.type = "请假"
jiatiao.creator = laoguai
// 老K 审批
let laoK = new person()
laoK.name = "老 K"
let result = laoK.check(jiatiao)
// if 老 K 同意
if (result == true){
//......
}

可以看到，当我们写了好了一段程序的伪代码后，我们可以直接把他贴到我们的代码文件里,然后对着伪代码的流程一点一点去实现。不知道其他的同仁怎么去做，对于本拐来讲：
先用伪代码将一个功能表示清楚,再去细化实现,是一种重要的工作方式

写伪代码固然简单，但是对于复杂的功能，还是不大直观，于是，便有了流程图

流程图

很多 IT 人员，企业管理人员，都会使用流程图这个工具表示一些企业的工作流，比如上面这个需求，画成流程图是这种：

640?wx_fmt=png

对于大多数人员，流程图，我们只要记住这几点：

用圆角矩形表示开始和结束
用棱形表示判断
用矩形表示一个步骤的执行
每一条线都是有方向的，表示流程的进行。

另外，很重要的一点，因为程序是单向的，所以，标准的流程图也是单向的，即:
任何流程图中的流程都是单出的，对于一个确定的状态，只有一个流向
比如:上面的需求，演进一下，在请假成功以后,要抄送 HR 小姐姐. 在真正的工作中，这应该是一个并行的操作，即大 H 同意后，老拐的年假就批下来了，同时告诉一下 HR 小姐姐即可。
于是有一些刚工作的程序员或是 PM 会把图画成这样

640?wx_fmt=png

现在本拐可以认真严肃的告诉你,如果一个这种流程图甩过来，会直接告诉我：
你是新来的
因为显然,在最后一个判断之后,程序有了两条出口. 正确的操作,应当是这种

640?wx_fmt=png

跨职能流程图

因为很多业务规划,是分流程,跨部门的,于是在流程图基础上又有一种跨职能流程图，即在原有的流程图基础上加上泳道，这样每个部门，每个人，每个系统负责什么一眼便知,就像下面这样

640?wx_fmt=png

状态图

除了流程图以外，状态图也是程序员设计的神器之一(至少对于本拐来讲是的)
状态图是这样的:

用圆形表示状态.
用连接线标示状态状态之间的跳转。
连接线标识是为状态接受的各种输入。

这么说有一些抽像,我们举个例子，如用用状态图设计灯开关，如下：

640?wx_fmt=png

即:

当灯的是关的状态时,如果外界输入为开，它会跳到开的状态。
当灯的是关的状态时，如果外界输入为关，原地不动（留在原状态没有跳转).
反之亦然。

而且，一个完备的状态图，意味着在任何状态，对于任何输入，都是有解的，即知道对于对应的输入应该进行什么操作。状态图即是状态机的表示，它的背后有一系列的理论作为支撑，如果可以灵活的运用状态机对一些复杂场景进行分析和设计，可以达到事倍功半的效果。比如，各种语言的正则匹配，背后就是状态机的理论做支撑。举个简单的例子，我们要写一个程序识别一个字符串中有没有以 a 开始，中间是任意个 b，然后以 c 结尾的字符串，即：对于：
1232abcdd
abbbbcdddfds
23232abbccsxx
这种字符串，都会输出正确的结果，那么，这个状态图如下：

640?wx_fmt=png