MarkMind 的具体设计
昨天把产品的基本需求理了出来,但是实在不够具体,今天就将大的需求展开,分解为更具体的需求列表,然后列出一个 roadmap 出来
核心功能需求
- 使用 markdown 来编辑 mindmap
- 基于 markdown 定制的 mindmap 设计
- 运行效率和交互优化
其他必要需求
- 跨平台的 Native App
- 在各个组件都要考虑到极致
第一个核心需求:使用 markdown 来编辑 mindmap
所以首先需要的是一个 markdown 编辑器,然后监听编辑器的 onChange
,然后解析出一个适合 mindmap 渲染的数据格式,再将数据来渲染成为 mindmap
具体而言
1. 一个非常棒的 markdown 编辑器
最初我实现的 demo 中,直接使用了 textarea
来作为 markdown 的编辑器,稍微调整一下样式,显得不至于太 naive
。
但是这次我需要的是一个极致优秀的编辑器,目前对于 web 来说,code editor 可选项并不多
- ace
- codemirror
- monaco-editor vscode 所使用的编辑器
以上几个编辑器中,最让我心动的是 vscode 所使用的 monaco
, 但是考虑到定制化需求的问题(我可能有需要修改编辑器的需求),monaco
以及以上的几个编辑器都很那满足,代码量和设计问题,导致很难在之上重构
于是我选择了另外一个编辑器 atom
, 当然 atom
并没有提供 web 版本的编辑器,因为 atom
是基于 electron
实现,而我的应用考虑跨平台也是基于 electron
,所以我的基本想法是将 atom
中的编辑器核心部分剥离出来
2. markdown 解析为 mindmap 数据结构的算法
markdown 渲染为 mindmap 中间的最重要的一个步骤是如何将 markdown 数据结构化为 mindmap 所需要的数据结构,需要一个算法来解析,目前基本已经实现,具体方法为
- tokenize markdown 内容
- 实现一个 tree parser 将 tokens 转化为 tree
其中有挺多细节需要关注,包括对 markdown 不同类型的语法支持,如嵌套的列表,列表中嵌套 Heading等等问题
3. mindmap 展现层
逻辑上最关键的步骤是要将 tree 结构展现为 mindmap,需要考虑
- mindmap 的 layout:设计之初就限定只能为 auto layout,所以需要实现高效的 layout 算法,同时可能还要支持不同类型的 layout 如:
- 树形
- 鱼骨
- 目录
- 左右,上下,右,左,下等排列方式
- mindmap 的渲染层:目前的可选项为两种方式,第一是 svg,第二是 canvas
- svg:以前做的 demo 是基于
snap.js
来渲染,一个核心的问题是 svg 渲染的性能问题,一旦内容数量上来,会出现明显的卡顿现象 - canvas:这是这次想尝试的方案
- svg:以前做的 demo 是基于
- mindmap 的缩放,拖拽
- mindmap mini map
- mindmap 导出
- mindmap themes
第二个核心需求:基于 markdown 定制的 mindmap 设计
这可能是 markmind 最有趣的地方,我收集过非常多的 mindmap 设计,但是没有任何一个是针对 markdown 来设计的,这与其说是技术问题,不如说是一个单纯的设计问题,需要考虑
- markdown 中各种类型的组件渲染出来的效果,如图片,代码,列表,表格
- 大段文字的渲染,如何排版
- 整体的视觉风格问题
已经有了一些初步的想法,还在 sketch 上尝试各种方案中,下一篇就来分享一下
第三个核心需求:运行效率和交互优化
这是这个 app 想要做的的,不是单纯的做一个将 markdown 渲染为 mindmap 的小工具,而是一个小而极致的工具,不管是从运行效率和交互优化以及视觉上,都得尽量考虑到极致
- 在技术选型和设计之初就得考虑效率问题,如大文本渲染问题
- 交互上会考虑针对 markdown 编辑的优化,以前的 markdown 编辑器未注重的地方,如
folding
其他需求
产品目标是要做一个跨平台的 Native app,那么在技术选型之初就得考虑跨平台,所以基本技术框架是 electron
, 其他的技术
- 前端:React
- 渲染层:PIXI.js
- 编辑器:Atom
基本来说都是整个 web 中 state of art 的工具
Roadmap
现在还不能列出很细的 Roadmap,基本目标是国庆能够把 MVP 跑出来所以:
Milestones
- MVP(2017-10-07)
- 编辑 Markdown
- 解析 Markdown
- 渲染到 canvas 中(基本的场景,不会考虑所有的 markdown 组件,同时不考虑 layout 算法优化问题,主题配色问题)
好赞!
代码开源吗? 能贴出 github地址让我学习下吗?
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
不准备开源的,可能某些组件会开源,不过既然过程都有了,感觉比开源会更有意义些,毕竟是打算拿来卖序列号的
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit