企业官网建设流程全解析

10 分钟跑通 SimpleMindMap：从零建出第一张可导出的思维导图

【免费下载链接】mind-mapSimpleMindMap（思绪思维导图）：一个强大的思维导图。A powerful mind map.项目地址: https://gitcode.com/GitHub_Trending/mi/mind-map

脑暴会刚结束，想法还散落在白板角落；打开付费导图工具又弹出续费弹窗，截图贴进 PPT 又不像样。SimpleMindMap 思维导图是一套可自部署的开源思维导图库 + Web 应用：MIT 协议、不依赖后端、不装桌面软件。接下来 10 分钟跟着做——4 条命令启动，3 步建完一张完整的图，最后导出一张能直接发群的图片。

先认识它：能自部署的开源思维导图库

SimpleMindMap（思绪思维导图）采用 MIT 协议，由两部分组成：不依赖任何框架的 JS 库（simple-mind-map/，基于 SVG 渲染，可嵌进你自己的 Web 项目）和基于 Vue2 的 Web 应用（web/，可自部署、二次开发）。四个数字帮你判断它能不能解决问题：

• 内置 14 种布局，思维导图、时间轴、鱼骨图都包含
• 可导出 json、png、svg、pdf、md、xmind、txt 共 7 种格式
• 19 个官方插件，富文本、搜索、导出按需挂载
• 无后端、无数据库，clone 下来就能跑

跑起来：4 条命令启动 SimpleMindMap

环境要求只有 Node.js 和 npm（建议 16 以上版本）：

git clone https://gitcode.com/GitHub_Trending/mi/mind-map cd mind-map/web npm install npm run serve

启动后按终端提示的本地地址打开浏览器，就是一张带"根节点"的初始导图，可直接编辑。如果要部署到内网，仓库根目录已带 Dockerfile 和 nginx.conf，构建前端后打个镜像即可。

想把它嵌进自己的项目，最小示例只有 9 行：

import MindMap from "simple-mind-map"; const mindMap = new MindMap({ el: document.getElementById("container"), data: { data: { text: "学习计划" }, children: [{ data: { text: "JavaScript" } }] } });

el是挂载容器，需要宽高不为 0 的 div；data是"每个节点带 data 和 children"的递归树 💡 后续保存、导出都围绕这份树展开，看懂这棵树就理解了它的一半。

跟着做完一件事：从零建一张"学习计划"导图

下面用刚启动的 Web 应用走完全流程：搭骨架、填内容、导出。

Step 1 搭骨架：根节点拆出分支

双击根节点进入编辑态，把文字改成"学习计划"；接着用 ⌨️ 三个键位建结构：Tab加子节点、Enter加兄弟节点，Ctrl+Z撤销。快速敲出"前端 / 算法 / 英语"三个一级分支，再各挂 2~3 个二级分支。

做完你应该看到：根节点向两侧分出 3 条一级分支，每条下面挂着二级分支，节点数量随输入实时增加。

Step 2 填内容：给节点挂上细节

右键任意节点打开菜单：给"算法"分支加"备注"写下周计划细节，给"英语"加"标签"标优先级——长内容放备注和标签，比塞进节点文字清爽。想换整体形态，打开右侧"结构"页签点一个布局，比如时间轴，排期一眼看完。

做完你应该看到：对应节点出现备注与标签图标；切换结构后所有节点自动重新排布，文字内容不丢失。

Step 3 导出分享：选对格式

点顶部工具栏"导出" 📤 在格式列里按用途选：发群、贴 PPT 选 PNG；写技术文档选 Markdown；留版本选 json。填好文件名点"导出"。

做完你应该看到：浏览器开始下载对应文件，打开 PNG 就是一张完整导图图片，可以直接分享。

进阶玩法：协同编辑、公式与主题

• 多人同时改一张图：适合需求评审、课程大纲这类场景，Cooperate.js 插件基于 yjs 协议实现协同编辑，自己在项目里创建实例时挂载即可用。
• 节点里放列表和数学公式：RichText.js 让节点文本支持富文本，Formula.js 负责公式渲染，适合公式多的知识图谱。
• 换主题色：Web 应用里打开右侧"主题"面板选预设即可；开发者在初始化库时传theme选项或注册自定义主题对象，主题结构参考 simple-mind-map/src/theme/。

避坑与答疑：新手最常卡住的 5 个地方

某个功能入口找不到（比如搜索、导出）？大概率是没挂载对应插件，README 原话"某个功能不生效大概率是因为你没有引入对应的插件"。到 simple-mind-map/src/plugins/ 按功能名对照，确认引入了对应文件。

npm run serve 报错或安装很慢？先用node -v确认版本 16 以上；依赖报错就在你的本地 clone 里删掉 node_modules 重装；网络慢就先换 npm 镜像源。

导入文件会覆盖当前图吗？会，导入弹窗里就有红字"导入会覆盖现有内容，且无法恢复"。操作前先导出当前图为 json 备份，再点"确定"，这是新手最容易踩的坑。

关掉浏览器再打开，图没了？Web 应用把当前图存在浏览器 localStorage，清站点数据图就丢。打开 DevTools 的 Application 面板查该源下的 localStorage 验证，平时养成定期导出 json 备份的习惯。

图很大时拖动卡顿？先收起不常用分支，再用搜索功能按关键字定位节点；SVG 渲染在几千节点量级拖动编辑仍然流畅，真上万节点建议拆成多张图用超链接关联。

深入源码：布局算法和插件都在这

• simple-mind-map/src/layouts/：每个文件对应一种布局算法，MindMap.js、Timeline.js、Fishbone.js 在这里，节点怎么定位就怎么算的；
• simple-mind-map/src/plugins/：官方插件全部实现，Export.js、Search.js、Cooperate.js 都能直接读；
• simple-mind-map/src/parse/：导入导出转换逻辑，toMarkdown.js、xmind.js 在这里，看它怎么把导图树翻成层级文本。

参与方式：提 issue 前先搜仓库 issues，附上截图、浏览器版本和复现步骤；改了插件逻辑后，建议先在web/应用里手动把导入导出流程过一遍再提 PR。

下次脑暴会想法又散在白板上的时候，clone 下来跑一次，10 分钟后你就有一张能直接发群的思维导图。

【免费下载链接】mind-mapSimpleMindMap（思绪思维导图）：一个强大的思维导图。A powerful mind map.项目地址: https://gitcode.com/GitHub_Trending/mi/mind-map