Drawio流程图制作工具是一款十分好用的在线设计软件，用户可以在电脑上体验最简单的设计方式，在电脑上快速完成思维导图设计，将你的思维充分展现在图纸上。Drawio流程图绘图软件有着丰富的设计工具栏，在设计模板上快速完成四维图的制作，任意修改或者添加各种素材，让你的流程图更专业。

Drawio桌面版是一款非常不错的流程图绘制软件，支持各种各样的流程图绘制，基本上能代替Visio和亿图图示等软件了，并且软件开源跨平台，任何用户都能免费使用。

Drawio流程图制作工具特色

跨平台作图软件可以分为多种类别：

基于浏览器Web的。如：Draw.io、LucidChart、国内的processon.com等。

跨平台桌面APP。如：Draw.io。

代码生成式跨平台软件。如：graphviz。

桌面App不跨平台。如Windows上的Visio等。

Draw.io跨多个平台：

Web

Windows

macOS

Linux

多软件集成

集成了如下平台，可以将信息存储大任意地方。

Jira

Confluence

Dropbox

Github

Google

易用美观

拖拽

导入自己的图标库

自动布局

丰富模板

支持数学符号

有中文界面

导出多种格式，包括Visio

有JupyterLab插件，方便科学画图

在Linux下可以使用命令行界面来导出，默认与源文件同名

Drawio流程图制作工具快捷键

Click to connect and clone (ctrl+click to clone,

shift+click to connect). Drag to connect

(ctrl+drag to clone).

Click to rotate 90° clockwise. Drag to rotate.

Ctrl: Show Dialog, Alt: Origin, Shift: Ignore XML

Ctrl / Shift+Enter: New Line / Apply in Safari

Ctrl / Shift+Esc: Cancel Editing

Ctrl+Resize for non-recursive group resize

Ctrl+Meta+Resize for centered group resize

Drawio流程图制作工具使用说明

设定后台运行，开机自启，容器命名为 draw

一般使用的话，把程序用到的 8080 端口映射出来即可，如果需要用到 SSL 加密等，则会用到 8443 端口，具体可参见 docker 镜像说明页面。

然后浏览器输入 IP+端口即可访问。

要绑定域名的话，我这里使用的是宝塔面板，直接新建一个网站，绑定上需要的域名，FTP 和数据库这类不需要创建。

然后网站设置里新建反向代理，填写上自己的 IP+端口地址即可，如下图：

Drawio流程图制作工具使用方法

要说画图，最好还是用纸和笔，所见即所得，还没有工具的学习成本，直接撸起即可。但是这是假象。

你觉得纸笔画图的学习成本和使用计算机工具画图的学习成本哪个高？计算机画图工具成本高是吧？其实不是。

你还记得在你会用笔在被你蹂躏的皱巴巴的纸上在保持纸不被笔尖捅破的前提下，画上一个仅供识别的图案，花了多久吗？反正基本上都要很久，大概三岁？或者三岁多？至少也要两岁吧…

你还记得你第一次在iPad上学会划来划去花了多久吗？哦，不，我们小时候没有iPad，那就观察自己的孩子吧。我家小小大概5，6个月的时候会坐着简单比划iPad了。

我们总觉得翻书比操作手机电脑简单，我们总觉得纸笔画图比Office软件简单，那是因为我们已经忘记了我们学习翻书，学习握笔花了多么久的时间，好在那段时间在大人们眼里是枯燥痛苦的，但是在婴幼儿感知来的却是对陌生事物的兴奋感。

你现在同时会翻书和滑屏的前提下，达到同等的信息摄入，你会选择哪个？

总之，纸和笔画图并不简单，它涉及到一系列的动作配合，肢体协调，像我这种没有运动细胞写字很丑的，我的手绘图也往往达不到预期的效果，但是我用Visio就能画出不错的图。此外，如果一个手绘图很漂亮的人用Visio也能画出同样漂亮的图。

简单体会一下，你就会喜欢上它了。

我在想哪天这个URL失效了怎么办？我对互联网的链接是非常不信任的，没有任何URL被承诺是永久的。所以我在想，如果这个drawio像是个Visio下载到本地该有多好。

既然drawio是开源的，那么总是可以把整个项目给download下来，然后看看怎么玩。好在它是Java的，我还是懂点Java的。

这个项目有插件版，有桌面版，但是没有搞定 。web服务是千年不变的，所以我准备用标准的方式搭建web服务。

我准备在本地虚拟机里用Apache Tomcat搭建一个drawio web服务。

先部署tomcat：

[root@localhost ~]# mkdir tomcat

[root@localhost ~]# cd tomcat

[root@localhost tomcat]# wget http://mirrors.hust.edu.cn/apache/tomcat/tomcat-8/v8.5.37/bin/apache-tomcat-8.5.37.tar.gz

[root@localhost tomcat]# tar xzvf apache-tomcat-8.5.37.tar.gz

然后clone这个drawio项目：

[root@localhost tomcat]# git clone https://github.com/jgraph/drawio.git

接下来就是编译，部署，一气呵成：

[root@localhost tomcat]# cd drawio

[root@localhost drawio]# cd etc/build

[root@localhost build]# ant war

# 等待！

最后就是部署了，很简单，将ant编译生成的draw.war放在tomcat的webappps目录下就好了：

[root@localhost build]# cp ../../build/draw.war ../../../apache-tomcat-8.5.37/webapps/

[root@localhost build]# ../../../apache-tomcat-8.5.37/bin/startup.sh

Using CATALINA_BASE: /root/tomcat/apache-tomcat-8.5.37

Using CATALINA_HOME: /root/tomcat/apache-tomcat-8.5.37

Using CATALINA_TMPDIR: /root/tomcat/apache-tomcat-8.5.37/temp

Using JRE_HOME: /usr

Using CLASSPATH: /root/tomcat/apache-tomcat-8.5.37/bin/bootstrap.jar:/root/tomcat/apache-tomcat-8.5.37/bin/tomcat-juli.jar

Tomcat started

在虚拟机外面的宿主机浏览器敲入虚拟机的IP地址和drawio拼接而成的URL：

http://192.168.56.110:8080/draw/

选择简体中文(我是觉得看中文顺畅些，人多的地方可以选择英文)后：

创建一个新的图表

我比较喜欢的是里面的Cisco风格的网络拓扑图元素：