如何在本地localhost运行diagrams.net（draw.io）源代码Web版

前置依赖要求 #

• 选择极简部署方案：本地已安装任意静态HTTP服务器即可，比如serve、http-server，或Nginx、Apache等常规Web服务
• 选择完整构建方案：需提前安装Node.js 16.x及以上版本，配套npm或yarn包管理器

方案一：极简静态部署（无需构建，最快可用） #

draw.io的Web端核心为纯静态前端资源，基础绘图功能不需要后端服务支持，操作步骤如下：

• 解压已下载的源代码压缩包，进入项目根目录下的src/main/webapp文件夹
• 在该文件夹路径下启动静态HTTP服务即可，常见启动方式参考：
  • 已安装npm的serve包：直接执行serve命令，访问终端输出的localhost地址即可
  • 已安装http-server包：执行http-server -p 8080，之后访问http://localhost:8080
  • 本地有Python3环境：执行python3 -m http.server 8080，之后访问http://localhost:8080
  • 也可将webapp目录整体挂载到Nginx、Apache等Web服务器的站点根目录，配置对应端口后访问

注意：该方案默认支持所有本地绘图、文件导出导入功能，不需要额外配置，无外网也可正常使用；若需对接云存储、多人协作等进阶功能，需额外部署对应后端服务。

方案二：完整构建生产版本 #

如果需要自定义修改配置、或打包生产环境可用的静态资源，可按以下步骤操作：

• 进入项目根目录，执行依赖安装命令：npm install
• 执行客户端构建命令：npm run build
• 构建完成后，所有可用的静态资源会输出到build目录下，将该目录用上述静态服务器挂载启动即可使用

常见问题排查 #

• 若访问出现空白页，检查静态服务的根目录是否正确指向了包含index.html的文件夹
• 若构建过程报错，检查Node.js版本是否符合要求，避免使用过高或过低的Node版本导致兼容问题
• 基础绘图功能无需额外配置数据库或后端服务，仅前端静态资源即可正常运行

内容的提问来源于stack exchange，提问作者Gokul K