我自己设计开发的云端微脑图

微脑图是我N久以前自己设计开发的一款在微信中使用的脑图工具。

一直没好意思到处说，因为毕竟我不是专业程序员，这代码给人看了恐怕是要笑话的。但是吭哧吭哧费了那么多的劲，不见光岂不是浪费了吗？希望它能给大家带来一点便利，如果不能，至少可以带来一些启发。

废话少说，直接放手机截图：

什么是脑图？

脑图也叫思维导图，是一种简单、清晰的结构化文档，为什么说是文档呢？

因为本质上它不是图片，而是……而是……一种文档。特别适合记录自己的创意，产品规划什么的。

为什么不写个笔记来记录自己的想法？

因为笔记是线性的。

从阅读的角度说，你无法一眼掌控笔记的全局。线性就意味着顺序，你只能从头到尾这么看，或者你跳着看，总之很麻烦。

从编辑的角度说，你有一个细节想法想要容纳到这个脑图中去，你就得从头到尾找到一个可以容纳这个细节的段落，然后把文字塞进去，但是作为一篇文章，你还得注意文意逻辑，太麻烦了。而脑图是通过节点之间的隶属关系来维护这种逻辑。

我为什么要开发微脑图？

作为一个产品经理，各种脑图工具我是用够了，PC端有极度强大的mindmanager，也有轻巧的freemind，Mac上还有方便装逼但是特别讨人嫌的xmind，但是手机端没什么好用的，Mindmanager是有个手机版，但是好像收费？

而且我们的APP是不是太多了？有必要吗？

最关键的是：我总觉得手机端的脑图应该有一些特殊的操作方式，不应该和PC一样。PC有巨大的屏幕尺寸，可以用鼠标拖来拖去，手机端不应该也不需要这样做。

关于这款产品的好处和意义，你可以看下面的脑图：

（此图截自PC端微信，是的，你可以在PC端微信里使用，无需登录）

你一个人开发的？

但凡有点开发经验的技术人员，就会知道，这个玩意不简单，所以很多人不相信这是我自己一个人开发的产品。

是的，这就是我开发的。

那么我是怎么做的呢？

是这样的：前端部分的基础是用的老外的开源代码，我对它进行一些修改，后端完全是我自己撸的。

所以首先要向这位老外大牛致敬。

（详情见https://github.com/ondras/my-mind/wiki）

如果你真的看了源码和文档，相信你会非常佩服这家伙的，虽然他没有提供后端代码，但是假如你在墙外，完全可以直接用他的代码配合一些云服务商瞬间构建自己的脑图平台，几乎不需要怎么开发。

我是一个比较懒的产品经理，哦，应该说是独立开发者，或者说是一个技术票友，所以有几件事我没做：

一、在github上fork，分享，也许这样做有违开源精神，我只能说抱歉了，因为我实在没时间折腾那些，何况我写的代码实在是太烂了，它们仅仅只是跑得起来而已，放出去简直污染空气。

二、我没有对界面进行美化，因为这对我来说并不重要，而且保留原来的界面，也算是对原作的致敬吧。（事实是我没时间）

三、我没有写任何的产品文档，没有画任何的原型图，没有用ps做xx稿，除了一两个脑图。当初完成第一版的时候，我一边用它来画一个用于梳理思路的脑图，一边继续开发，用自己开发的工具来支持自己的开发，有点类似于金庸小说里的梯云纵，踩着自己的脚往天上蹭。

（这是当初某一个设计思路版本，其中很多想法没有实现，也有很多想法没有放在这里）

四、需要什么开发工具？说出来好笑，我没有部署任何开发环境，我只有生产环境，编辑工具就是ssh+vim，不管是javascript\css\html\php，我统统只是用编辑器写的。偶尔用chrome的console直接写js代码，运行好了再复制到vim中去。而且我也没有使用任何的前端打包工具。说实话，现在前端开发的工具链太长了，以我这样的榆木脑袋，实在是研究不透这么多东西。

这样做的坏处是调试起来要人命。

好处是：我坐公交的时候也可以用安卓手机里的超级终端进行开发，走在公园里想起来有个什么地方可以改的时候，也可以改改。

我女友说我这样做会把眼睛搞瞎，但是我觉得一边在公园看风景一边改代码，这属于享受。

原理是什么？

后端我不多说，核心数据结构的话，大致可以有两种做法，一种是把一张脑图直接存到一个字段里，还有一种是把所有节点都单独存储，采用第二种方式大概的好处就是将来实现多人同屏协作、同步修改的时候会方便一点。我目前采取的是前一种方式，毕竟懒，等哪天我要做协同的时候再说吧。

前端的原理是什么呢？

canvas+dom

注意，不是svg，也不是纯canvas，其实所有的节点都是用html的标签实现的，canvas只是在背后画上连线而已。我得说老外的想法还是666的。

简单地说：就是在一堆div后面放一幅画儿。

说到一些开发细节，这老外非常地道，他没有使用agular或者react甚至Jquery\zepto，写的是完全原生的js，自己实现了一整套视图更新机制，算不算简单的mvc呢，我也不知道，很漂亮就是了。

有没有说明书？

我一直有个理念，好的产品是不需要说明书的，你试试就知道了。要么功能简单易用，要么有好的客服，说明书是什么？谁看？如果一个产品火了，真遇到解决不了问题，你在百度知道、知乎里都可以搜索到你的问题，还要什么毛的说明书？

如果遇到BUG，请在我的公众号留言，我有两个主要的公众号，一个叫《魔创实验室》，一个叫《魔创产品派》，留哪个都行。不过《魔创产品派》里面会有更多我自己撸的，或者其他开源的好玩的东东。所以建议你们关注那个号，你搜“魔创产品派”或者“mo-pie"都行。

还缺什么？

缺了好多功能，因为做这个东西只是方便我自己，暂时无利可图，所以我已经停止更新了。

事实上，老外提供了云端截图、本地存储的功能，这些都被我暂时阉割掉了。截图的话，他的方案是用一个跑在Linux服务端的v8引擎工具截完图之后再提供下载，这个方案我尝试过，遇到了bug，最后放弃了。本地存储实际没有什么困难，但是我既然是自动保存到云端的，为了避免同步问题，所以没有加载本地存储的内容。所以暂时是不可以离线使用的（已登录后断网不怕，但无法离线重载页面）。

当然，最关键的功能其实是：分享，多人协同，这方面的事太多，我就没搞了。

时间太长，而我也在慢慢老去，关于这个东西的很多细节我几乎已经忘了。虽然我不是真正的程序员，但是我也像真正的程序员一样，看到自己写的垃圾代码，有种捂着鼻子不敢看的心情，哈哈。

这件事的根本意义到底是什么？

除了自己用，其实也是想探索一种极致的“敏捷开发”，看一个demo级的五脏具全可以用的“互联网产品”到底多快能做出来，当然，我以前也做过很多次类似的事情，只有这次是跟上时代了，因为这货毕竟还是用微信登录的，屌屌的。如果将来要做大众产品，我肯定会叫上好兄弟一起上的，届时这种狂野的做法有没有用呢？我想作为一种经验一定是有用的。

用起来安全吗？

目前来说应该是安全的，除非真有闲得没事“黑客”来搞我，对于这样的人，我只能说，你学会破坏之前，应该先学会构建，否则你只是菜鸟一只。

另外我也会备份数据库。

至于你的思维导图会不会被我看到？我比较懒，大抵只有出问题的时候才会去看的。