一个基于 Vue3 + FastAPI 的现代化在线思维导图应用,支持数据自动和手动保存、导出多种格式和节点级的操作、简单的多账号管理等,图谱支持逻辑结构图(向左、向右逻辑结构图)、思维导图、组织结构图、目录组织图、时间轴(横向、竖向)、鱼骨图等结构。
前端演示地址(国内访问可能很慢):https://mindmaster-b3y.pages.dev/
😄 基于本项目已经开发了 AI 版,欢迎加下面 QQ群 交流。
请严格遵循 MIT 开源协议
- 框架:Vue 3.5+(Composition API)
- 构建工具:Vite 7
- 状态管理:Pinia
- 路由:Vue-Router 4
- 事件总线:eventemitter3(为什么不用mitt后面有说明)
- UI 组件库:TDesign Web Vue Next
- 思维导图核心库:wanglin2/mind-map
- 后端框架:Python 3.11+,FastAPI
如果这个项目对你有帮助,欢迎扫码打赏一杯咖啡☕️,你的支持是我持续维护的动力〜
本项目采用前后端分离开发模式,但是部署时为了简化,直接将前端打包的静态文件挂载在 FastAPI 的根路由上。即便如此,以 FastAPI 的优异性能,也可以支撑高并发场景。
当然你也可以自己写 nginx ,或者打包成 Docker。
所以开发到部署的基本逻辑是:前端打包到dist目录 ---> 运行 FastAPI 的 uvicorn 服务。
# github git clone https://github.com/phoenixor/MindMaster.git # 或 gitcode git clone https://gitcode.com/phoenixor/MindMaster.git # 或 gitee git clone https://gitee.com/phoenixor/MindMaster.git
1️⃣ 前端
cd MindMaster/frontend npm install npm run build # 或使用 pnpm pnpm run build
2️⃣ 后端
cd MindMaster # conda虚拟环境 conda create -n venv_MindMaster python=3.12.12 conda activate venv_MindMaster # 或 python虚拟环境 python -m venv venv source venv/bin/activate # 安装依赖(一定要先激活虚拟环境) pip install -r requirements.txt
# 先激活虚拟环境,如上
python main.py
A:首先是核心思维导图库 wanglin2/mind-map 天生不支持ts,其次我觉得ts写起来很麻烦,小项目业务代码没必要用强类型。
A:一开始确实使用了 mitt,但在开发过程中发现当事件回调参数超过两个时,只能接收到第一个参数。经过研究发现,mitt 的实现机制与 eventemitter3 不同, mitt 触发事件时需要将多个参数包装成一个对象传递,且只能接收一个回调参数。
为了解决这个问题并保持与 wanglin2/mind-map 一致的使用体验,最终选择使用 eventemitter3 替代 mitt。
我在写这个项目时本着学习的态度,借鉴了以下开源库,感谢作者的辛勤付出:
我完全重构了项目,使用 vue3 最新技术栈,重新组织了工程化结构,代码中大量使用了组件化、模块化思想,并标注了完整的 JSDOC 注释以弥补没用 ts 的类型提示缺陷。相比原项目,代码结构和逻辑更清晰,上手学习或者二开应该都很容易。
🤝贡献者们
欢迎贡献代码,并随时提交 Pull Request。