https://github.com/Mongkii/RMind

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

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/Mongkii/RMind
• Owner: Mongkii
• License: gpl-3.0
• Created: 2019-05-13T14:58:13.000Z (over 5 years ago)
• Default Branch: develop
• Last Pushed: 2019-12-03T11:27:41.000Z (almost 5 years ago)
• Last Synced: 2024-07-19T21:33:24.510Z (4 months ago)
• Language: JavaScript
• Homepage:
• Size: 2.98 MB
• Stars: 644
• Watchers: 22
• Forks: 96
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-tools - **RMind** - 基于 React Hooks 与 flex 布局 的思维导图 https://mongkii.github.io/RMind/ (在線使用)

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](https://mongkii.github.io/RMind/)

📄 示例用导图文件

## 特点

- 完全使用 React Hooks 开发，所有功能均由箭头函数实现

- 用 flex 布局完成思维导图排版，唯一用到 canvas 的地方是绘制节点连接线

## 支持

- 节点的增删改等基本功能

- 拖拽操作

- 撤销/重做

- 导入及导出 .km（百度脑图） .md（Makrdown） .txt 格式的思维导图

- 将导图保存为图片

- 切换主题

## 演示

- 拖拽操作

![](./docs/img/drag.gif)

- 键盘操作

![](./docs/img/keydown.gif)

- 切换主题

![](./docs/img/theme.gif)

## 操作方式

### 鼠标操作

  - 单击选中节点

  - 双击编辑节点文字

  - 拖拽移动节点

### 键盘操作

|功能|按键|

|----|----|

|切换所选节点|`↑`/`↓`/`←`/`→`|

|添加子节点|`Tab`|

|添加兄弟节点|`Enter`|

|删除节点|`Backspace`/`Delete`|

|修改节点文字|`F2`|

|切换显示子节点|`Space`|

|撤销|`Cmd/Ctrl`+`Z`|

|重做|`Cmd/Ctrl`+`Shift`+`Z`|

编辑文字状态下：

|功能|按键|

|----|----|

|取消|`Esc`|

|确认|`Enter`|

## 下一步计划

- 自定义主题

- 布局在紧凑/宽松间切换

- 大纲等其他导图样式

- Minimap + 导图缩放

- 优化 Hooks 使用，避免不必要的渲染

## 致谢

项目中使用的 iconfont 来自 [Zwicon](https://zwicon.com)，一款精美且免费的图标库。