我用 Vue 3 写了个思维导图工具，支持 7 种布局，顺便聊了聊前端开发那些事儿
一个支持多种布局、可玩性超高的思维导图编辑器，在掘金和大家分享下我的开源项目
前言
今天想和大家聊聊我持续一坤年做的一个项目 —— GimiMind（因为之前有做过一个类似掘金的开放性平台叫做GimiBook, 为了统一这次就叫做 GimiMind 了😂）。
🎯 不止是思维导图
最开始我只是想做一个简单的思维导图工具，但做着做着就 "上头" 了。现在的 GimiMind 已经支持 7 种不同的布局方式：
📊 七种布局方式，满足不同场景需求
🧠 经典思维导图
最常用的布局方式，适合头脑风暴、知识整理。中心主题向四周发散，层次分明
🧩 组织结构图
需要展示公司架构或者项目层级？这个布局简直就是为此而生的！从上到下清晰展示层级关系。
🐟 鱼骨图
做因果分析的时候特别有用，比如分析某个 Bug 产生的原因（哈哈，程序员懂的都懂），支持多种填充样式。
⏳ 时间轴
想梳理项目发展历程？时间轴布局让一切都清晰可见。
⚖️ 逻辑图
处理复杂逻辑关系时的利器，再也不怕逻辑混乱了。适合
🌳 树状图
经典的树形结构，简洁明了，适合各种层级关系展示。左右分布，清晰直观。
{ } 括号图
喜欢简约风格？括号图让一切都变得清爽干净。用括号的形式展示层级，特别适合教学和文档展示。
✏️ 强大的节点编辑功能
✅基础编辑
- 文本编辑：双击节点即可编辑内容
- 富文本支持：集成 WangEditor，支持富文本格式
- 数学公式：支持 LaTeX 公式输入（基于 KaTeX）
- 超链接：给节点添加链接，快速跳转
- 标签系统：用标签对节点进行分类标记
- 备注功能：集成 Tiptap 编辑器，为节点添加详细备注
✅节点操作
- 插入同级节点（Enter）：快速添加同级主题
- 插入子节点（Tab）：创建下级主题
- 删除节点（Delete）：移除不需要的节点
- 移动节点（Ctrl + ↑/↓）：调整节点顺序
- 复制/粘贴（Ctrl + C/V）：快速复制节点结构
- 剪切（Ctrl + X）：移动节点到新位置
✅节点样式自定义
这个功能特别强大！几乎可以自定义节点的所有样式：
✅字体相关
- 15+ 种字体选择（包括微软雅黑、楷体、黑体、隶书等中文字体）
- 字号：8px - 64px 可调
- 字体粗细和样式
- 文字装饰（下划线、中划线）
- 文字颜色
✅边框样式
- 6 种边框宽度（无边框到极粗）
- 实线/虚线切换
- 边框颜色自定义
- 5 种背景色预设
✅连线样式
- 5 种普通线宽
- 5 种渐变线宽（线条渐细效果）
- 连线颜色自定义
- 线条样式切换
✅特殊功能
- 图片插入：为节点添加配图
- 图标标记：丰富的图标库，让节点更生动
- 最大宽度限制：300px - 1200px 可调
- 文字方向：横向/纵向切换
🎹 完善的快捷键系统
熟练使用快捷键，效率直接翻倍！我整理了完整的快捷键列表：
节点操作
| 快捷键 | 功能 |
|---|---|
| Enter | 插入同级节点 |
| Tab | 插入子节点 |
| Delete | 删除选中节点 |
| Ctrl + ↑ | 上移节点 |
| Ctrl + ↓ | 下移节点 |
| Ctrl + A | 全选节点 |
编辑操作
| 快捷键 | 功能 |
|---|---|
| Ctrl + C | 复制节点 |
| Ctrl + X | 剪切节点 |
| Ctrl + V | 粘贴节点 |
| Ctrl + Shift + C | 复制节点样式 |
| Ctrl + Shift + V | 应用样式到节点 |
视图操作
| 快捷键 | 功能 |
|---|---|
| Ctrl + 鼠标滚轮 | 缩放画布 |
| 鼠标拖拽 | 平移画布 |
🔗 高级功能
✅关联线系统
可以给不同节点之间添加关联线，展示横向关系：
- 支持多种关联线样式
- 可自定义关联线颜色和粗细
- 关联线文字说明
- 拖拽式创建关联
✅概要功能
给相关节点添加概要，让内容更有条理：
- 自动计算概要范围
- 支持概要样式自定义
- 概要文本编辑
- 多种概要布局样式
✅边框功能
为节点添加外边框，强调重点内容：
- 自定义边框样式
- 边框文字编辑
- 多种边框效果
✅任务管理
给节点添加任务标记：
- 任务进度显示
- 复选框样式
- 任务完成状态切换
✅大纲模式
切换到大纲视图：
- 树形结构展示
- 快速定位节点
- 支持大纲编辑
✅鼠标框选
支持鼠标框选多个节点：
- 批量操作
- 批量样式应用
- 批量删除
💾 导出功能
支持多种格式导出，方便分享和存档：
图片格式
- PNG、JPEG：高质量图片导出
- SVG：矢量图，可无损缩放
- PDF：适合打印和文档
数据格式
- JSON：导出原始数据，便于二次开发
- XMind 格式：兼容主流思维导图工具
🔧 其他实用功能
- 缩略图导航：画布缩略图，快速定位
- 搜索功能：快速搜索节点内容
- 撤销/重做：历史记录管理，不怕误操作
- 自动保存：实时保存到云端
- 导入功能：支持导入 XMind 格式文件
- 鼠标框选：框选多个节点批量操作
- 水印发力：为导图添加水印保护
🎨 让人眼前一亮的主题系统
因为是个人做的项目，对主题这些设计还是比较困难的，所以我就选择的市面上的一些主题，模仿他们，毕竟站在巨人的肩膀上可以看的更远；（用过之后就知道我是站在哪位巨人的肩膀上了😂）
主题类型
- 经典主题系列：永不过时的选择，适合正式场合
- 彩虹主题：色彩丰富，让导图更有活力（支持 12 种配色方案）
- 樱花主题：清新淡雅，适合文艺青年
- 暗色主题：程序员的福音，护眼又酷炫
- 手绘风格系列：
- 默认手绘
- 单折角手绘
- 椭圆手绘
- 用到 RoughJS 库，让导图看起来像手绘一样
主题切换
- 一键切换主题
- 实时预览效果
- 支持自定义主题配置
- 深色模式自动适配
💻 技术栈分享
说到技术，我想前端的朋友们应该会比较感兴趣。这个项目用到了
-
Vue 3 + TypeScript：不得不说，Vue 3 的组合式 API 真香！代码组织更清晰，复用性也更好。加上 TypeScript 的类型检查，开发体验直接拉满。
-
Vite：开发体验丝滑，启动速度快到飞起，热更新也几乎无延迟。用过之后就再也回不去 Webpack 了😂
-
D3.js：图形绘制的主力军。说实话，刚开始学 D3 的时候头都快秃了，但掌握之后发现真的很强大！基本上能想到的图形效果都能实现。
-
Pinia：状态管理用的 Pinia，比 Vuex 更简洁，也更符合 Vue 3 的风格。
-
Element Plus：UI 组件库，省了不少造轮子的时间。
💭 开发过程中的感悟
做这个项目的过程中，真的学到了很多。想分享几点感悟：
-
不要怕重构：项目初期代码写得比较随意，后期重构了很多次。虽然过程痛苦，但每次重构后代码质量都提升了一个档次。
-
用户体验很重要：一个功能不仅要能用，还要好用。比如节点拖拽，我调了很多次参数才让体验变得流畅自然。
-
善用现成的库：比如 RoughJS、D3.js，站在巨人的肩膀上能省很多时间。
-
主题系统要提前规划：最开始没考虑好主题系统，后期扩展新主题时费了不少劲。
🎉 写在最后
这就是我的 GimiMind 项目，一个还在持续迭代的思维导图工具。如果你觉得有意思，欢迎给个 Star ⭐
如果你在使用过程中遇到问题，或者有什么好的建议，欢迎提 Issue 或 PR。当然，也很期待听到大家的想法和建议！
在线体验：mind.zdxblog.cn/
