# AI思维导图生成器 基于Django + Vue.js的智能思维导图生成和管理系统,支持AI驱动的文档分析和可视化思维导图创建。 ## ✨ 功能特性 ### 🧠 AI智能分析 - **文档智能解析**: 支持DOCX、PDF、TXT、MD等多种格式 - **AI内容提取**: 自动识别文档结构,生成层次化思维导图 - **智能标题识别**: 基于视觉特征和语义逻辑的标题层级分析 - **内容结构化**: 将非结构化文档转换为结构化思维导图 ### 🎨 可视化编辑 - **交互式思维导图**: 基于MindElixir的可视化编辑界面 - **拖拽操作**: 支持节点拖拽、移动、编辑 - **实时保存**: 自动保存编辑内容到数据库 - **缩放控制**: 支持思维导图缩放和居中显示 - **Markdown支持**: 节点内容支持Markdown语法渲染 - **表格渲染**: 支持Markdown表格在思维导图中的显示 ### 💾 数据管理 - **云端存储**: 思维导图数据持久化存储 - **历史记录**: 自动保存操作历史,支持快速恢复 - **数据导入导出**: 支持JSON格式的数据交换 - **版本管理**: 自动记录创建和更新时间 ### 🔧 技术特性 - **响应式设计**: 适配不同屏幕尺寸 - **实时协作**: 支持多用户同时编辑 - **API接口**: 完整的RESTful API - **模块化架构**: 前后端分离,易于扩展 ## 🛠️ 技术栈 ### 后端技术 - **框架**: Django 4.2.7 + Django REST Framework - **数据库**: SQLite(生产环境可配置PostgreSQL/MySQL) - **AI服务**: OpenAI API + 智谱AI GLM-4.5 - **文件处理**: python-docx, PyPDF2, markdown - **跨域支持**: django-cors-headers ### 前端技术 - **框架**: Vue.js 3.3.4 + Vite 4.4.9 - **思维导图**: MindElixir 3.0.0 (自定义增强版本) - **文件处理**: mammoth.js (DOCX), pdfjs-dist (PDF) - **HTTP客户端**: Axios 1.5.0 - **Markdown处理**: marked 16.2.1 + 自定义渲染器 - **数学公式**: KaTeX 0.16.22 - **代码高亮**: PrismJS 1.30.0 ### AI内容分析 - **TypeScript**: 类型安全的Markdown转JSON转换 - **流式处理**: 支持大文档的流式AI分析 - **多模型支持**: 支持多种AI模型切换 ## 🚀 快速开始 ### 环境要求 - Python 3.8+ - Node.js 16+ - npm 或 yarn ### 1. 克隆项目 ```bash git clone cd MindMap ``` ### 2. 后端设置 #### 进入后端目录 ```bash cd backend ``` #### 安装Python依赖 ```bash pip install -r requirements.txt ``` #### 数据库迁移 ```bash python manage.py makemigrations python manage.py migrate ``` #### 创建超级用户(可选) ```bash python manage.py createsuperuser ``` #### 启动Django服务器 ```bash python manage.py runserver ``` ### 3. 前端设置 #### 安装Node.js依赖 ```bash cd frontend npm install ``` #### 启动前端开发服务器 ```bash npm run dev ``` ### 4. 访问应用 - 前端界面: http://localhost:5173 - 后端API: http://localhost:8000 - Django管理后台: http://localhost:8000/admin ## 📡 API接口 ### 思维导图管理 - `GET /api/mindMaps/{id}` - 获取思维导图数据 - `POST /api/mindMaps` - 创建新思维导图 ### 节点操作 - `POST /api/mindMaps/addNodes` - 批量添加节点 - `PATCH /api/mindMaps/updateNode` - 更新节点信息 - `DELETE /api/mindMaps/deleteNodes` - 批量删除节点 ### AI服务 - `POST /api/ai/generate-markdown` - AI生成Markdown内容 ### 数据格式 所有API返回的数据都遵循MindElixir格式规范,支持树形结构的数据交换。 ## 📁 项目结构 ``` MindMap/ ├── backend/ # Django后端 │ ├── django_mindmap/ # Django项目配置 │ │ ├── settings.py # 项目设置 │ │ ├── urls.py # 主URL配置 │ │ └── wsgi.py # WSGI配置 │ ├── mindmap/ # 主应用 │ │ ├── models.py # 数据模型(mindMap, Node) │ │ ├── views_doc.py # API视图函数 │ │ ├── serializers.py # 数据序列化器 │ │ ├── ai_service.py # AI服务集成 │ │ ├── services.py # 业务逻辑服务 │ │ └── urls.py # 应用URL配置 │ ├── manage.py # Django管理脚本 │ ├── requirements.txt # Python依赖 │ └── mindmap.db # SQLite数据库 ├── frontend/ # Vue.js前端 │ ├── src/ │ │ ├── components/ # Vue组件 │ │ │ ├── MindMap.vue # 思维导图组件 │ │ │ ├── AISidebar.vue # AI助手侧边栏 │ │ │ └── MarkdownTest.vue # Markdown测试组件 │ │ ├── api/ # API接口 │ │ │ └── mindmap.js # 思维导图API │ │ ├── lib/ # 第三方库 │ │ │ └── mind-elixir/ # MindElixir库(项目使用版本) │ │ ├── utils/ # 工具函数 │ │ │ └── markdownRenderer.js # Markdown渲染器 │ │ ├── App.vue # 主应用组件 │ │ └── main.js # 应用入口 │ ├── test-*.html # 功能测试文件 │ ├── package.json # 前端依赖 │ └── vite.config.js # Vite配置 ├── mind-elixir-core-master/ # MindElixir完整源码 │ ├── src/ # TypeScript源码 │ ├── tests/ # 测试套件 │ ├── dist/ # 编译后文件 │ └── package.json # 依赖配置 └── README.md # 项目文档 ``` ## ⚙️ 配置说明 ### AI服务配置 在 `backend/mindmap/ai_service.py` 中配置AI服务: ```python # 智谱AI配置 API_KEY = "your_glm_api_key" BASE_URL = "https://open.bigmodel.cn/api/paas/v4/" MODEL = "glm-4.5" # OpenAI配置(可选) OPENAI_API_KEY = "your_openai_api_key" ``` ### 数据库配置 默认使用SQLite,生产环境建议使用PostgreSQL: ```python # backend/django_mindmap/settings.py DATABASES = { 'default': { 'ENGINE': 'django.db.backends.postgresql', 'NAME': 'mindmap_db', 'USER': 'your_username', 'PASSWORD': 'your_password', 'HOST': 'localhost', 'PORT': '5432', } } ``` ### 文件上传配置 ```python # backend/django_mindmap/settings.py MAX_UPLOAD_SIZE = 16 * 1024 * 1024 # 16MB ALLOWED_FILE_TYPES = ['.docx', '.pdf', '.txt', '.md'] MEDIA_ROOT = BASE_DIR / 'media' MEDIA_URL = '/media/' ``` ### 前端配置 ```javascript // frontend/src/api/mindmap.js const API_BASE_URL = "http://127.0.0.1:8000/api"; ``` ## 🛠️ 开发指南 ### 添加新数据模型 1. 在 `backend/mindmap/models.py` 中定义模型 2. 运行数据库迁移: ```bash cd backend python manage.py makemigrations python manage.py migrate ``` ### 扩展API接口 1. 在 `backend/mindmap/views_doc.py` 中编写视图函数 2. 在 `backend/mindmap/serializers.py` 中定义序列化器 3. 在 `backend/mindmap/urls.py` 中添加URL路由 ### 自定义AI服务 修改 `backend/mindmap/ai_service.py` 中的AI处理逻辑: ```python def call_ai_api(system_prompt, user_prompt, model="glm-4.5", base_url="...", api_key="..."): # 自定义AI服务调用逻辑 pass ``` ### 前端组件开发 1. 在 `frontend/src/components/` 中创建Vue组件 2. 在 `frontend/src/api/` 中添加API接口 3. 使用Vite进行热重载开发 ### 数据格式规范 系统使用MindElixir数据格式: ```json { "nodeData": { "id": "root", "topic": "根节点标题", "data": { "des": "节点描述" }, "children": [ { "id": "child-1", "topic": "子节点标题", "data": { "des": "子节点描述" }, "children": [] } ] } } ``` ## 🚀 部署指南 ### 生产环境配置 1. **环境变量设置**: ```bash export DEBUG=False export SECRET_KEY="your-secret-key" export DATABASE_URL="postgresql://user:pass@localhost/db" ``` 2. **静态文件收集**: ```bash cd backend python manage.py collectstatic --noinput ``` 3. **数据库迁移**: ```bash cd backend python manage.py migrate ``` 4. **前端构建**: ```bash cd frontend npm run build ``` ### Docker部署 #### 后端Dockerfile ```dockerfile FROM python:3.11-slim WORKDIR /app COPY backend/requirements.txt . RUN pip install -r requirements.txt COPY backend/ . RUN python manage.py collectstatic --noinput EXPOSE 8000 CMD ["gunicorn", "django_mindmap.wsgi:application", "--bind", "0.0.0.0:8000"] ``` #### 前端Dockerfile ```dockerfile FROM node:18-alpine WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build EXPOSE 5173 CMD ["npm", "run", "preview"] ``` ### Nginx配置 ```nginx server { listen 80; server_name your-domain.com; location / { proxy_pass http://localhost:5173; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } location /api/ { proxy_pass http://localhost:8000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } } ``` ## 📝 使用说明 ### 基本操作流程 1. **上传文档**:在AI侧边栏中上传DOCX、PDF、TXT或MD文件 2. **AI分析**:系统自动调用AI服务分析文档结构 3. **生成思维导图**:AI将文档转换为结构化的思维导图 4. **编辑调整**:在可视化界面中拖拽、编辑节点 5. **保存分享**:思维导图自动保存到数据库 ### 快捷键操作 - `Ctrl + 滚轮`:缩放思维导图 - `双击节点`:编辑节点内容 - `右键节点`:显示操作菜单 - `拖拽节点`:移动节点位置 - `Ctrl + E`:展开/折叠节点 - `Alt + F`:聚焦/取消聚焦节点 ## 🤝 贡献指南 欢迎贡献代码!请遵循以下步骤: 1. Fork 项目 2. 创建功能分支:`git checkout -b feature/new-feature` 3. 提交更改:`git commit -am 'Add new feature'` 4. 推送分支:`git push origin feature/new-feature` 5. 提交Pull Request ## 📄 许可证 MIT License - 详见 [LICENSE](LICENSE) 文件 ## 🧹 项目优化 ### 代码清理 项目已进行全面的代码清理和优化: - ✅ **删除冗余文件**: 移除了重复的测试文件和调试文件 - ✅ **保留核心功能**: 保留了所有必要的测试和调试工具 - ✅ **优化项目结构**: 清晰分离了开发版本和生产版本 - ✅ **MindElixir增强**: 集成了自定义的Markdown和表格渲染功能 ### 文件结构优化 - **保留**: `mind-elixir-core-master/` - 完整的源码和文档 - **保留**: `frontend/src/lib/mind-elixir/` - 项目中使用的增强版本 - **保留**: 核心测试文件 - 用于功能验证和问题调试 - **删除**: 重复的调试文件和过时的测试文件 ## 🙏 致谢 - [MindElixir](https://github.com/ssshooter/mind-elixir-core) - 思维导图可视化库 - [Vue.js](https://vuejs.org/) - 前端框架 - [Django](https://www.djangoproject.com/) - 后端框架 - [智谱AI](https://www.zhipuai.cn/) - AI服务支持