在日常工作中,经常需要绘制流程图的小伙伴们大多有这样的体会:常用的流程图工具要么收费偏高,要么免费版有诸多功能或额度限制,使用起来总是不够畅快。 不过最近,小编发现了一款非常好用的开源流程图工具——draw.io。功能强大,具备专业绘图工具应有的功能。能够轻松帮你绘制各类图表,包括流程图、组织结构图、UML 图、网络拓扑图、BPMN 图等。现在你只需将其部署到本地环境,再配合 ZeroNews 工具发布至公网,就能实现“流程图自由”,再也不受付费或功能限制的困扰。 这是预览地址,可以直接打开看到效果:https://app.diagrams.net. img

一、下载安装 Draw.io

首先,打开官方 GitHub 仓库下载,并下载 Source.code 编译包 img
  1. 然后将下载的文件解压到一个目录
img
  1. 由于我们运行 drawio 服务会用到 Python 软件,接着我们先下载安装 Python 工具。点此下载
  2. 我们当前是用 Windows 验收,直接点击 Windows 下载即可。
img
  1. 下载完成之后,进行安装,需要注意一个点,我们在安装的时候,需要勾选”Add python.exe to PATH”,用于直接在命令窗口运行程序。
img

二、运行 Draw 本地程序

  1. 上述完成安装后,我们就打开我们的 CMD 命令窗口,并进入到刚解压文件的 Web 目录(目录根据您解压的位置复制过来即可)
cd /d D:\drawio\drawio-28.0.7\src\main\webapp
img
  1. 进入程序目录之后,我们需要通过 python 执行启动运行本地部署的 Draw 程序
python -m http.server 8000
img
  1. 可以看到 CMD 窗口已经执行成功。现在我们验证本地 web 访问。在浏览器输入 127.0.0.1:8000 后打开,等待几分钟过后,就可以看到我们可以正常访问我们的 Draw 页面了。
img img
  1. 当我们只需要在本地使用时,则直接通过这种方式打开就行。然后您就可以在上面画您的流程图了。如果需要通过公网访问此站点,那么您可以继续往下看。

三、创建 ZeroNews 隧道服务

  1. 登录 ZeroNews 控制台,选择您的系统(这里以 Windows 为例),按照对应的步骤和命令下载安装运行客户端。
img
  1. 认证并启动客户端后,您可以在「关联客户端」页面看到已经在线的客户端设备
  2. 接着,在 ZeroNews 管理平台的「自定义域名」管理界面中,添加域名(以 mydrawio 为例):
    1. 在「域名类型」中选择「默认域名」,并在「子域名前缀」中输入 mydrawio,然后点击「域名可用性检测」
    2. 若下方「接入域名」显示为「可注册」,则表示该域名当前可添加使用,点击单选框选择该域名
    3. 点击「提交」,完成域名添加
img
  1. 域名创建完成之后,在 ZeroNews 管理平台的 “隧道管理” 页面下,添加隧道
  • 选择隧道模式
    • 在“隧道模式”下拉框中,保持选择 “标准隧道”
  • 选择隧道特性
    • 在“隧道特性”下拉框中,选择 “Raw”(这是默认的透传模式)
  • 配置协议与带宽
    • 隧道协议:选择 “HTTPS”
    • 带宽(Mbps):在输入框中填写所需的带宽数值(例如 1)
  • 设置公网域名
    • 在“公网域名”选项中,点击选择 “自定义域名”
    • 在下方的“选择自定义域名”下拉框中,选择刚才添加的域名,例如 mydrawio.hn.takin.cc
  • 配置内网映射信息
    • 绑定设备:点击下拉框选择需要绑定的在线设备
    • 内网 IP:在输入框中填写内网 IP 地址,例如 127.0.0.1
    • 内网端口:在输入框中填写服务对应的端口号(drawio 平台的端口号 8000)
  • 完成添加
    • 点击右下角的 “确认” 按钮即可保存。
  1. 按照上述步骤创建完成之后,我们就可以得到一条可公网访问的隧道域名

四、公网访问 Drawio 服务

  1. 我们只需要复制上面的域名,然后在任意有网络的电脑浏览器即可打开我们的服务,并可以在上面进行流程图绘制等操作。
img
  1. 当然,关于 Drawio 还有更多的有趣的能力,大家也可以进行探索。
提示:文档截图及示例中的域名、隧道地址可能与您当前实际使用的不一致,请以 ZeroNews 控制台显示的实际地址为准。