draw.io 网页版二次开发（1）：源码下载和环境搭建

目录

一 说明

二 源码地址以及下载

三 开发环境搭建

1. 前端工程地址

2. 配置开发环境

（1）安装 node.js 

（2）安装 serve 服务器

3. 运行

四 最后     

---

一 说明

        应公司项目要求，需要对draw.io进行二次开发，并将html界面通过iframe 嵌入到本公司产品中使用，但是由于功能限制，做到最后还是放弃了使用draw.io。但是之前的研究内容可不能浪费。便准备写个专栏进行记录，希望能够帮到需要将draw.io进行二次开发的朋友，其中有涉及到不正确的地方还请大家多包涵！

二 源码地址以及下载

        网页版在线使用地址：体验和使用地址（https://app.diagrams.net/）

        draw.io源码地址：git 下载地址（https://github.com/jgraph/drawio）

        在界面可以看到，当前最新版本为：v24.3.1（我做开发的时候版本为23.1.5，版本更新的还是挺快的），点击进去并下载，然后拿出来放到自己的地方进行解压，准备开发使用。

三 开发环境搭建

1. 前端工程地址

        打开文件夹可以看到，main里面包含三个文件夹，但是前端代码在：src\main\webapp 中，Java文件夹用处不大（因为我们要求数据保存到本地，所以Java这边没有用到）。

2. 配置开发环境

（1）安装 node.js 

        作为前端开发，node.js 肯定是已经安装好了的，就不多说，如果没有安装，网上有很多安装教程，看着安装了即可。

（2）安装 serve 服务器

        为了将draw.io运行起来，我使用了serve 服务器。这样就不用去修改package.json 文件了。

        安装很简单，使用npm命令即可：npm install -g serve

3. 运行

          在ide中（我是webstorm）进入到webapp文件夹下面，运行：serve 命令，成果后会有链接。如下图（我的serve版本有点低了，再提示最新版本，可以忽略）所示，就成功了，点击下面的链接，就会进入到draw.io的主界面。

四 最后     

        通过上面的步骤，就再本地通过代码运行起来了draw.io网页版。下一篇文章将进行draw.io的二次开发流程。