为什么我选择自托管 Draw.io？

最近在整理一些架构图和流程图时，一直在寻找一款既顺手又安全的绘图工具。市面上虽有不少在线白板和绘图服务，但对于稍微敏感一点的架构设计，直接上传到第三方平台总让人心里不踏实。数据隐私和可控性，成了我选择工具时的首要考量。

Draw.io（现更名为 diagrams.net）作为一款开源且功能强大的绘图工具，相信很多技术人员都不陌生。它完全在浏览器端运行，逻辑清晰，上手简单。与其使用官方的在线服务，不如干脆把它部署在自己的服务器上，打造一个完全私有化的绘图白板。今天就和大家聊聊我是如何折腾这个过程的，以及一些避坑指南。

准备工作

在开始之前，你需要准备以下几样东西：

一台 VPS 或本地服务器：配置不需要太高，1核1G内存的鸡毛小鸡足以流畅运行。当然，为了保证访问速度，建议选择延迟较低的节点。
安装好 Docker 和 Docker Compose：这是目前部署服务最方便的方式，省去了配置环境的繁琐步骤。
一个域名（可选但推荐）：如果你不想每次都输入 IP加端口，建议配置一个域名，并配置好 SSL 证书。

使用 Docker 快速部署

官方的 Docker 镜像已经非常完善，我们只需要几行命令就能启动服务。这里我选择使用 jgraph/drawio 这个镜像。

1. 创建工作目录

首先在你的服务器上创建一个目录用来存放配置文件和数据（虽然 Draw.io 主要是无状态服务，但有个目录方便管理）。

mkdir -p ~/drawio
cd ~/drawio

Nginx 反向代理配置示意图

通过 Nginx 配置反向代理实现 HTTPS 访问的流程示意图。

2. 编写 Docker Compose 文件

创建一个 docker-compose.yml 文件，内容如下：

version: '3'
services:
  drawio:
    image: jgraph/drawio:latest
    container_name: drawio
    restart: unless-stopped
    ports:
      - "8080:8080"
    environment:
      - PUBLIC_URL=/  # 如果是根路径访问，保持默认
      # 如果是子路径部署，例如 http://domain.com/drawio，则改为 "- PUBLIC_URL=/drawio"

这里我们将容器的 8080 端口映射到主机的 8080 端口。PUBLIC_URL 变量非常重要，如果你计划通过反向代理（如 Nginx）并使用子路径访问，记得修改这里的值。

3. 启动服务

配置完成后，执行以下命令启动容器：

docker-compose up -d

等待几秒钟，服务就启动完成了。此时，直接在浏览器访问 http://你的服务器IP:8080，就能看到熟悉的 Draw.io 界面了。

配置反向代理与 HTTPS（Nginx 示例）

直接暴露 IP 和端口显然不是长久之计，也不安全。通常我们会配合 Nginx 做反向代理，并启用 HTTPS。

假设你的域名是 example.com，你想通过 drawio.example.com 来访问，Nginx 配置如下：

server {
    listen 80;
    server_name drawio.example.com;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl http2;
    server_name drawio.example.com;

ssl_certificate /path/to/your/fullchain.pem;
    ssl_certificate_key /path/to/your/privkey.pem;

# SSL 优化配置省略...

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;

# WebSocket 支持（如果需要特定功能）
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

配置好 Nginx 后，重载配置即可生效。现在你就可以通过加密的域名访问你的私有绘图板了。

进阶配置与玩法

上面的步骤已经完成了基础部署，但既然是自托管，我们当然可以玩得更多。

1. 数据存储与后端集成

默认情况下，Draw.io 可以将文件保存到本地浏览器、Google Drive、OneDrive 或 GitHub。

在自托管场景下，如果你想要把文件直接存储在服务器上，官方 Docker 镜像默认是不带持久化后端的，它更多依赖客户端存储。不过，你可以利用它自带的“Device”存储功能，或者配置第三方存储端点，如 Tiki 的 Draw.io 插件或者集成 MinIO。对于大多数个人用户来说，使用“下载 XML/SVG”到本地保存，或者配合 WebDAV 协议挂载到本地磁盘，已经足够使用。

如果你有更高的协同需求，可以考虑结合 NextCloud，在 NextCloud 的应用商店中安装 Draw.io 插件，这样就能在 NextCloud 里直接编辑并保存文件，体验会更上一层楼。

2. 性能优化与配置调整

由于 Draw.io 是重度依赖前端 JavaScript 的应用，加载速度和浏览器性能很关键。为了让访问更快，可以在 Nginx 层面开启 gzip 压缩，加速静态资源的传输。

此外，如果你的服务器带宽吃紧，也可以通过 Nginx 配置缓存策略，对一些静态资源进行缓存。不过考虑到绘图工具的特性，大部分数据还是动态交互，优化的重点还是在网络延迟和客户端编译速度上。

常见问题与解决思路

Q: 访问时出现 Blank Page 或者转圈加载不出来？

A: 这通常是因为 PUBLIC_URL 环境变量设置错误。检查你的 Docker Compose 配置，确你是通过根目录访问还是子路径访问，两者必须一致。另外，检查浏览器控制台是否有报错，可能是跨域或者资源加载失败的问题。

Q: 能否集成到现有的系统中？

A: 可以。Draw.io 提供了丰富的嵌入选项，你可以通过 URL 参数传递 XML 数据，或者嵌入 iframe 到你的 Wiki、后台管理系统中，实现无缝集成。

总结

自托管 Draw.io 是一个非常低成本但高回报的折腾项目。整个过程不需要复杂的代码编写，Docker 一把梭，就能换来一个随时可用、数据隐私有保障的专业绘图工具。

对于技术人员来说，画图是日常技能之一，拥有一个随时待命的私有画板，无论是梳理思路还是设计架构，都方便了不少。希望这篇简短的教程能帮到有类似需求的朋友，如果你在部署过程中遇到什么问题，欢迎在评论区交流探讨。

祝大家画图愉快！

如何自托管 Draw.io 打造私有绘图白板