使用drawio进行画图真的很方便(WEB版/Chrome APP版/桌面版)

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

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

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

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

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

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

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

---

现在的问题是，你会选择哪个软件来画图。

我说了，用Visio…

但是我换了公司的Macbook后，就再也不能用Visio，我到现在依然很怀念Visio的那个手绘图主题…后来我使用Processon，它在：
https://www.processon.com/
一个在线画图网站，界面比较友好。然而它并不是无限免费的，很有套路。

然后，我接触到了Chrome的一个插件app，即gliffy，它在：
chrome://apps/ 【用Chrome浏览器打开并在应用商店里下载，免费的】
也是很好用，基本上processon就是这个。

---

最后，我收敛到了drawio，这是个开源的玩意儿，非常好用。它在：
https://www.draw.io/?lang=zh
简单体会一下，你就会喜欢上它了。

我在想哪天这个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风格的网络拓扑图元素：

好了，就是这么简单。

---

补充下插件版和桌面版的，无疑插件版和桌面版要比WEB版的方便很多，至少不用自己搭建WEB服务了。

先说插件版。drawio当然是Google的咯。

首先下载这个Chrome APP插件：https://chrome.google.com/webstore/detail/drawio-desktop/pebppomjfocnoigkeepgbmcifnnlndla/related?hl=en-GB

然后就可以用了，Chrome浏览器输入APPs列表的URL： chrome://apps/

直接点击：

好了，就这么简单。

再说桌面版的，这个基本就和Windows上的Office Visio的使用习惯一样了，安装在本地。

先下载它，最好的途径就是它的github项目本身：https://github.com/jgraph/drawio
在README.md中找到下载链接：https://about.draw.io/integrations/#integrations_offline

各个平台的，应有尽有。我选择MacOS的：

下载下来，双击解压安装，就OK了：

当然了，你依然可以配置不同的语言。

---

浙江温州皮鞋胖，下雨进水不会湿。