用 NodeJS 开发一版在线流程图网站

源码：github.com/maqi1520/Cl…

背景

对于程序员来说，每天除了写代码，接触较多的可能是各种图表了，诸如流程图、原型图、拓扑图、UML 图以及思维导图等等，我们较为熟悉的是 ProcessOn 了，可能你还在用 ProcessOn 免费版， 总共十张图，画完这张图下载下来删除再重新画另一张。前些天，在群里看到有小伙伴在邀请新用户注册，可以获得 3 个文件数。奈何大家都注册了，没注册的只有少数，作为前端程序员，我在想是否可以将它的 js 扒下来，在本地起服务器使用？

获取前端静态资源

说干就干，使用 chrome 右键另存为 ，可以直接将这个网站使用到的静态文件保存下来，但是保存下来的静态资源目录都自动替换了本地，但我想要的是跟线上一样的目录结构。

难道右键一个一个 JS 另存为吗？

并不是，可以使用一个 chrome 插件 Save All Resources 把整个网站的静态资源 down 下来，

安装之后在 chrome devTools 会多出一栏

点击 ​​save All Resources​​ 就可以了，全部 down 下来了.

解压之后，我们一起来看看目录

不光这个域名下的静态资源，其他域下的静态资源也都 down 下来了，其实这已经完成一半了。

将全部资源拷贝出来，然后将 html 文件重命名为 index.html​ 使用 http-server 在当前目录起一个服务，这样就成功访问了。能够画流程图了，只不过数据不能保存。

那么该如何保存数据呢？

开发一个 chrome 插件

一开始我的想法是开发一个 chrome 插件，类似掘金的 chrome 插件​一样， 点击就可以打开，然后重写 jquery 的$.ajax​ 的方法，使用 localStroage 存储数据，这样可以更加方便我们使用，实现起来应该不难吧。

然后就去找如何开发一个 chrome extension。 我在 github 找到了 chrome-extensions-samples​ 然后对着里面的 demo，尝试了下。但结果遂不人愿，因为 ProcessOn 中大量使用了eval（231, 243, 237); padding: 0px 3px; border-radius: 4px; overflow-wrap: break-word; text-indent: 0px;">​iframe​​ 中， 这样可以就可以了。略微开心了一下，一起看下我们的 hello Word Chrome extensions。

接下来准备保存数据。

iframe 内部想要跟父容器的通信可以使用 parent，又遇到了问题。

因为 chrome extension iframe 是直接打开的，并不是在一个 http 服务下，然后我又试了 ​​postMessage​​ 等方法，还是不能通信。

既然不能做到纯离线的，那只能开发一个在线版本好了