上一篇地址

MarkMind 的具体设计

昨天把产品的基本需求理了出来，但是实在不够具体，今天就将大的需求展开，分解为更具体的需求列表，然后列出一个 roadmap 出来

核心功能需求

1. 使用 markdown 来编辑 mindmap
2. 基于 markdown 定制的 mindmap 设计
3. 运行效率和交互优化

其他必要需求

1. 跨平台的 Native App
2. 在各个组件都要考虑到极致

第一个核心需求：使用 markdown 来编辑 mindmap

所以首先需要的是一个 markdown 编辑器，然后监听编辑器的 onChange，然后解析出一个适合 mindmap 渲染的数据格式，再将数据来渲染成为 mindmap

具体而言

1. 一个非常棒的 markdown 编辑器

最初我实现的 demo 中，直接使用了 textarea 来作为 markdown 的编辑器，稍微调整一下样式，显得不至于太 naive。

但是这次我需要的是一个极致优秀的编辑器，目前对于 web 来说，code editor 可选项并不多

1. ace
2. codemirror
3. monaco-editor vscode 所使用的编辑器

以上几个编辑器中，最让我心动的是 vscode 所使用的 monaco, 但是考虑到定制化需求的问题（我可能有需要修改编辑器的需求），monaco 以及以上的几个编辑器都很那满足，代码量和设计问题，导致很难在之上重构

于是我选择了另外一个编辑器 atom, 当然 atom 并没有提供 web 版本的编辑器，因为 atom 是基于 electron 实现，而我的应用考虑跨平台也是基于 electron ，所以我的基本想法是将 atom 中的编辑器核心部分剥离出来

2. markdown 解析为 mindmap 数据结构的算法

markdown 渲染为 mindmap 中间的最重要的一个步骤是如何将 markdown 数据结构化为 mindmap 所需要的数据结构，需要一个算法来解析，目前基本已经实现，具体方法为

1. tokenize markdown 内容
2. 实现一个 tree parser 将 tokens 转化为 tree

其中有挺多细节需要关注，包括对 markdown 不同类型的语法支持，如嵌套的列表，列表中嵌套 Heading等等问题

3. mindmap 展现层

逻辑上最关键的步骤是要将 tree 结构展现为 mindmap，需要考虑

1. mindmap 的 layout：设计之初就限定只能为 auto layout，所以需要实现高效的 layout 算法，同时可能还要支持不同类型的 layout 如：
   • 树形
   • 鱼骨
   • 目录
   • 左右，上下，右，左，下等排列方式
2. mindmap 的渲染层：目前的可选项为两种方式，第一是 svg，第二是 canvas
   • svg：以前做的 demo 是基于 snap.js 来渲染，一个核心的问题是 svg 渲染的性能问题，一旦内容数量上来，会出现明显的卡顿现象
   • canvas：这是这次想尝试的方案
3. mindmap 的缩放，拖拽
4. mindmap mini map
5. mindmap 导出
6. mindmap themes

第二个核心需求：基于 markdown 定制的 mindmap 设计

这可能是 markmind 最有趣的地方，我收集过非常多的 mindmap 设计，但是没有任何一个是针对 markdown 来设计的，这与其说是技术问题，不如说是一个单纯的设计问题，需要考虑

1. markdown 中各种类型的组件渲染出来的效果，如图片，代码，列表，表格
2. 大段文字的渲染，如何排版
3. 整体的视觉风格问题

已经有了一些初步的想法，还在 sketch 上尝试各种方案中，下一篇就来分享一下

第三个核心需求：运行效率和交互优化

这是这个 app 想要做的的，不是单纯的做一个将 markdown 渲染为 mindmap 的小工具，而是一个小而极致的工具，不管是从运行效率和交互优化以及视觉上，都得尽量考虑到极致

1. 在技术选型和设计之初就得考虑效率问题，如大文本渲染问题
2. 交互上会考虑针对 markdown 编辑的优化，以前的 markdown 编辑器未注重的地方，如 folding

其他需求

产品目标是要做一个跨平台的 Native app，那么在技术选型之初就得考虑跨平台，所以基本技术框架是 electron, 其他的技术

1. 前端：React
2. 渲染层：PIXI.js
3. 编辑器：Atom

基本来说都是整个 web 中 state of art 的工具

Roadmap

现在还不能列出很细的 Roadmap，基本目标是国庆能够把 MVP 跑出来所以：

Milestones

• MVP（2017-10-07）
  • 编辑 Markdown
  • 解析 Markdown
  • 渲染到 canvas 中（基本的场景，不会考虑所有的 markdown 组件，同时不考虑 layout 算法优化问题，主题配色问题）