# gmind-map-front
**Repository Path**: zheng_xuan520/gmind-map-front
## Basic Information
- **Project Name**: gmind-map-front
- **Description**: 一个使用svg开发思维导图/脑图的前端项目。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://zdxblog.cn/xmind/
- **GVP Project**: No
## Statistics
- **Stars**: 66
- **Forks**: 6
- **Created**: 2023-09-07
- **Last Updated**: 2026-04-30
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 🏆 GimiMind 在线思维导图
**一款功能强大的开源在线思维导图绘制工具**
[](LICENSE)
[](https://nodejs.org)
[](https://vuejs.org)
[](https://vitejs.dev)
---
## ✍️ 项目介绍
GimiMind 是一款现代化的在线思维导图绘制工具，支持多种结构和主题，提供高度自定义的样式配置。基于 Vue 3 + TypeScript + Vite 构建，提供极速的开发体验和流畅的用户交互。
### ✨ 核心特性
- 🎨 **多种导图结构** - 思维导图、逻辑图、组织结构图、树形图、括号图、鱼骨图
- 🖼️ **丰富的主题系统** - 9+ 内置主题，支持自定义颜色、字体、连线样式
- 🎯 **强大的编辑功能** - 拖拽创建、富文本编辑、图片/图标插入、数学公式
- 📤 **多格式导出** - PNG、JPEG、SVG、PDF、JSON、XMIND 格式
- 🔄 **实时自动保存** - 无需担心数据丢失
- 👥 **协作功能** - 支持分享和团队协作
- 🎭 **手绘风格** - 支持手绘风格渲染
---
## 🛠 技术栈
### 前端框架
- **Vue 3.2+** - 渐进式 JavaScript 框架
- **TypeScript 4.1+** - JavaScript 的超集
- **Vite 4.5+** - 新一代前端构建工具
- **Vue Router 4** - Vue.js 官方路由
- **Pinia 2.0+** - Vue 3 状态管理库
### UI 框架
- **Element Plus 2.8+** - 基于 Vue 3 的组件库
- **RemixIcon** - 开源图标库
### 可视化 & 编辑器
- **D3.js 7.0** - SVG 数据可视化库
- **Rough.js 4.6+** - 手绘风格图形库
- **WangEditor 5.1+** - 富文本编辑器
- **KaTeX 0.16+** - 数学公式渲染引擎
### 工具库
- **Axios** - HTTP 客户端
- **JSZip** - ZIP 文件处理
- **Crypto-js** - 加密库
- **mitt** - 事件总线
---
## 📦 项目结构
```
gimi-mind-map-front/
├── src/
│ ├── apis/ # API 接口层
│ ├── assets/ # 静态资源（图片、字体）
│ ├── components/ # 公共组件
│ ├── config/ # 配置文件
│ ├── directives/ # Vue 自定义指令
│ ├── hooks/ # Composition API 钩子
│ ├── layout/ # 布局组件
│ ├── mitt/ # 事件总线
│ ├── pages/ # 页面组件
│ │ ├── account/ # 账户管理
│ │ ├── home/ # 工作空间
│ │ ├── mind-map/ # 思维导图编辑器
│ │ ├── signin/ # 登录注册
│ │ ├── work/ # 工作台
│ │ └── ...
│ ├── router/ # 路由配置
│ ├── store/ # Pinia 状态管理
│ ├── style/ # 全局样式
│ ├── types/ # TypeScript 类型定义
│ └── utils/ # 工具函数
├── public/ # 公共资源
├── docs/ # 项目文档
├── vite.config.ts # Vite 配置
├── tsconfig.json # TypeScript 配置
└── package.json # 项目配置
```
---
## 🚀 快速开始
### 环境要求
- **Node.js** >= 14.17.0（推荐使用 16.x 或更高版本）
- **npm** >= 6.14.0
### 安装依赖
```bash
npm install
```
### 开发模式
```bash
npm run dev
```
开发服务器将在 `http://localhost:8008` 启动
### 生产构建
```bash
npm run build
```
构建产物将生成在 `dist` 目录
### 预览构建
```bash
npm run preview
```
### 代码检查
```bash
npm run lint:fix
```
---
## 🎯 主要功能
### 1. 多种导图结构
- 思维导图
- 逻辑结构图
- 组织架构图
- 树形图
- 括号图
- 鱼骨图
### 2. 丰富的样式定制
- 文字样式：字体、字号、颜色、加粗、斜体
- 主题样式：填充、形状、边框
- 连线样式：颜色、样式、宽度、分支类型
- 节点样式：对齐方式、文本方向、最大宽度
### 3. 强大的编辑功能
- 拖拽创建和移动节点
- 富文本编辑支持
- 图片上传和插入
- 图标装饰
- 数学公式（LaTeX）
- 任务清单（复选框）
- 关联线和总结节点
- 边框和注释
### 4. 导出功能
- 📊 **图片导出** - PNG、JPEG、SVG
- 📄 **PDF 导出** - 高清 PDF 文档
- 💾 **数据导出** - JSON、XMIND 格式
- 📤 **批量导出** - 支持批量下载
### 5. 用户体验
- ⚡ **极速启动** - 基于 Vite，2.6 秒快速启动
- 💾 **自动保存** - 实时保存，永不丢失数据
- 🔍 **全局搜索** - 快速查找节点内容
- 🎨 **小地图导航** - 快速定位和导航
- 📱 **响应式设计** - 支持多种屏幕尺寸
- ⌨️ **快捷键支持** - 提高编辑效率
---
## 🔗 线上体验
**[GimiMind 在线思维导图](https://mind.zdxblog.cn/xmind)**
立即体验在线思维导图的强大功能！
## 🧩 后端开源地址
- **GimiMind 后端仓库**：https://gitee.com/zheng_xuan520/gmind-map-server
---
## 📖 开发文档
项目详细的开发文档位于 `docs/` 目录：
- [Vite 迁移完成总结](docs/VITE_MIGRATION_COMPLETE.md)
- [Vue API 自动导入指南](docs/AUTO_IMPORT_GUIDE.md)
- [资源引用使用指南](docs/ASSETS_USAGE.md)
- [require 转 import 迁移](docs/REQUIRE_TO_IMPORT_MIGRATION.md)
---
## 🤝 参与贡献
欢迎贡献代码！请遵循以下步骤：
1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 提交 Pull Request
---
## 💯 交流反馈
- 📮 **问题反馈** - [Issues](https://gitee.com/zheng_xuan520/gmind-map-front/issues)
- 💬 **讨论交流** - [Gitee](https://gitee.com/zheng_xuan520/gmind-map-front)
- 📧 **联系方式** - 请通过 Issues 联系
---
## 📄 开源协议
本项目基于 [MIT](LICENSE) 协议开源
---
## ⭐ Star History
如果这个项目对你有帮助，请给我们一个 Star ⭐️
---
**Made with ❤️ by GimiMind Team**