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 的 divdata是每个节点带 data 和 children的递归树 后续保存、导出都围绕这份树展开看懂这棵树就理解了它的一半。跟着做完一件事从零建一张学习计划导图下面用刚启动的 Web 应用走完全流程搭骨架、填内容、导出。Step 1 搭骨架根节点拆出分支双击根节点进入编辑态把文字改成学习计划接着用 ⌨️ 三个键位建结构Tab加子节点、Enter加兄弟节点CtrlZ撤销。快速敲出前端 / 算法 / 英语三个一级分支再各挂 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考