女朋友不想开Processon会员，我魔改了一个无限制的在线绘图软件

前言

对于复杂的逻辑或者流程来说，画一画流程图可以帮助我们更好的捋清楚逻辑。平时我女朋友也偶尔会用 processon 来画一下流程图， processon 确实是一个很好的软件。

但是免费版只能创建 9 个文件，所以她平时在用的时候只能删了画、画了删，用起来不是那么方便，但是又不想为了这个东西开会员。

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

但她用了一会之后，感觉这个在线地址也不是那么的方便易用，提出了下面的问题：

1. 这个在线地址部署在国外，平时使用会受网络影响
2. 本身不提供文件存储的功能，它对接了多种存储介质，比如你可以下载到本地、或者托管到一些云盘或者 GitHub ，虽然说配置起来不是很麻烦，但也并不是开箱即用
3. 本身不提供文件管理功能，它可以导入一个个文件，感觉就像是一个编辑器而已，并没有把我创建的、编辑的流程图统一管理起来，没有类似文件/文件夹列表的功能

所以，基于上面的种种问题，我就想着基于 drawio 魔改一个的绘图软件，并且自己后端实现存储，这样就可以让这个东西免费无限制且易用。

其实说是魔改，我们改的东西不多，主要是改变存储、读取的方式，以及有一些功能不需要的可以做一些删减，最后就是自己做一个平台把文件与流程图串起来。

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

前端实现

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

把前端跑起来

入口是 src/main/webapp/index.html 这个文件，我使用了 express 起了一个服务，一来是充当静态资源服务器，二来是充当开发环境的代理，规避接口调用时的跨域问题。

新建一个 server.js 文件，填入如下内容

// server.js
const express = require("express");
const {
   
    createProxyMiddleware } = require("http-proxy-middleware");
const path = require("path");
const compression = require("compression");
const app = express();

app.use(compression());

// 静态资源服务
app.use(express.static(path.join(__dirname, "./src/main/webapp")));

// 接口转发
app.use(
  "/draw-io",
  createProxyMiddleware({
   
   
    target: "http://draw.eztool.top",
    changeOrigin: true,
    pathRewrite: {
   
   
      "^/draw-io": "/draw-io", // 转发的时候去掉前缀
    },
  })
);

// 启动服务器
const port = 3000;
app.listen(port, () => {
   
   
  console.log(`Server is running on http://localhost:${
     
     port}`);
});

然后运行一下这个 node 脚本，启动服务。

启动服务之后，这里有两点需要注意的地方：

1. 如果你的服务器动在 3000