各位老铁们，大家好，今天由我来为大家分享我女朋友不想注册Processon会员，所以我神奇地修改了一个无限制的在线绘图软件。，以及的相关问题知识，希望对大家有所帮助。如果可以帮助到大家，还望关注收藏下本站，您的支持是我们最大的动力，谢谢大家了哈，下面我们开始吧！

于是找到了一个很棒的开源流程图软件——draw.io，里面也提供了在线地址——drawio在线地址

但使用一段时间后，她觉得这个网上地址不太方便好用，于是她提出了以下问题：

该上网地址部署在国外，正常使用会受到网络影响。它不提供文件存储功能。它连接到多种存储介质。比如你可以下载到本地，或者托管在一些云盘或者GitHub上。虽然配置起来并不容易。虽然很麻烦，但是并不意味着它不提供开箱即用的文件管理功能。它可以将文件一张一张地导入。感觉就像一个编辑器。它没有统一管理我创建和编辑的流程图。文件/文件夹列表式功能

因此，基于以上问题，我想到修改一个基于drawio的绘图软件，并在自己的后端实现存储，让这个东西可以免费，无限制，好用。

事实上，据说这是一个神奇的变化。我们没有改变很多事情。我们主要改变了存储和读取的方式，并对一些功能不需要的进行了一些删除。最后，我们做了一个连接文件和流程图的平台。

这是该项目的体验地址，欢迎大家体验：体验地址

前端实现

首先，下拉drawio代码。拉下来后，只需要关注src/main/webapp目录即可。所有前端代码都在里面。

把前端跑起来

入口是文件src/main/webapp/index.html。我使用快递来设置服务。首先，它充当静态资源服务器。其次，它充当开发环境的代理，避免跨域接口调用。问题。

然后运行这个节点脚本来启动服务。

启动服务后，有两点需要注意：

如果你的服务器运行在3000端口，那么你需要访问http://localhost:3000/?dev=1修改src/main/webapp/index.html的以下代码，否则加载静态资源会出现问题

随意修改一些东西，然后打开上面的链接。如果看到修改生效，就证明我们的开发环境已经启动成功。

初始化数据

简单看了一下drawio代码，发现流程图的内容是xml格式的。对于文件初始化过程，大致可以找到App.js的如下代码。绿色代码是我新添加的。

模拟数据，将文件的标题和内容实例化到LocalFile 中，然后调用loadFile 将其加载到画布上。

那么我们可以得到如下图所示的流程图

这里实际的实现是根据id调用后端接口获取标题和内容，然后加载到编辑器中。至此，数据读取已经完成。

保存数据

由于上面我们选择的存储介质是LocalFile，所以保存内容的逻辑在LocalFile类中，具体在下面打印的位置

在此位置，我们可以将数据同步到后端进行更新。

除了内容之外，我们还需要考虑标题的更新。

当标题更新后，我们会转到以下方法。在这个方法中，我们可以向后端发送接口来更新文档的标题。

至此，基本的数据流问题就已经解决了。在流程图层面，我们解决了读取数据和更新数据的问题。解决了这两个问题之后，我们就可以将流程图内容信息存储在自己的服务器中了。

其他配置项修改

其他配置项也有一些修改。这是根据我们自己的情况来看看我们不想要什么，需要改变什么。

这里你要耐心阅读它的源码。没有技能。找到你要改的地方，然后改。这里我举两个例子。

一、图标的修改

只需将上面的图标修改为下面文件中您想要的图标即可。

菜单位于下面的文件中。基本上，找到您不想要的内容并将其注释掉或删除。

打包部署

本项目的打包工具使用ant，这是一个基于java的打包工具。所以要打包，首先要安装java的jdk和ant。

安装完成后，进入/etc/build目录，执行ant命令，就会发现打包成功了。

部署的时候我是用nginx开一个目录，然后就偷懒了。我把整个webapp目录都扔了上去，但是webapp目录很大，我不想每次都通过ftp工具上传。

所以我构建了一个git 存储库，将本地webapp 目录推上来，然后将存储库拉到服务器上。这样做之后，我每次通过ant打包完代码后push，然后pull到服务器上，代码就会更新。

另外需要注意的是，这个项目的前端并没有使用一些现代的打包工具，打包后的文件名不会有哈希值。

为了避免缓存导致代码不生效的问题，我在配置nginx时使用了协商缓存。配置如下

location ~* \.(js|css|html)$ { add_header 缓存控制无缓存； }

首屏加载优化

打包部署完成后，发现加载还是相当慢。一是因为我的服务器带宽比较小，二是确实加载了几个比较大的js文件。

首先app.min.js是主包，不能省略。然后查看stenceils.min.js和extensions.min.js，看看它们是否不能阻塞主进程。

我看了一下stenceils.min.js 的内容。它充满了模板。好家伙，难怪这么大。其次，关于extensions.min.js，我查看了/etc/build/build.xml包文件。大概是做了一些扩展逻辑，比如一些导入导出。

因此，这两个包是否加载都不会影响主绘图流程的正常使用。

这里是上面提到的两个包的加载入口。只要让加载函数加载第一个包后执行回调函数即可。

之后，我们不需要等待包加载就可以开始使用主要的绘图逻辑。这个包加载了13S，也就是说我们不需要等待这13S。

首屏加载速度提升10秒以上。啊兄弟们，好可怕啊~

没有缓存的情况下，首屏加载大约需要3秒，还是相当流畅的。

平台实现

我还使用React实现了一个用户登录和文件管理的平台。目前的功能包括：

目前比较简单，只提供最基本的文件管理功能。这个平台和上面的绘图页面可以理解为两个项目。

创建或打开时，会从此平台跳转到绘图项目：

导出const openDraw=(id)={ const dev=location.href.includes(‘localhost’);让网址； if (dev) { url=`http://localhost:3000?dev=1id=${id}`; } else { url=`http://draw.eztool.top/draw?id=${id}`; } window.open(url);};