宝塔面板搭建DRAW.IO——一款免费开源的在线思维导图流程图绘制工具

一、前言

总想找一个免费开源的思维导图，这就发现了DRAW.IO。draw.io是一个开源的在线流程图绘制工具，支持docker部署，支持在服务器和本地搭建。

DRAW.IO支持多语言，所以，是支持简体中文的，程序自带上百套模板和种类繁多的流程图小工具，支持gdrive、OneDrive或本地存档，导入导出支持格式众多，使用体验相当不错。最重要的就是这些都是免费的。

这篇文章就来介绍下基于宝塔面板来搭建DRAW.IO，测试环境，宝塔面板7.0.3，docker管理器2.2。

二、具体的安装和部署

1、简介

项目地址：https://github.com/jgraph/drawio

演示：https://www.draw.io

演示：https://app.diagrams.net

2、docker部署

宝塔面板用户请安装好docker管理器，如果不是宝塔面板用户，那么请先安装docker。

宝塔安装docker（推荐）

用宝塔面板管理Docker还是比较方便的：

宝塔面板里的软件商店里找到Docker管理器，直接安装Docker即可。

手动安装docker

如果想手动在VPS上部署Docker也简单，直接参考Docker官网，以下命令是基于Ubuntu系统的演示，其它的请参考官网：

安装 Docker CE (社区版)：https://docs.docker.com/install/linux/docker-ce/ubuntu/
安装 Docker Compose：https://docs.docker.com/compose/install/#install-compose
Ubuntu系统安装Docker CE 如下：

sudo apt-get remove docker docker-engine docker.io containerd runc
sudo apt-get update
sudo apt-get install \
    apt-transport-https \
    ca-certificates \
    curl \
    gnupg-agent \
    software-properties-common
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
#测试一下有没有成功
sudo apt-key fingerprint 0EBFCD88
#有以下反馈就表示成功
pub   rsa4096 2017-02-22 [SCEA]
      9DC8 5822 9FC7 DD38 854A  E2D8 8D81 803C 0EBF CD88
uid           [ unknown] Docker Release (CE deb) <docker@docker.com>
sub   rsa4096 2017-02-22 [S]
sudo add-apt-repository \
   "deb [arch=amd64] https://download.docker.com/linux/ubuntu \
   $(lsb_release -cs) \
   stable"
sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io
#验证一下是不是正确安装
sudo docker run hello-world
#有以下反馈就表示正确安装
root@localhost:~# sudo docker run hello-world
Unable to find image 'hello-world:latest' locally
latest: Pulling from library/hello-world
0e03bdcc26d7: Pull complete 
Digest: sha256:4cf9c47f86df71d48364001ede3a4fcd85ae80ce02ebad74156906caff5378bc
Status: Downloaded newer image for hello-world:latest
Hello from Docker!
This message shows that your installation appears to be working correctly.
To generate this message, Docker took the following steps:
 1. The Docker client contacted the Docker daemon.
 2. The Docker daemon pulled the "hello-world" image from the Docker Hub.
    (amd64)
 3. The Docker daemon created a new container from that image which runs the
    executable that produces the output you are currently reading.
 4. The Docker daemon streamed that output to the Docker client, which sent it
    to your terminal.
To try something more ambitious, you can run an Ubuntu container with:
 $ docker run -it ubuntu bash
Share images, automate workflows, and more with a free Docker ID:
 https://hub.docker.com/
For more examples and ideas, visit:
 https://docs.docker.com/get-started/

Ubuntu系统安装 Docker Compose如下：

#安装 Docker Compose
sudo curl -L "https://github.com/docker/compose/releases/download/1.27.3/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose
#检测一下是不是成功安装
docker-compose --version

3、安装draw.io

Docker命令安装完成后，接下来就是安装draw.io了，直接执行以下命令：

docker run -it --rm --name="draw" -p 8080:8080 -p 8443:8443 fjudith/draw.io

完成后你就可以打开你的IP:8080看到draw.io的界面了，但是此时关闭了S-S-H窗口后则会消失，我们还需要宝塔的Docker容器部署守护。点击创建容器，把8080和8443两个端口添加进去就行了。
2-1668481818571

4、绑定域名与SSL

使用宝塔面板，直接在后台添加网站，做好DNS解析，绑定自己的域名，在后台给域名申请好SSL证书。最后，直接在宝塔面板的网站管理中添加反代即可。如下图：
3-1668482473122
使用Oneinstack或者LNMP一键包的朋友使用命令添加虚拟机或者绑定好域名，然后添加反向代@理。反向配置方法和Bitwarden自建密码存储系统图文教程绑定域名反代类似。

现在，打开你的域名就可以成功访问到draw.io在线思维导图了，支持Good Drive、OneDrive、GitHub或本地存档，导入导出支持格式也非常地丰富。
4-1668482670502

三、draw.io使用体验

draw.io支持使用中文。
5-1668483350410
draw.io支持画的图非常多，有BPMN 图（业务流程模型和标记图 Business Process Model and Notation）、UML 图（统一建模语言 Unified Model Language）、流程图、树状图、思维导图、网络拓扑图、线框模型图、原型图、文氏图、甘特图、机架图、时序图等。（点击放大）
6-1668483350465
如果要使用Google Drive、OneDrive、Dropbox、Github等网盘存储，只需要点击授权即可。
7-1668483350417
8-1668483352866

四、总结

用Docker安装draw.io在线思维导图程序只需要配置好Docker后部署起来也就是一句命令的事，不想手动安装Docker的话建议使用宝塔面板的Docker容器即可。draw.io在线思维导图程序对中文搜索不够友好，至于其它的已经做得相当不错了。

目录CONTENT

宝塔面板搭建DRAW.IO——免费开源的在线思维导图流程图绘制工具