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,一款精美且免费的图标库。