一招教你获得你想要的图表

大家好，我是Qingzong。

相信大家在看相关专业Specification和其它技术文档的时候，枯燥而且乏味，如果要是有流程图，或者框架图，可以说是有了点睛之笔，让人耳目一新。

的确，有时候一张图的信息，胜过几千字的解释。文字的描述都线性的，而且相关专业词语很容易让人迷糊。而用图示去解释一个问题，很多时候能够让问题一目了然。

可能有的读者会说自己不写文章呀，是不是没有必要了解画图了?

我觉得这是不对，画图在我们工作中其实是非常有帮助的。比如，如果你想跟领导汇报一个业务流程的问题，肯定用图的方式比用文字的方式交流起来会更有效率，更轻松些，我自己常常通过这种方式跟领导反馈问题。

再比如说，如果你参与了一个比较复杂的项目开发，你也可以把代码的流程图给画出来，不仅能帮助自己加深理解，也能帮助后面参与的同事能更快的接手这个项目，甚至如果你要晋升级别了，演讲PTT里的配图也是必不可少的。

到这里相信大家都会有一个疑问，市面上那么多画图工具，我应该有哪个呢？相信大家都会说：成年人不做选择，都想要。这显然是不可能的。其实用那个画图工具不重要，只要能够清晰的表达自己思想即可，不必纠结哪款画图工具，挑一款自己画起来舒服的就行了。

1. 画图工具

我一直用的画图工具是：draw.io。

选择它的原因很简单，因为是免费开源，而且图片的源文件可以直接保存到Github的，相当于直接云备份到了Github仓库里。

draw.io画图工具可以在线画图，或者下载应用，或者作为visual studio code插件来使用。

我比较常用的方式是在线画图。在线画图工具网页面地址如下所示：draw.io

1.1 准备工作

因为draw.io可以和github进行关联，所有的图标可以实时的进行备份。所以你首先需要创建一个github仓库。如下所示：

1.2 创建一个图表

进入网址首页，点击"Start"。并选择"创建新绘图"。

对绘图进行命名，选择生成模板（我们这里因为是示例，所以选择的是"空白框图"），然后点击"创建"按钮。

选择前面创建的github仓库，并且授权和确定。

执行完上述指令后，将进入主页，具体如下所示：

如上图所示，主要分为三个区域，从左往右的顺序是「图形选择区域、绘图区域、属性设置区域」。

其中，最左边的「图形选择区域」可以选择的图案有很多种，常见的流程图、时序图、表格图都有，甚至还可以在最左下角的「更多图形」找到其他种类的图形，比如网络设备图标等。

再来，最右边「属性设置区域」可以设置文字的大小，图片颜色、线条形状等，而我最常用颜色板块是下面这三种，都是比较浅色的，这样看起来舒服些。

2. 框图示例

如下是一个用draw.io绘制的软件框图，作为参考示例：