SimpleMindMap完整指南如何3步快速构建、编辑并导出你的思维导图【免费下载链接】mind-mapSimpleMindMap思绪思维导图一个强大的思维导图。A powerful mind map.项目地址: https://gitcode.com/GitHub_Trending/mi/mind-mapSimpleMindMap思绪思维导图是一个免费的开源 Web 思维导图项目。它包含一个不依赖任何框架的 JavaScript 思维导图库以及一个基于 Vue2 的思维导图软件解决快速绘制结构图、在线编辑和多格式导出的问题可以自部署到任意服务器也可以作为组件集成进你自己的产品。 这类工具适合谁学生和知识工作者经常要把一本书的要点、一个项目方案或一次会议记录整理成结构图。不少在线工具要求注册或者对节点数量、导出格式有限制。SimpleMindMap 让你在网页里直接画画完就能导出 XMind、Markdown、PNG、PDF 等格式笔记不会被锁在某个平台上。做产品开发的朋友如果你的产品里需要一个思维导图模块可以只引入 simple-mind-map 这个库。它不绑定 React 或 Vue几乎几行代码就能嵌进任何前端项目而且采用插件化架构用不到什么功能就只加载什么打包体积可控。知识管理用户也会用到它。项目还提供了 Obsidian 插件和 UTools 插件可以在笔记软件里直接打开一个完整的思维导图编辑器画图和保存都发生在本地的知识库目录中。 快速上手从安装到画完第一张思维导图仓库里包含两部分开源代码simple-mind-map 库和 web 目录下的完整 Web 应用。先把仓库克隆到本地git clone https://gitcode.com/GitHub_Trending/mi/mind-map如果你只是想在产品里使用这个思维导图库一条命令安装npm i simple-mind-map初始化只需要一个宽高不为 0 的容器元素传入 el 容器和根节点数据创建 MindMap 实例后就会自动渲染出思维导图。完整参数和事件说明可参考仓库里的开发文档链接。如果想直接跑起完整 Web 版进入 web 目录安装依赖并启动开发服务器cd web npm install npm run serve打开页面后的主流程很短新建文件 → 在根节点输入主题按 Tab 或回车逐级展开子节点 → 通过右键菜单给节点加备注、图片、超链接 → 用顶部工具栏保存或导出。⚙️ 核心功能详解如何切换7种布局结构布局代码都放在 layouts/ 目录里思维导图、逻辑结构图向左、向右、组织结构图、目录组织图、时间轴横向、竖向、鱼骨图各自是一个独立的布局类。同一份节点数据调用 setLayout 方法就能即时切换版式节点自动重新排列不用重画。小提示MindMapLayoutPro 插件在内置思维导图布局之外又扩展了更精细的布局选项按需注册即可。如何导入与导出XMind、Markdown等文件parse/ 目录内置了 XMind 和 Markdown 的解析器导入导出双向支持。库层面可导出 json、png、svg、pdf、markdown、xmind、txt也能从 json、xmind、markdown 导入。客户端产品在此基础上还支持 FreeMind、Xlsx 的导入以及 Xlsx、Mermaid、Html 的导出格式覆盖相当全。小提示图片格式导出时能设置水平和垂直内边距、背景是否透明导出贴图放进文档不会带上一圈白边。节点内容与样式主题的定制能力节点不只是文本支持普通文本和富文本、图片、图标、超链接、备注、标签、待办、数学公式KaTeX 渲染、概要节点、关联线、外框、标记和编号。样式上文字、边框、背景、形状、线条、内外边距都可以逐级单独调整。主题方面theme/ 目录内置多套主题MindMap.defineTheme 可以注册自己的主题客户端版本则提供了上百个现成主题一键切换。如何按需注册插件除核心功能外其余能力全部以插件形式提供官方插件有 RichText 富文本、Select 多选、Drag 节点拖拽、Export 导出、Search 搜索替换、MiniMap 小地图、Watermark 水印、Formula 公式、Cooperate 协同编辑、Demonstrate 演示模式等十几个。创建实例前用 usePlugin 注册全部功能按需加载。小提示集成后某个功能不生效大概率是漏注册了对应插件。比如未注册 Export 插件时调用导出方法会直接抛出请注册Export插件的错误排查起来反而方便。❓ 遇到问题怎么办初始化报错容器元素el的宽高不能为0确认容器元素已经渲染到页面上再创建实例2. 检查该元素的宽高是否真的非 03. 隐藏元素建议改用不改变尺寸的方式。搜索、小地图、导出等功能集成后没反应对照插件注册列表确认是否引入了对应插件2. usePlugin 需要在创建 MindMap 实例之前调用3. 实例已创建时可以用 addPlugin 方法动态补装。macOS 上客户端打不开提示不受信任先完全退出应用2. 在终端执行下面命令去掉隔离属性3. 再次启动即可sudo xattr -d com.apple.quarantine /Applications/思绪思维导图.app导出的图片与屏幕显示效果有差异检查自定义字体是否被正确引用2. 核对导出时的内边距和背景透明选项3. 库在导出时会自动把必要的 css 写入结果如果自行处理 svg 源码不要删掉其中的 style 节点。 进阶玩法想深入源码的话结构很清晰simple-mind-map/src/core/ 是视图、渲染与命令系统每种版式的布局算法都在 layouts/ 目录节点内容还支持用 DDM 完全自定义协同编辑基于 yjs 实现。Web 应用内置了 AI 能力web/src/utils/ai.js 里可以看到它的调用方式。客户端生态还有 Obsidian 插件在笔记里直接编辑完整思维导图并支持把节点转成内链一句话总结想快速画结构图拉起来就能用想给自己的产品加思维导图接上库就能开发。现在克隆仓库打开你的第一个思维导图文件吧。【免费下载链接】mind-mapSimpleMindMap思绪思维导图一个强大的思维导图。A powerful mind map.项目地址: https://gitcode.com/GitHub_Trending/mi/mind-map创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 SimpleMindMap完整指南：如何3步快速构建、编辑并导出你的思维导图
SimpleMindMap完整指南如何3步快速构建、编辑并导出你的思维导图【免费下载链接】mind-mapSimpleMindMap思绪思维导图一个强大的思维导图。A powerful mind map.项目地址: https://gitcode.com/GitHub_Trending/mi/mind-mapSimpleMindMap思绪思维导图是一个免费的开源 Web 思维导图项目。它包含一个不依赖任何框架的 JavaScript 思维导图库以及一个基于 Vue2 的思维导图软件解决快速绘制结构图、在线编辑和多格式导出的问题可以自部署到任意服务器也可以作为组件集成进你自己的产品。 这类工具适合谁学生和知识工作者经常要把一本书的要点、一个项目方案或一次会议记录整理成结构图。不少在线工具要求注册或者对节点数量、导出格式有限制。SimpleMindMap 让你在网页里直接画画完就能导出 XMind、Markdown、PNG、PDF 等格式笔记不会被锁在某个平台上。做产品开发的朋友如果你的产品里需要一个思维导图模块可以只引入 simple-mind-map 这个库。它不绑定 React 或 Vue几乎几行代码就能嵌进任何前端项目而且采用插件化架构用不到什么功能就只加载什么打包体积可控。知识管理用户也会用到它。项目还提供了 Obsidian 插件和 UTools 插件可以在笔记软件里直接打开一个完整的思维导图编辑器画图和保存都发生在本地的知识库目录中。 快速上手从安装到画完第一张思维导图仓库里包含两部分开源代码simple-mind-map 库和 web 目录下的完整 Web 应用。先把仓库克隆到本地git clone https://gitcode.com/GitHub_Trending/mi/mind-map如果你只是想在产品里使用这个思维导图库一条命令安装npm i simple-mind-map初始化只需要一个宽高不为 0 的容器元素传入 el 容器和根节点数据创建 MindMap 实例后就会自动渲染出思维导图。完整参数和事件说明可参考仓库里的开发文档链接。如果想直接跑起完整 Web 版进入 web 目录安装依赖并启动开发服务器cd web npm install npm run serve打开页面后的主流程很短新建文件 → 在根节点输入主题按 Tab 或回车逐级展开子节点 → 通过右键菜单给节点加备注、图片、超链接 → 用顶部工具栏保存或导出。⚙️ 核心功能详解如何切换7种布局结构布局代码都放在 layouts/ 目录里思维导图、逻辑结构图向左、向右、组织结构图、目录组织图、时间轴横向、竖向、鱼骨图各自是一个独立的布局类。同一份节点数据调用 setLayout 方法就能即时切换版式节点自动重新排列不用重画。小提示MindMapLayoutPro 插件在内置思维导图布局之外又扩展了更精细的布局选项按需注册即可。如何导入与导出XMind、Markdown等文件parse/ 目录内置了 XMind 和 Markdown 的解析器导入导出双向支持。库层面可导出 json、png、svg、pdf、markdown、xmind、txt也能从 json、xmind、markdown 导入。客户端产品在此基础上还支持 FreeMind、Xlsx 的导入以及 Xlsx、Mermaid、Html 的导出格式覆盖相当全。小提示图片格式导出时能设置水平和垂直内边距、背景是否透明导出贴图放进文档不会带上一圈白边。节点内容与样式主题的定制能力节点不只是文本支持普通文本和富文本、图片、图标、超链接、备注、标签、待办、数学公式KaTeX 渲染、概要节点、关联线、外框、标记和编号。样式上文字、边框、背景、形状、线条、内外边距都可以逐级单独调整。主题方面theme/ 目录内置多套主题MindMap.defineTheme 可以注册自己的主题客户端版本则提供了上百个现成主题一键切换。如何按需注册插件除核心功能外其余能力全部以插件形式提供官方插件有 RichText 富文本、Select 多选、Drag 节点拖拽、Export 导出、Search 搜索替换、MiniMap 小地图、Watermark 水印、Formula 公式、Cooperate 协同编辑、Demonstrate 演示模式等十几个。创建实例前用 usePlugin 注册全部功能按需加载。小提示集成后某个功能不生效大概率是漏注册了对应插件。比如未注册 Export 插件时调用导出方法会直接抛出请注册Export插件的错误排查起来反而方便。❓ 遇到问题怎么办初始化报错容器元素el的宽高不能为0确认容器元素已经渲染到页面上再创建实例2. 检查该元素的宽高是否真的非 03. 隐藏元素建议改用不改变尺寸的方式。搜索、小地图、导出等功能集成后没反应对照插件注册列表确认是否引入了对应插件2. usePlugin 需要在创建 MindMap 实例之前调用3. 实例已创建时可以用 addPlugin 方法动态补装。macOS 上客户端打不开提示不受信任先完全退出应用2. 在终端执行下面命令去掉隔离属性3. 再次启动即可sudo xattr -d com.apple.quarantine /Applications/思绪思维导图.app导出的图片与屏幕显示效果有差异检查自定义字体是否被正确引用2. 核对导出时的内边距和背景透明选项3. 库在导出时会自动把必要的 css 写入结果如果自行处理 svg 源码不要删掉其中的 style 节点。 进阶玩法想深入源码的话结构很清晰simple-mind-map/src/core/ 是视图、渲染与命令系统每种版式的布局算法都在 layouts/ 目录节点内容还支持用 DDM 完全自定义协同编辑基于 yjs 实现。Web 应用内置了 AI 能力web/src/utils/ai.js 里可以看到它的调用方式。客户端生态还有 Obsidian 插件在笔记里直接编辑完整思维导图并支持把节点转成内链一句话总结想快速画结构图拉起来就能用想给自己的产品加思维导图接上库就能开发。现在克隆仓库打开你的第一个思维导图文件吧。【免费下载链接】mind-mapSimpleMindMap思绪思维导图一个强大的思维导图。A powerful mind map.项目地址: https://gitcode.com/GitHub_Trending/mi/mind-map创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考