尧图建网站 尧图建网站 YAOTU WEB BUILD 免费咨询
ARTICLE DETAIL

资讯详情

深耕网站建设与建站编程的一线实战洞察。

开源思维导图 SimpleMindMap 自部署上手指南

开源思维导图 SimpleMindMap 自部署上手指南 开源思维导图 SimpleMindMap 自部署上手指南【免费下载链接】mind-mapSimpleMindMap思绪思维导图一个强大的思维导图。A powerful mind map.项目地址: https://gitcode.com/GitHub_Trending/mi/mind-map想把手里的 XMind 笔记搬去新工具免费的在线版却要注册、还得把文件传到别人的服务器上——SimpleMindMap思绪思维导图是一个可自部署的开源 Web 思维导图核心是一个零框架依赖的 JS 思维导图库数据始终留在你自己手里。打开到导出一次完整的操作链 从首页开始内容是直接落在你磁盘上的左侧有开始新建、从模板新建、打开本地文件、最近文件右侧列出本地.smm文件及路径点开哪张图哪张图就出现。进入画布后节奏非常顺手双击节点编辑文字Tab 长出子节点右键菜单里能插入、上移下移、删除也能给节点加待办、备注、标签右侧的结构面板可以随时把同一份数据切成逻辑结构、时间轴、鱼骨图、组织结构图。节点里挂的不只是文字超链接、图片、公式、概要、关联线都能塞进去。画完用顶部工具栏的导入导出收尾XMind、FreeMind、Markdown、Txt、Xlsx 都能读进来PNG、PDF、SVG、XMind、Markdown 也能输出。从打开本地文件到把图发给同事全程不碰云端。什么时候会想用它笔记梳理与产品集成一种典型情况是整理存量笔记。很多人电脑里散着十几个 XMind 文件、几份 Markdown 要点换工具时卡住的地方通常是在线脑图要账号、要上传付费客户端又用不太上。自部署的 web 版可以直接操作本地文件老文件导入进来梳理完导出 PNG 或 PDF 分享路径很短。如果你做的是把画脑图当功能之一的产品诉求就从用变成了嵌开源组件要么绑死框架要么功能缺 Collaboration、小地图、导出这类常用件。simple-mind-map 的核心库不依赖任何框架每个能力都是独立插件按需引入最终打包体积自己说了算。本地跑起一个在线思维导图 ⚙️环境只需要 Node.js。先克隆仓库git clone https://gitcode.com/GitHub_Trending/mi/mind-map再进 web 目录装依赖、起开发服务浏览器打开终端打印的地址默认 8080 端口cd web npm install npm run serve打开后界面长这样左侧是开始新建、从模板新建、打开本地文件、最近文件右侧是带文件路径的最近文件列表点开始新建或双击任一文件就进入画布顶部工具栏放的是结构、样式、导入导出这些操作。要当正式站点发布就在 web 目录跑npm run build产物会输出到仓库根目录的 dist根目录还附了一个基于 nginx 的 Dockerfile容器化部署直接可用。只用库、不要整个应用的话四行就能在页面上画出一张图import MindMap from simple-mind-map const mindMap new MindMap({ el: document.getElementById(mindMapContainer), data: { data: { text: 根节点 }, children: [] } })按你的习惯调整工具 只要核心库不要整个应用目标是嵌进自家产品时装 simple-mind-map 这个包、注册需要的插件就行web 目录可以完全不管。在 Obsidian 里直接画笔记库放在 Obsidian 的话官方 Obsidian 插件支持在仓库里画脑图节点还能转成指向笔记的ob 链接不用来回导文件。导入导出格式还不够工具栏里的格式是常用件还缺的话参照 parse 目录里现有解析器的写法补一个新的即可。多人同时改一张图协作场景注册 Cooperate 插件基于 yjs同一张图就能实时协同。踩坑自救手册 画布空白或报容器元素el的宽高不能为0嵌库的场景先确认容器 div 设了非零宽高——构造函数初始化时就会读容器尺寸为 0 直接抛错。容器是动态显隐的展示出来之后记得调一下 resize()。调用导出却提示请注册Export插件导出不是核心能力是插件。看到这句话多半是忘了引入导出插件检查一下注册列表补上再调一次。节点挤成一团或整体风格不对布局乱先用右键菜单里的一键整理布局救场想换结构类型看右侧结构面板嫌配色不对打开主题面板经典、深色、带背景、朴素几个分类里挑一个立刻生效。想深入改改它两个目录值得先翻simple-mind-map/src/layouts/里每种结构时间轴、鱼骨图、组织结构、目录组织都是继承 Base 布局的独立文件想新增一种结构就从这里动手simple-mind-map/src/plugins/里 Export、MiniMap、Search、Cooperate、Demonstrate 各自一个目录自己写插件时照抄任意一个的形状再用 usePlugin 注册。另外提醒一句仓库 README 写明库已进入低维护状态动代码前先把 issue 翻一遍。收尾把 web 目录跑起来导入一张你手头的 XMind再导出成 PNG 看看样式还在不在合不合适十分钟就有答案。【免费下载链接】mind-mapSimpleMindMap思绪思维导图一个强大的思维导图。A powerful mind map.项目地址: https://gitcode.com/GitHub_Trending/mi/mind-map创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表