Git Product home page Git Product logo

rmind's Introduction

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

rmind's People

Contributors

mongkii avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.