企业官网建设流程全解析

SimpleMindMap 实战笔记：7 种图结构怎么切、9 种导出格式怎么选

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

SimpleMindMap（思绪思维导图）是一个开源的 Web 思维导图项目，仓库里同时放着两部分东西：一个不依赖框架的 JS 绘图库，和一个可以直接打开当在线编辑器用的完整应用。它解决的是"把零散的想法、会议记录、老导图文件整理成一张结构化图，再按需导出"这件事，适合想自己搭一个导图工具的开发者，也适合只想要一个免费、能导格式、能切结构的画图工具的日常用户。

项目速览

仓库按两层组织。上层是 simple-mind-map/ 这个 JavaScript 库，核心代码在 simple-mind-map/src/ 下，渲染、布局、事件、主题各有独立模块，用 SVG 画图，不绑定 React、Vue 这类框架，拿来嵌进自己的页面即可；作者标注库已进入低维护状态，稳定但更新慢。

另一层是 web/ 下的完整应用，基于 Vue 2 和 ElementUI 开发，装好依赖就能在本地起一个在线编辑器，也可以自部署、二次开发。编辑页面的各个面板组件都在 web/src/pages/Edit/components/ 下，导出、结构切换、大纲编辑各有对应文件。

几个核心能力：逻辑结构图、思维导图、组织结构图、目录组织图、时间轴、鱼骨图（把问题拆成若干因果分支的分析图）等 7 种结构可以实时切换；导出支持 .smm、PNG、SVG、PDF、Markdown、XMind、Txt、HTML、Excel 共 9 种格式；节点内容能放富文本、图片、图标、超链接、备注、标签、概要、关联线和数学公式。

🚀 5 行命令跑起来

准备一个 Node.js 环境，然后：

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

浏览器打开终端里给出的本地地址就能编辑。web/里会再装一遍依赖，因为库和应用是两个独立包。

🧩 能力拆解

图结构怎么切

这是打开软件后最先碰到的功能。右侧边栏的结构面板里列着逻辑结构图、思维导图、组织结构图、目录组织图、时间轴、垂直时间轴、鱼骨图，点一下，当前选中节点的整棵子树就按新布局重新排，其他分支不受影响。

怎么挑，按内容类型对号入座：大纲、文档目录、课程章节用逻辑结构图，节点向右生长、带直角连线；发散想法、头脑风暴用思维导图，从中心向左右铺开；公司汇报关系用组织结构图，自上而下；像带编号的书籍目录就用目录组织图；排期、历史事件用时间轴，条目沿一条线按顺序展开；要找问题原因用鱼骨图，主干是问题，斜向的分支是各类原因。切结构只改画法，节点数据不动，随时可以切回来。

节点里能放什么

一张导图能不能承载细节，看节点里能塞多少东西。右键菜单或顶部工具条里可以往节点里加：图片、图标、超链接、备注、标签、概要、关联线、数学公式、外框、标记、附件。

几个高频用法：概要是把一组同级节点归纳成一个汇总块，适合给子节点加总结；关联线把不在同一分支但有逻辑关系的两个节点直接连起来，比如"预算"连到"供应商"；公式节点认 LaTeX 语法，靠内置的 KaTeX 渲染；备注和标签适合放不想展示在图上、但自己需要查的补充信息。

导出 9 种格式怎么选

图做完了要拿走，这一步经常是不同导图工具拉开差距的地方。导出对话框里列着 9 种格式，导入方向则支持 .xmind、FreeMind（FreeMind 是另一个开源导图软件的格式）、Markdown、Txt、Xlsx。

选择逻辑很简单：要继续编辑，存 .smm 私有格式；要发群发朋友圈，导 PNG；放大不失真、要嵌进网页，用 SVG；打印或进正式文档走 PDF；和 XMind 用户交换文件，导 .xmind；只要纯文本归档，用 Txt 或 Markdown。PNG 和 PDF 还能设内边距、背景透明、底部附加一行文字，导出前可以先看说明列里每种格式的用途。

📦 实战场景

XMind 老文件迁移过来

手头有一批 .xmind 文件，想换工具但怕导入后层级和插图全乱。打开应用的导入功能，选本地 .xmind 文件，节点、层级、图片都能保留；确认没问题后接着编辑，之后需要回 XMind 那边协作，再导出一份 .xmind 即可，来回搬基本无损。

开会 10 分钟出一张图

会议进行中想边听边记：新建一张思维导图，中心主题写会议名称，每个议题一个主分支，边讨论边按 Enter 加同级节点、按 Tab 加子节点，不确定的结论先挂着，讨论完再用标签给关键项标色。结束前导出 PNG 直接发群，这张图既留了档，也完成了分享，全程不用开第二个软件。

🔧 进阶与定制

插件按需注册

为什么需要插件化：整个项目是按"核心只负责画图，功能全部做成插件"设计的，富文本、搜索、导出、小地图、协同编辑（多人同时编辑同一张图）、演示模式各占一个文件，都在 simple-mind-map/src/plugins/ 下。自己嵌库时只注册用得到的插件，页面体积和启动时间都能省一截，不用的功能一行代码都不会进打包结果。

初始化时配主题和结构

库支持在 new 实例时指定布局和主题，比如把默认结构改成逻辑结构图：

const mm = new MindMap({ el: document.getElementById('container'), layout: 'logicalStructure', })

数据、默认布局、主题都可以在初始化阶段传入，也可以用changeLayout在运行时切换。

Web 端内置主题和设置

应用端内置多套主题，还能开暗黑模式；设置面板里能改默认结构、默认主题、字体、快捷键、右键菜单和默认保存路径，改完对新开的文件生效。

📎 资源索引

• 核心库源码：simple-mind-map/src/
• 7 种布局的算法实现：simple-mind-map/src/layouts/
• 导入导出（xmind、markdown、txt 等格式）解析代码：simple-mind-map/src/parse/
• 可直接运行的示例数据：simple-mind-map/example/
• 功能总览与客户端、Obsidian 插件介绍：README.md

源码和示例都摆在仓库里，照着上面的路径翻一遍，比看长文档快。

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