用 Markdown 写内容,用脑图展示

MoonMarkMind 是一个基于 MoonBit 实现的 Markdown 脑图可视化编辑工具。

左侧 Markdown 文档解析为右侧脑图,可直接在脑图里新增、编辑、删除、移动节点,并实时回写到 Markdown 文档中。

界面布局

主界面采用左侧 Markdown 编辑器、右侧脑图画布的双栏布局,中间分隔条可以拖动调整宽度。

Markdown 编辑器

左侧区域可以直接输入或修改 Markdown。选中脑图节点时,编辑器会高亮并滚动到对应源文档行。

文件操作

  • 新建文档:清空当前内容并重置为新文件。
  • 上传 Markdown:从本地选择 .md 文件。
  • 下载 Markdown:把当前内容保存为 Markdown 文件。

示例文档

顶部示例菜单可切换内置示例,用于快速查看标题、列表、文本样式、数学公式、正文块、代码、表格、图片的效果。

双向同步

修改左侧 Markdown 会更新右侧脑图;在脑图中进行结构编辑后,也会自动更新左侧 Markdown。

Markdown 语法

MoonMarkMind 以 Markdown 为真实源文件,脑图只是它的交互视图。语法结构解析遵循标题优先、列表补充的规则。

标题层级

####### 分别表示第 1 到第 6 层脑图节点。标题文本会成为节点标题。

列表层级

列表项可以作为标题或列表节点的子节点。超过 6 层的深层结构会用列表继续表达,避免生成无效 Markdown 标题。

正文内容

非结构文本作为节点正文保存,包括段落、代码块、表格、图片、链接、行内代码和数学公式等。其中,链接、行内代码和数学公式也可作为标题或列表文本。

安全渲染

Markdown 中的 HTML 会被转义;不安全链接和图片地址会降级处理,减少预览时的安全风险。

脑图视图

右侧画布提供多布局、多样式、缩放、平移、折叠和定位能力,适合浏览大纲和调整结构。

布局模式

  • 思维图:中心向左右两侧发散。
  • 逻辑图:从左向右组织结构。
  • 树状图:按层级纵向展示。

视觉样式

  • 线条:轻量、清晰,适合梳理结构。
  • 填充:节点边界更明确,适合展示和检查。

层级视图

可以选择精简、中等、全部层级。手动展开或收起后,层级菜单会进入自定义状态。

画布操作

支持鼠标拖动画布、滚轮缩放、适配视图、居中视图,以及双击画布快速居中。

节点编辑

选中节点后可以使用工具栏、快捷键或鼠标操作修改节点宽度和文档结构。

新增节点

  • 新建分支:在当前节点后创建同级节点。
  • 新建子节点:在当前节点下创建子节点。
  • 固定根节点会受到保护,避免误删或插入到错误位置。

编辑标题

双击节点或点击编辑按钮可进入标题编辑。保存后 Markdown 中对应标题或列表项会同步更新。

删除节点

删除会移除当前节点及其子树。固定根节点不能删除,避免整篇文档结构失去入口。

上移/下移节点

调整节点在兄弟节点之间的位置,支持同级重排,不可跨级移动;若想实现跨层级移动,参见拖拽移动。

展开/收起节点

点击节点圆点,可展开/收起其子树,并在圆点中显示子树节点个数。

撤销和重做

结构编辑、正文块编辑和节点内容修改会进入撤销栈。可以通过工具栏或快捷键恢复。

拖拽移动

节点可以用鼠标拖动到其他位置,支持同级重排和跨层级移动。

投放位置

  • 插入到上方:移动为目标节点前一个兄弟。
  • 插入到下方:移动为目标节点后一个兄弟。
  • 作为子节点:移动到目标节点内部。

预览反馈

拖动时会显示投放线、目标区域和提示文字。没有有效插入位置时,松开后会恢复原选择和样式。

跨类型转换

拖到标题区域时会按标题层级转换;拖到列表区域时整棵子树会规范化为列表,避免 Markdown 层级反转。

自动平移

拖动到画布边缘附近时,画布会自动平移,方便把节点移动到当前视窗之外的目标位置。

正文块和备注

节点不仅可以有标题,还可以携带正文块。正文块会保留在 Markdown 源文档中。

插入正文块

  • 笔记:插入普通段落。
  • 图片:插入 Markdown 图片语法。
  • 代码:插入 fenced code block。
  • 表格:插入 Markdown 表格模板。

编辑和删除

正文块悬停时会出现编辑和删除按钮。短块按钮居中显示,高块按钮默认在块底部居中。

正文折叠

节点正文可以单独折叠或展开,不影响节点子树的折叠状态。

图片预览

点击 Markdown 图片可以打开预览层,便于检查图片内容。导出 PNG 时会尝试内联可访问图片。

导出与分享

MoonMarkMind 支持导出源文档和脑图视图,适合存档、演示或分享。

Markdown

下载当前源文档,保留脑图编辑后的结构和正文块。

PNG

导出静态图片,适合放入文档、报告或演示文稿。

SVG

导出可缩放矢量图,适合后续排版和高清展示。

HTML

导出可交互 HTML,保留折叠、展开和图片预览等查看能力。

快捷键

操作 快捷键 说明
新建同级分支 Enter 在当前选中节点后方创建兄弟节点。
新建子节点 Tab 在当前选中节点下创建子节点。
删除节点 DeleteBackspace 删除当前节点及其子树,固定根节点除外。
移动节点 Ctrl + / Ctrl + 在同级节点中向上或向下移动节点。
折叠或展开 Space 切换当前节点子树的显示状态。
键盘选择 在脑图树中切换选中节点,并同步定位 Markdown 行。
撤销和重做 Ctrl + Z / Ctrl + Y 恢复或重放最近的编辑操作。
编辑节点 双击节点 节点进入可编辑状态。
居中视图 双击画布空白处 根节点回到视图最佳位置。
适配视图 单击适配视图按钮 画布中展示整个脑图,最小缩放尺寸为40%,最佳缩放尺寸为100%。
最佳视图 双击适配视图按钮 快速将画布缩放尺寸为100%。

边界和建议

结构建议

推荐用标题表达主要章节,用列表表达深层细节。超过 6 层时系统会自动使用列表继续扩展。

正文建议

代码块、表格、图片和公式建议作为节点正文使用。复杂正文可以保留,但结构编辑主要作用于标题和列表节点。

浏览器建议

推荐使用最新版 Chrome、Edge 或 Firefox。导出 PNG 时,跨域图片可能受浏览器安全策略影响。

保存建议

重要修改后及时下载 Markdown。Markdown 是真实源文件,适合提交到 Git 或继续用其它编辑器处理。

小提示:如果拖拽没有产生有效插入位置,MoonMarkMind 会恢复拖动前的选中状态。节点文字可以原生选中,点击节点外区域会清除浏览器蓝色文本选区。