最近由于工作原因，我需要把最近做的一些开发的架构图和流程图画出来。

我会边画边把学到的画图知识分享出来。

从程序员到架构师系列之一-学会画块状图Block Diagram

我之前在下面这篇文章分享过一个画流程图的软件叫做Diagram Designer。

介绍一个好用的免费流程图和UML绘制软件-Diagram Designer

我用它画了一个块状图(block diagram)，如下图所示。确实比较好用。

但是当我需要画另一种图，时序图(Sequence Diagram)时，发现如果用Diagram Designer提供的那些基础控件去绘制时序图中的虚线和矩形框叠加的效果，效率不太高。

我请教了身边的同事，他们告诉我一个免费的在线流程图绘制工具，我使用之后发觉功能确实非常强大，在这里分享给大家。

这个工具名称叫draw.io。

跟着我看看如何使用吧。

浏览器里输入draw.io:

点"Create New Diagram"开始编辑一张新图的编辑。大家如果习惯中文，在右下角的Language的地方选择中文即可。

接下来是选择图的类型。我觉得draw.io相比我之前推荐的Diagram Designer的一个优点，在于每种类型它都提供了一个模板，也就是说我们选择了图的类型之后，draw.io会自动给我们生成一个现成的流程图，很多我们需要画的元素都已经在模板上画好了，不用我们从零开始。

举个例子，现在我想画一个时序图，我在UML类别里找到了时序图的模板，如下图所示：

下图是选中模板后自动帮我创建好的时序图，已经自动帮我生成相当多的每张时序图都需要的元素了，我直接在这个生成好的半成品上做图就行了，节省了我大量的时间。

做图过程中，可以随时点击Save保存成本地文件，格式为XML。

下图是我画的时序图，保存成本地XML文件仅有3KB大：

做图完成后，可以导出成PNG，JPG, SVG等多种格式的图形文件和PDF。

大家可以看看我上面在draw.io里画的时序图导出成PNG之后的效果：

关掉浏览器后，下次如果想继续编辑，可以直接导入本地存储的xml文件即可。也可以干脆将正在编辑的图片信息存储到Github，Dropbox或者OneDrive这些在线存储介质里。

最后，draw.io也提供了能离线使用的本地安装版本。

根据您的操作系统来下载对应的安装包进行下载。

相信draw.io提供的这些强大的功能，一定能够帮助您画出专业的软件架构图和流程图出来。