RMind

RMind = React + Mindmap

基于 React Hooks 与 flex 布局，实现了大部分功能的思维导图。

An almost-full-function Mindmap web app developed with only React Hooks and flex layout.

在线演示：RMind Demo

📄 示例用导图文件

特点

• 完全使用 React Hooks 开发，所有功能均由箭头函数实现
• 用 flex 布局完成思维导图排版，唯一用到 canvas 的地方是绘制节点连接线

支持

• 节点的增删改等基本功能
• 拖拽操作
• 撤销/重做
• 导入及导出 .km（百度脑图） .md（Makrdown） .txt 格式的思维导图
• 将导图保存为图片
• 切换主题

演示

• 拖拽操作

• 键盘操作

• 切换主题

操作方式

鼠标操作

• 单击选中节点
• 双击编辑节点文字
• 拖拽移动节点

键盘操作

功能	按键
切换所选节点	↑/↓/←/→
添加子节点	Tab
添加兄弟节点	Enter
删除节点	Backspace/Delete
修改节点文字	F2
切换显示子节点	Space
撤销	Cmd/Ctrl+Z
重做	Cmd/Ctrl+Shift+Z

编辑文字状态下：

功能	按键
取消	Esc
确认	Enter

下一步计划

• 自定义主题
• 布局在紧凑/宽松间切换
• 大纲等其他导图样式
• Minimap + 导图缩放
• 优化 Hooks 使用，避免不必要的渲染

致谢

项目中使用的 iconfont 来自 Zwicon，一款精美且免费的图标库。