基于 React Hooks 与 flex 布局，实现了大部分功能的思维导图。 / An almost-full-function Mindmap web app developed with onl...
Available items
No Items, yet!
The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:
Readme
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，一款精美且免费的图标库。