源码：https://github.com/maqi1520/Clone-processon
背景
对于程序员来说，每天除了写代码，接触较多的可能是各种图表了，诸如流程图、原型图、拓扑图、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方法。chrome-extensions 认为这个方法不安全。
又然后根据官网 Using eval in Chrome extensions，根据里面的介绍，将 html 放入一个 iframe 中， 这样可以就可以了。略微开心了一下，一起看下我们的 hello Word Chrome extensions。
接下来准备保存数据。
iframe 内部想要跟父容器的通信可以使用 parent，又遇到了问题。
因为 chrome extension iframe 是直接打开的，并不是在一个 http 服务下，然后我又试了 postMessage 等方法，还是不能通信。
既然不能做到纯离线的，那只能开发一个在线版本好了
