ReactMind☁️

简介

ReactMind是一款基于React18 + Vite + Tailwindcss + TypeScript 实现的web端思维导图工具,项目目前还在持续更新,项目计划见下方,欢迎star

在线体验

线上地址：https://react-mind.vercel.app

项目文档（WIP）

线上地址： https://github.com/coderwei99/ReactMind

实现功能

• 主题界面搭建 🧭
• 绘制节点 & 节点之间的连接线 🪝
• 思维导图节点的拖拽 🔒
• 拖拽完成计算正确的位置重新渲染同时更新连接线 🍍
• 标题可修改 & 修改状态按下回车退出修改状态 🍔
• 新建 & 导出 & 导入思维导图📝
• 新增节点 & 删除节点 & 修改节点 🌍
• 隐藏节点 & 展开节点 🪐
• 键盘操作 🖌️
• 支持标题修改 🎺
• 支持更换主题 🌈
• 导出思维导图 🌹
• 集成操作按钮(上下左右控制canvas/还原/撤销/放大等等) 📦
• 批量删除节点 📒
• 支持markdown形式的节点备注信息 🚀
• 新人指引 📈

安装使用

• 获取项目代码

git clone https://github.com/coderwei99/ReactMind.git

• 安装依赖 强烈推荐大家使用ni

cd ReactMind
pnpm install 
or
ni

• 运行

pnpm dev
or
nr dev

项目结构

todo

Git 贡献提交规范

项目在git push 的时候会被拦截, 脚本会检测commit message 是否符合commit 规范 并且 检测提交代码是否符合eslint规范

注意 ⚠️

本项目使用的pnpm,所以node必须在16.14及以上

运行截图

todo

Q&A

todo

致谢

RMind为本项目提供的思路和灵感

react-feather 为本项目提供的精美图标