飞牛 fnOS 部署 Draw.io：在线流程图编辑器搭建全攻略

很多团队在用流程图、架构图时，要么依赖在线编辑器（数据上云、不隐私），要么依赖桌面软件（无法协同、版本混乱）。今天教你在 fnOS 上用 Docker 部署 Draw.io，数据完全自托管，随时随地通过浏览器访问，团队成员共用同一套图表库。

本文覆盖内容：

• Docker 一键部署 Draw.io
• 持久化存储配置，图表保存到 NAS 目录
• 反向代理配置，域名访问
• 团队协作和版本管理最佳实践
• 常见问题排查

一、Draw.io 是什么

Draw.io（现更名为 diagrams.net）是开源免费的流程图/架构图编辑器，支持离线使用，图表以 .drawio 格式保存（本质是 XML）。把它部署在 NAS 上，团队成员通过浏览器访问，数据完全在本地，隐私安全。

适合场景：

• 系统架构图、网络拓扑图
• 业务流程图、UML 图
• 产品原型草图
• 技术文档配图

二、Docker 快速部署

fnOS 支持 Docker，直接用命令行跑起来。

2.1 一键启动

docker run -it --rm \
  --name="drawio" \
  -p 8080:8080 \
  -p 8443:8443 \
  jgraph/drawio

参数说明：

• --rm：容器停止后自动删除（初次测试用）
• -p 8080:8080：HTTP 访问端口
• -p 8443:8443：HTTPS 访问端口

启动后浏览器访问：http://<fnOS主机IP>:8080

2.2 离线模式

如果只想用本地存储，不希望任何网络通信，访问时加参数：

http://<fnOS主机IP>:8080/?offline=1&https=0

offline=1 会禁用所有云存储功能。

三、持久化存储（推荐配置）

上面的命令容器重启后数据会丢失。生产环境必须做持久化存储，把图表目录映射到 NAS。

3.1 启动命令

docker run -d \
  --name="drawio" \
  -p 8080:8080 \
  -p 8443:8443 \
  -v /fnos/data/drawio:/data \
  --restart unless-stopped \
  jgraph/drawio

解释：

• -v /fnos/data/drawio:/data：将容器内 /data 目录映射到 NAS 路径 /fnos/data/drawio
• --restart unless-stopped：开机自动重启

提示：首次部署前先在 fnOS 文件管理中创建好 /fnos/data/drawio 目录。

3.2 目录结构建议

在 NAS 存储池上建立如下结构，方便分类管理：

/fnos/data/drawio/
├── projects/
│   ├── architecture/    # 架构图
│   ├── network/         # 网络拓扑
│   └── workflow/        # 流程图
├── templates/           # 常用模板
└── exports/             # 导出的 PDF/PNG

Draw.io 图表文件扩展名是 .drawio，可以用任意文本编辑器打开查看 XML 源码，方便接入 Git 版本控制。

四、通过反向代理域名访问

有了反向代理，可以用域名 + HTTPS 访问，配合 fnOS 自带的 Nginx Proxy Manager（见之前文章）效果更好。

4.1 Nginx 配置示例

server {
    listen 443 ssl;
    server_name drawio.yourdomain.com;

    ssl_certificate /etc/ssl/certs/drawio.crt;
    ssl_certificate_key /etc/ssl/private/drawio.key;

    location / {
        proxy_pass http://127.0.0.1:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

4.2 常用 URL 参数

五、团队协作和版本管理

Draw.io 不支持实时多人协作，但通过 NAS 文件共享可以优雅地解决团队使用场景。

5.1 通过 SMB/NFS 共享

fnOS 创建好共享目录后，团队成员直接在 Draw.io 里打开/保存 NAS 上的 .drawio 文件：

1. 浏览器打开 Draw.io
2. 文件 → 打开 → 选择「设备」→ 输入 NAS 路径 \\fnOS主机IP\drawio\projects\architecture\
3. 打开后直接编辑，保存即可写回 NAS

5.2 文件锁机制

Draw.io 自带文件锁，打开文件时会在同目录生成 .<filename>.lock 文件，防止其他人同时编辑。如果你的同事已打开文件，你会看到锁定提示。

5.3 接入 Git 版本控制

因为 .drawio 文件是 XML，可以用 Git 管理图表版本：

# 在图表目录初始化 Git 仓库
cd /fnos/data/drawio/projects
git init
git add .
git commit -m "初始化架构图"

# 每次修改后提交
git add architecture/system-overview.drawio
git commit -m "更新网络拓扑"

建议：多人协作时采用「分支开发 → Pull Request 合并」的工作流，避免版本冲突。

5.4 备份方案

图表文件很小，用 rsync 定时备份到另一块硬盘或远程服务器：

# 每天凌晨 3 点增量备份
rsync -avz --delete /fnos/data/drawio/ /fnos/backup/drawio-backup/

六、高级技巧

6.1 键盘快捷键

6.2 多页面管理

一个 .drawio 文件可以包含多个页面（标签页在最底部），适合将同一系统的不同视角放在一个文件里，比如「网络拓扑」「物理拓扑」「逻辑架构」放在一起管理。

6.3 导出为 PNG/PDF/SVG

Draw.io 支持导出多种格式：

• PNG/SVG：图片格式，适合嵌入文档
• PDF：矢量格式，适合打印
• VSDX：Visio 格式，方便给使用 Visio 的同事

文件 → 导出 → 选择格式即可。

七、常见问题排查

Q1：容器启动成功但无法访问

# 检查容器是否在运行
docker ps

# 查看容器日志
docker logs drawio

# 检查端口占用
netstat -tlnp | grep 8080

Q2：提示「连接被拒绝」

确认 fnOS 防火墙已放行 8080 端口，或在 fnOS 控制台添加入站规则。

Q3：图表文件打开空白

清除浏览器缓存，或尝试无痕模式。旧版本创建的图表在新版本中打开时有时需要转换格式。

Q4：多人同时编辑冲突了

Draw.io 不支持实时协作。如果两人同时打开，先保存者会生成锁文件，后者会看到提示。冲突时通过 Git 版本历史恢复：

git log --oneline
git diff <commit-id>  # 查看改动
git checkout <commit-id> -- file.drawio  # 恢复到某个版本

Q5：想导出 Visio 格式（.vsdx）

需要启用 EMF 转换器。在 docker-compose 中启用导出服务器功能：

git clone https://github.com/jgraph/docker-drawio.git
cd docker-drawio
docker-compose -f docker-compose-full.yml up -d

八、完整命令汇总

# 1. 创建存储目录
mkdir -p /fnos/data/drawio/projects

# 2. 启动容器（持久化版）
docker run -d \
  --name="drawio" \
  -p 8080:8080 \
  -p 8443:8443 \
  -v /fnos/data/drawio:/data \
  --restart unless-stopped \
  jgraph/drawio

# 3. 访问地址
# http://<fnOS主机IP>:8080
# 离线模式：http://<fnOS主机IP>:8080/?offline=1&https=0

# 4. 查看日志
docker logs -f drawio

# 5. 停止/重启
docker stop drawio
docker start drawio

总结

通过 Docker 在 fnOS 上部署 Draw.io，整个过程不超过 5 分钟。数据存在本地 NAS，访问只需浏览器，团队成员可以共用同一套图表库，通过 SMB 共享访问，通过 Git 做版本控制。

对于技术团队来说，架构图、拓扑图、流程图全部集中管理、版本可追溯，比散落在各人桌面或者依赖在线服务要安全方便得多。