把drawio用源码方式部署到Windows本地然后断网状态下也能正常画图这个需求听起来有点绕但真做下来你会发现它解决的是团队协作里特别典型的一个痛点内网环境要画架构图、网络拓扑、流程图但绘图工具要么连不上外部服务要么数据不能出内网要么在线版的功能受制于人家的服务器状态。我这次把drawio完整源码拉到Windows机器上从零构建、部署到本地服务走通了一条完全离线、不依赖任何外部节点的方案。这篇就记录一下我实际操作的完整过程以及过程中踩过的坑给有同样需求的朋友一个可以直接参考的路线。drawio本身是个纯前端的绘图应用核心逻辑都在浏览器里跑这决定了它完全可以做到本地化部署。但“可以”和“真正离线可用”之间隔着一堆构建配置、资源路径、字体渲染、浏览器策略的问题。我这次在Windows 11环境下用源码方式从GitHub拉取、npm安装依赖、Maven打包成war包再部署到本机Tomcat最后在完全断网的虚拟机里验证了新建、编辑、导出全流程。整个过程大概半天时间大部分时间耗在依赖安装和排错上。1. 部署前的关键问题为什么非要用源码方式1.1 源码部署和桌面版、在线版的本质区别先说清楚drawio的几种存在形态不然很多人会搞混。平时大家最熟悉的是桌面版也就是从官网下载的drawio-desktop安装包双击就能用数据默认存在本地文件里。这种形态用的是Electron外壳内部跑的其实就是web版drawio的代码只是被打包成了桌面应用。在线版就是draw.io这个网站直接浏览器打开数据可以存到云端网盘或者浏览器本地。源码部署走的是另一条路把drawio的web应用源码拉下来自己构建出完整的静态资源或war包再放到自己的Web服务器上。这样一来你得到的是一个完全由你掌控的绘图服务数据不出内网界面可以改功能可以裁剪甚至可以在它的基础上做二次开发嵌入到自己的系统里。让我用个类比桌面版等于买了一台自带屏幕的跑步机放家里就能跑在线版等于去健身房器械是别人的你得办卡还得看健身房几点开门源码部署等于你自己买零件组装了一台跑步机所有部件都放在你家仓库里想怎么改就怎么改。1.2 适合源码部署的典型场景结合我做过的几个实际项目源码部署主要适合这么几类情况第一物理隔离的内网环境。有些企业的研发网、生产网跟互联网物理隔离里面的机器别说访问draw.io官网连GitHub都连不上。但业务系统需要画图、做架构文档、生成网络拓扑图这种场景下把drawio源码打包好带进内网是最靠谱的方案。第二需要深度定制的场景。比如你想把drawio的Logo改成自己公司的想限制它导出某些格式想跟自己的用户系统做权限对接只有源码方式能做到。桌面版和在线版都是黑盒改不了。第三嵌入到自研系统里。drawio有很成熟的嵌入模式通过URL参数就能实现只读、指定初始图形库、加载指定模板之类的能力。你可以在自己的Web系统里用iframe把drawio嵌进来结合它的数据格式实现“在线画图入库保存”这种情况下源码部署是必须的因为你得保证嵌入的资源在本地不能被外网服务牵着走。1.3 我不建议源码部署的情况不是什么场景都得源码部署。如果你只是一个人用机器能联网直接下载桌面版最省事没必要折腾源码桌面版的功能跟源码构建出来的web版完全一致。如果你们团队只是临时协作、不涉及敏感数据在线版也更方便分享链接就能一起看。源码部署的维护成本是真实存在的每次drawio官方更新你得重新拉源码、重新构建、重新验证这个过程不像在线版那样自动完成。所以动手之前先想清楚我到底是因为什么需求才要用源码部署如果答案是“数据必须留在内网”或者“我要改它的代码”这条路值得走如果只是“今天想用一下”那直接桌面版就完了。2. Windows环境准备与源码获取2.1 需要准备哪些基础环境drawio的源码构建链比很多前端项目要重因为它不仅是JavaScript还包含Java后端和Maven打包逻辑。我这次在Windows 11上用的环境版本如下大家可以直接抄作业组件版本说明Git2.40拉取源码用也可以用GitHub Desktop代替Node.js18.x LTSdrawio构建对Node版本有要求太老或太新都可能出问题JDK11 或 17war包编译需要我用的OpenJDK 17实测没问题Maven3.8.x如果不想装可以用源码里自带的mvnw wrapperTomcat9.0.x部署war包用不建议用Tomcat 10后面会讲原因这里有个容易忽略的点Node.js的版本选择。drawio的前端构建依赖一堆npm包这些包对Node版本有兼容范围。我一开始用的Node 20.x结果某个老依赖编译报错后来切回Node 18 LTS才顺利跑通。所以如果你遇到莫名其妙的构建错误先检查Node版本。JDK和Maven主要是为了打war包。drawio的war包本质上是个Java Web应用虽然它的核心功能全在前端但war包里边的目录结构和Web配置还是遵循Java Servlet规范的。如果你不想装Java环境纯前端部署也是可以的后面第3部分会详细讲但war包方式是最标准、最不容易出问题的部署形态。2.2 获取drawio源码仓库选择与目录结构drawio的源码托管在GitHub上主仓库是jgraph/drawio。需要注意的是这个仓库默认分支是master包含完整的Web版源码、构建脚本、测试用例等。我在实际操作中用浅克隆方式拉取只拉最新一次提交省时间也省空间git clone --depth 1 https://github.com/jgraph/drawio.git拉下来之后你需要对目录结构有个基本认知。drawio的Web应用核心代码在src/main/webapp目录下这里面有大量的JavaScript源码、HTML模板、样式文件、图形库定义。src/main/java目录放的是些Java后端辅助类比如导出功能的一些处理逻辑。根目录下的pom.xml是Maven构建的核心配置drawio.war这个构建产物就是靠它打出来的。如果你只是想定制前端界面src/main/webapp里的大部分文件都可以改。比如里面有个index.html这是入口页面js目录下是drawio的核心逻辑resources目录下有图片、样式等静态资源。改完之后重新走一遍构建流程你的定制版drawio就出来了。我个人建议首次操作时先不要改任何代码原样构建一版跑通确认整个链路没问题再尝试定制。这样可以大大缩小排错范围不然你不知道是构建环境的问题还是你改的代码的问题。2.3 环境校验开工前先确认这三件事正式构建之前我习惯先把环境变量检查一遍避免build到一半才发现基础工具没配好。以下是三个关键词命令在CMD或PowerShell里依次执行node -v java -version mvn -vnode -v能输出版本号java -version能正常显示mvn -v能列出Maven版本、Java版本、系统信息这三关都过了环境基本就位。还有一个大家很容易踩的坑路径里不能有中文和空格。drawio构建过程中会生成大量临时文件和依赖目录如果项目放在D:\软件项目\drawio源码这种带中文的路径下某些工具解析会有问题。我统一放在D:\dev\drawio这样的纯英文路径下问题少很多。另外构建过程需要联网下载npm依赖和Maven依赖所以源码拉取和构建这一步你的机器需要能正常访问公共仓库。等你构建完、部署好之后运行时是完全离线的绘图、保存、导出都不需要网。3. 构建、打包、离线落地全流程3.1 前端依赖安装与源码构建环境就绪后先进入项目根目录执行npm install安装前端依赖。这一步是整个过程中最耗时也可能问题最多的环节。依赖数量大网络波动容易造成安装中断或者包损坏。我第一次执行时就遇到了某个包下载失败导致node_modules目录状态不干净。解决办法是删除node_modules和package-lock.json重新装cd drawio npm install安装完成后执行npm run build。这个命令会调用gulp等构建工具对前端代码做压缩、合并、生成生产环境资源。构建产物最终会输出到war目录或者target目录下具体看构建脚本的配置。整个过程5到10分钟取决于机器性能。构建完成之后用Maven打包war包。如果项目里有mvnw.cmd可以直接用它会自动下载对应版本的Mavenmvn package -DskipTests如果你只想要纯前端静态资源不想要Java那层壳子也可以不执行Maven步骤。drawio构建完之后src/main/webapp目录下的内容实际上就是完整的web应用资源你可以直接用任意静态服务器托管它。不过要注意有些功能比如某些导出格式的服务器端处理在纯静态部署下可能不可用所以最稳妥的还是走war包路线。3.2 war包部署到Tomcat的关键细节构建完成后在target目录下会生成drawio.war文件。把这个文件复制到Tomcat的webapps目录下然后启动Tomcat它就会自动解压并部署这个应用。访问地址是http://localhost:8080/drawio进入之后就是完整的drawio画布。这里我再强调一下Tomcat版本问题。我在部署过程中发现drawio的war包是基于javax.servlet API的而Tomcat 10及以上版本改用了jakarta.servlet命名空间直接部署会报ClassNotFound之类的错误。所以如果你用的是Tomcat 10.0要么换成Tomcat 9.x要么手动修改war包中的依赖和配置适配新命名空间。最简单的方案直接用Tomcat 9.0.x省心不折腾。还有一个细节Tomcat默认端口是8080如果这个端口被占了比如你的机器上还跑着其他服务可以改Tomcat的conf/server.xml文件把端口换成8081或者别的。这不算什么技术难题但解决了你“明明启动了Tomcat却访问不了”的困惑。部署完成后建议先做一轮功能验证新建一个空白图拖几个图形编辑一下文本然后试一下导出PNG和XML格式。如果这些都能正常用说明部署已经成功。3.3 完全离线运行断网环境下的表现验证war包部署成功不代表离线就一定能用因为浏览器里运行的东西有时候会静默请求外网资源。比如drawio内置的某些字体、某个图标库、某段远程脚本如果代码里硬编码了CDN地址断网的时候就会出现样式错乱、加载失败甚至白屏。为了验证这一点我专门做了一次测试把部署好drawio的Windows机器断网然后在浏览器里访问http://localhost:8080/drawio新建文件、画图、保存、导出逐个试了一遍。实测下来核心绘图流程完全正常drawio的静态资源和绘图逻辑都是本地打包的不依赖外网。导出PNG的功能也正常因为它本质上是浏览器canvas操作。不过有两个小问题值得注意第一drawio默认的图形库加载可能涉及外部地址具体表现是左侧图形库加载缓慢或者部分图形不显示。这个问题可以通过配置文件指定只加载本地图形库解决后面第4部分会讲到具体做法。第二如果你用了drawio的某些扩展功能比如在线字体、公式渲染器MathJax这些可能默认调用CDN资源。完全离线环境下公式可能渲染不出来。解决办法是把相关资源也下载到本地或者关闭这些扩展。根据我的实际测试核心画图功能不受影响但你要是追求“完全离线且所有功能可用”这一步不要漏。部署成功后的日常使用中还有一个差异点数据保存。drawio web版保存文件默认是让用户通过浏览器下载到本地文件分析师可以把文件以XML格式存为.drawio文件也可以存成图片或SVG。这个流程完全本地化数据不会自动上报到任何服务器对于有数据安全要求的场景这一点是非常重要的优势。3.4 自定义配置让离线部署更合身源码部署的最大红利就是“能改”。第一次跑通之后我建议你快速了解几个高频定制点它们都很简单但效果显著。第一个是修改应用名称。drawio的页面标题、左上角Logo文字默认显示draw.io你可以去src/main/webapp/index.html里搜索draw.io批量替换成自己公司的产品名。改完重新构建就可以了。第二个是默认图形库。如果你团队平时主要画网络拓扑可以在配置里只加载网络图形库减少加载时间。drawio的图形库相关内容在src/main/webapp/js/diagramly下面通过配置DEFAULT_OPEN_LIBRARY这类参数可以控制。第三个是导出格式限制。有些企业希望禁用导出PDF或者导SVG防止图纸外流。这个可以通过修改menu配置在界面层面隐藏对应的菜单项。虽然防不了懂技术的人但对普通用户是有效约束。第四个是嵌入模式。drawio支持通过URL参数直接嵌入到你的系统中比如http://localhost:8080/drawio?embed1layers1lightbox1这个能力在内部系统集成时非常有用我经常把drawio作为网维平台的在线绘图模块嵌进去让运维人员画拓扑图然后保存成XML入库。这个需求是源码部署的核心动力也是桌面版替代不了的。4. 离线使用排坑我遇到的5个实际问题4.1 npm install阶段卡住或失败现象npm install执行了很久最后报ETIMEDOUT、ECONNRESET之类的网络错误。原因npm默认源在国外网络波动容易断尤其是依赖包数量大的项目。解决办法有两个一是切换npm镜像源到国内开源镜像二是设置npm的超时时间和重试次数。我个人用的组合是npm config set registry https://registry.npmmirror.com npm config set fetch-retries 5 npm config set fetch-retry-maxtimeout 60000设置完之后再执行npm install速度快了很多。注意这只影响下载依赖的速度不影响运行时是否离线。4.2 构建时Node版本不兼容现象npm run build的时候某个插件报错比如sass相关的报错或者提示Error: error:0308010C:digital envelope routines::unsupported。原因Node.js版本太新某些旧依赖用的OpenSSL加密算法已经不被默认支持。我在Node 20.x上就遇到了这个错误。解决办法是切回Node 16.x或18.x LTS版本。Windows下推荐用nvm-windows管理Node版本切换非常方便nvm install 18.20.4 nvm use 18.20.4切换之后重新删除node_modules文件夹再执行npm install和npm run build基本就通了。4.3 Tomcat 10部署war包起不来现象war包扔到Tomcat 10的webapps目录Tomcat启动后应用显示404或者后台日志报ClassNotFoundException: javax.servlet.*。原因Java EE在2019年把javax命名空间迁移到了jakartaTomcat 10起只认新命名空间而drawio的war包还是基于旧的javax写的。解决办法换Tomcat 9.0.x或者在Tomcat 10上做兼容处理。十次里有九次直接换Tomcat 9是最快路径完全不需要动代码。4.4 导出PNG出现中文乱码现象图里写的中文导出成PNG后变成方块或乱码。原因drawio在浏览器里渲染文本用的是canvascanvas绘制中文依赖当前操作系统的字体库。如果Windows系统缺少中文字体或者Tomcat服务运行的系统账户字体设置有问题就会导致导出时找不到合适字体。解决办法在Windows上安装完整的中文字体包比如微软雅黑、宋体、黑体。正常情况下Windows中文版都自带这些字体但如果是精简版系统或者服务器核心版可能没有。还有一种情况是你改了drawio的默认字体配置指定了一个不存在的字体名也会出问题。检查一下drawio设置里的字体列表确保默认字体是系统中存在的。4.5 断网后图形库缺失或加载缓慢现象断网环境下打开drawio首页整体能出来但左侧图形库面板转圈很久某些图标显示不出来。原因drawio的一部分图形库定义文件默认引用的是GitHub上的图片资源或外部CDN这在在线版本中没什么问题但离线环境下就抓瞎了。解决办法把所有图形库资源同步到本地并修改配置让drawio优先从本地加载。具体做法是把src/main/webapp/resources目录下的图片资源检查一遍把里面引用外部URL的地方都改成相对路径然后再重新构建。需要注意drawio的内置图形库大部分是本地自带的在resources/dia目录下但“更丰富的图形库”往往要联网拉取你要是用不到那些额外图形直接在设置里关闭就行。5. 从部署到上线一些进一步建议源码部署drawio这件事跟学游泳一样看十遍教程不如自己下水游一趟。你把war包跑起来的那一刻再回头理解drawio的架构、它的前后端边界、它的资源加载机制会比单纯看文档清晰得多。我实际部署完这套系统之后还做了一步额外的增强把drawio嵌入到了团队内部的Wiki系统里。做法是在Wiki的页面模板中加入一个iframe地址指向http://localhost:8080/drawio?embed1layers1这样团队成员在浏览文档的时候可以直接在页面里画图画完保存成XML文件挂到文档附件里。这个流程跑顺之后团队的架构图、网络拓扑图、时序图都统一用这套系统产出了格式统一、历史可追溯、数据不出内网。最后再说一个我在操作中摸索出来的小技巧如果你需要在内网多台机器同时使用没必要每台机器都部署一套Tomcatdrawio只需要在一台内网服务器上部署然后其他机器通过浏览器访问这台服务器的地址就行。这样管理成本更低升级也只需要动一台机器。当然如果断网是常态建议部署一台内网服务器时顺便把源码和构建工具也留存一份在本地下次升级直接在那台机器上重新构建完全不需要外网。drawio这套东西的原理其实很简单就是一个静态资源很重的Web应用源码部署也不复杂。但越简单的东西越容易在细枝末节上卡住人。希望这篇记录能帮你少走点弯路尤其是Tomcat版本和Node版本那两个坑直接照着避开就行。