Skip to content
/ RMind Public

基于 React Hooks 与 flex 布局,实现了大部分功能的思维导图。 / An almost-full-function Mindmap web app developed with only React Hooks and flex layout.

License

Notifications You must be signed in to change notification settings

Mongkii/RMind

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

RMind

GPL 3.0 Code Size

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

About

基于 React Hooks 与 flex 布局,实现了大部分功能的思维导图。 / An almost-full-function Mindmap web app developed with only React Hooks and flex layout.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published