LifeOS Fabric create_conceptmap 模式详解用 Vis.js 把任意文本一键生成可交互概念图【免费下载链接】LifeOS⛰️ The Life Operating System — an intent engineering platform that moves you from your current state to your ideal state, in life and work.项目地址: https://gitcode.com/GitHub_Trending/pe/LifeOS导读create_conceptmap是 LifeOS 内嵌 Fabric 技能库Patterns 目录中一个专注于知识可视化的提示词模式prompt pattern。它接收任意.txt或.md文本自动抽取主概念、次主题与逻辑关系并产出一个基于 Vis.jsvis-network的、可离线双击打开的自包含交互式 HTML 概念图。读完本文你将掌握如何触发该模式、概念节点与有向边的数据结构、Vis.js 物理引擎与视觉配置的每一处参数含义、拖拽固定/双击释放等交互实现以及如何基于当前仓库源码理解该模式的执行链路。一、模式定位它在 LifeOS Fabric 技能库中的位置在 LifeOS 中Fabric 是一个管理 240 专业提示词模式的技能包见 Fabric/SKILL.md。其核心机制是原生模式执行LifeOS 直接读取某个模式的system.md将其中的指令作为提示词应用无需经过外部 CLI 往返仅 YouTube 转录-y与 URL 兜底抓取-u才调用 fabric CLI。create_conceptmap属于 Creation创建类模式与create_mermaid_visualization、create_markmap_visualization、create_excalidraw_visualization同属将内容转译为可视化产物的家族。技能目录对它的官方一句式说明是create_conceptmap: Transforms unstructured text or markdown content into an interactive HTML concept map using Vis.js by extracting key concepts and their logical relationships.见 pattern_explanations.md模式的文件结构为Patterns/ ├── create_conceptmap/ │ └── system.md # 完整的提示词指令本文讲解的对象 └── ...240 patterns按照 ExecutePattern 工作流 的触发逻辑当用户请求包含 concept map、conceptmap、visualize concepts、map the ideas 等意图或显式点名create_conceptmap时工作流即识别意图 → 读取Patterns/create_conceptmap/system.md→ 将指令直接作用于内容 → 按规范输出结果。二、模式的身份设定IDENTITY AND PURPOSEsystem.md首先为执行者Agent定义了明确角色与职责边界这是该模式产出质量稳定的前提角色知识可视化与教育数据结构化专家能读取非结构化文本.txt/.md抽取主概念、次主题、逻辑关系能力理解概念间的层级hierarchical、因果causal、相关correlative关系并以节点 有向边表达产出标准生成自主、可交互、视觉一致的 HTML 文件并依据检测到的主题自动命名输出文件如map_hist_china.html品质要求精确、系统化始终维持概念与关系之间的语义一致性。这套 IDENTITY 的价值在于它一次性约束了提取什么概念与关系、怎么表达vis-network 节点/边、产物形态单文件 HTML、命名规范按主题四条底线避免 Agent 在长篇输入面前随意发挥。三、任务目标TASK给定一个包含解释性、概念性或主题性内容的.txt/.md文件需要完成提取主概念与次要观点用简洁的动作动词识别概念间的逻辑/层级关系输出一个自包含、可交互的 HTML 文档用Vis.jsvis-network库可视化这些关系。最终目标生成一个功能完整的概念图可直接在浏览器中打开、无需外部依赖指运行时不再需要额外资源文件Vis.js 通过 CDN 单文件引入。四、八步执行动作ACTIONS逐层拆解4.1 分析与提取概念首先完整读取并处理输入文件识别主主题、次主题与关键词每个关键概念转换为一个节点。这一步决定了整张图的信息骨架——节点集合本质上就是文本的概念词表。4.2 映射关系检测概念间的逻辑与层级关系并用简短、描述性的动词标注边。system.md给出的动词词汇表边标签的候选集包括动作动词语义典型场景causes导致因果链contributes to促成影响因素depends on依赖前置条件evolves into演变为演化路径results in产生/结果结果推导influences影响相关关系generates/creates生成/创造产出关系culminates in归结于/最终达成汇总关系统一动词表的意义在于保持边标签的一致性与可读性避免同一语义被表达成多种五花八门的说法从而保证语义连贯semantic coherence。4.3 节点数据结构Node Structure每个概念按如下 JSON 结构生成节点{id: conceito_id, label: Conceito, title: bConcept:/b ConceitobriDrag to position, double-click to release./i}字段含义id节点的唯一标识字符串边的from/to都引用它必须全局唯一且稳定label节点在画布上显示的文本即概念本身要求简洁见 RESTRICTIONS 一节title鼠标悬停时的HTML 工具提示tooltip支持内联 HTML 标签——这里用b加粗概念名、i提示可拖拽定位、双击释放的交互说明是提升可用性的关键细节。4.4 边数据结构Edge Structure概念间的关系按如下 JSON 结构生成有向边{from: conceito_origem, to: conceito_destino, label: verbo, title: bRelationship:/b verbo}字段含义from/to起止节点的id构成有向边与用动作动词表达关系的语义一致——关系有方向方向即逻辑流向label边上的文字标签即 4.2 节选定的动作动词title悬停提示展示Relationship: 动词让读者在悬停时快速确认该边表达的语义。4.5 视觉与物理配置Visual and Physical Configurationsystem.md提供了一套完整的 Vis.js options 配置分为三组节点Nodes视觉shape: dot, color: { border: #4285F4, background: #ffffff, highlight: { border: #34A853, background: #e6f4ea } }, font: { size: 14, color: #3c4043 }, borderWidth: 2, size: 20shape: dot圆形点状节点是概念图中最中性的形态color默认态为白色背景 蓝色#4285F4描边highlight 态悬停/选中时切换为绿色#34A853描边 浅绿#e6f4ea填充形成清晰的焦点反馈font14px、深灰#3c4043——Google 系配色风格保证白底可读性borderWidth: 2、size: 20描边粗细与节点半径兼顾辨识度与画布密度。边Edges视觉color: { color: #dee2e6, highlight: #34A853 }, arrows: { to: { enabled: true, scaleFactor: 0.7 } }, font: { align: middle, size: 12, color: #5f6368 }, width: 2默认浅灰#dee2e6边选中高亮为绿#34A853与节点 highlight 色呼应arrows.to开启指向终点的箭头scaleFactor: 0.7控制箭头相对节点尺寸的比例font.align: middle边标签居中对齐在边线中段width: 2线宽。物理引擎Physicsphysics: { solver: forceAtlas2Based, forceAtlas2Based: { gravitationalConstant: -50, centralGravity: 0.005, springLength: 100, springConstant: 0.18 }, maxVelocity: 146, minVelocity: 0.1, stabilization: { iterations: 150 } }solver: forceAtlas2Based选用力导向布局算法forceAtlas2 是 Gephi 同款布局思路适合概念网络的自组织排布gravitationalConstant: -50节点间的斥力强度负值即斥力决定整体疏密度centralGravity: 0.005把整张图向画布中心收拢的引力防止节点漂出视口springLength: 100连边节点的理想弹簧长度即相邻节点目标间距springConstant: 0.18弹簧刚度越大则边越硬、结构越稳定maxVelocity: 146/minVelocity: 0.1迭代速度钳制控制收敛过程稳定性stabilization.iterations: 150先执行 150 次稳定化迭代让初始布局快速收敛到可读状态避免用户一打开就看到剧烈抖动的画面。4.6 交互实现Interactivitysystem.md给出了两个关键的交互事件回调让概念图从静态展示升级为可操作工作台// 拖拽结束时固定节点 network.on(dragEnd, (params) { if (params.nodes.length 0) { nodes.update({ id: params.nodes[0], fixed: true }); } }); // 双击释放节点 network.on(doubleClick, (params) { if (params.nodes.length 0) { nodes.update({ id: params.nodes[0], fixed: false }); } });机制解读拖拽固定用户把某个节点拖到合适位置后dragEnd事件触发通过nodes.update({ id, fixed: true })将该节点标记为固定物理引擎后续迭代不再移动它——这是整理个人思维导图布局的核心操作双击释放doubleClick事件将fixed置回false节点重新参与力导向模拟回到自动布局状态两个事件都做了params.nodes.length 0的判空保护避免空白区域拖拽/双击时报错。这一拖即锁、双击解锁的交互模式与节点title中的提示文案Drag to position, double-click to release完全对应实现了界面文案与行为的一致。4.7 组装完整 HTML 结构最终产物是一个自包含页面system.md给出了骨架模板head titleMapa Conceitual — [TEMA DETECTADO DO ARQUIVO]/title script srchttps://unpkg.com/vis-network/standalone/umd/vis-network.min.js/script link hrefhttps://unpkg.com/vis-network/styles/vis-network.min.css relstylesheet / /head body div idmap/div script typetext/javascript // nodes, edges, options, and interactive network initialization /script /body要点CDN 引入方式通过unpkg的vis-network/standalone/umd/vis-network.min.js单文件引入 Vis.js 运行时vis-network.min.css提供基础样式。这样单个 HTML 即插即用no external dependencies指无需额外的本地资源文件或构建步骤浏览器联网加载 CDN 即可渲染div idmap是网络挂载的容器页面title自动带入检测到的主题与输出文件名呼应。4.8 自动命名输出文件按检测到的主题自动保存 HTMLmapa_[tema_detectado].html模式同时给出英文风格示例map_hist_china.html历史/中国主题说明命名规则为主题小写、下划线连接保证文件名与内容可互查、避免多份输出互相覆盖。五、约束清单RESTRICTIONS为保证输出质量模式对执行过程施加了六条硬约束保持事实一致性所有关系必须源于源文本——禁止编造原文不存在的联系拒绝填充物不添加无关内容或凑数节点节点标签简洁清晰概念名应短而准语法有效HTML 与 Vis.js 语法必须合法可运行禁止投机性/主观连接关系只能是文本可支持的逻辑推导单一自包含 HTML 文件最终交付物只能是单个、无外部本地依赖的 HTML 文件。这六条约束共同划定了忠实于输入的边界与 IDENTITY 中的semantic coherence语义连贯要求一脉相承是该模式作为教育性数据结构化工具而非自由创作工具的根本定位。六、输出验收标准OUTPUT最终产物需满足四项验收条件可作为生成后自检清单展示可交互概念图节点支持拖拽、固定、释放使用Vis.jsvis-network并具备物理引擎与工具提示依据检测主题自动命名如map_hist_china.html。七、实战在 LifeOS 中端到端运行一次概念图生成结合 ExecutePattern.md 与 SKILL.md一次完整的调用链路如下触发对 Agent 说create a concept map of this article或显式run create_conceptmap pattern工作流按意图表路由到该模式create分支命中create_[keyword]加载Agent 读取Patterns/create_conceptmap/system.md将全文指令IDENTITY / TASK / ACTIONS / RESTRICTIONS / OUTPUT作为系统提示词加载输入提供.txt或.md内容直接文本、文件路径均可URL 场景可用fabric -u URL兜底抓取执行Agent 按 4.1–4.8 八步完成概念提取、关系标注、节点/边 JSON 构建、视觉与物理配置、交互事件注入、HTML 组装产出得到一个按主题自动命名的*.html文件浏览器双击打开即可拖拽、固定、释放节点悬停查看概念与关系说明。一个典型的运行输入/输出对照示例输入.md 片段: Climate change causes sea level rise, which results in coastal flooding, and depends on greenhouse gas emissions... 输出节点 : climate_change, sea_level_rise, coastal_flooding, greenhouse_gas_emissions ... 输出边 : climate_change --causes-- sea_level_rise greenhouse_gas_emissions --contributes to-- climate_change sea_level_rise --results in-- coastal_flooding八、总结该模式的设计要点create_conceptmap是一份小而完整的可视化生成规范其工程价值体现在四个层面输入侧用 IDENTITY 锁定知识可视化专家角色用 RESTRICTIONS 锁定事实边界保证任意文本都能稳定映射为概念网络结构侧节点 JSON、边 JSON 的字段级定义id / label / title / from / to让生成结果高度结构化便于后续二次处理呈现侧完整的节点/边/物理引擎三组配置兼顾了视觉一致性Google 系配色与可读性150 次稳定化迭代 力导向布局交互侧dragEnd 固定 doubleClick 释放的一锁一放机制让概念图从演示品变成可亲手整理的思维工具。配合 LifeOS 的原生模式执行机制读system.md→ 直接应用该模式无需外部 CLI 即可一键将任意资料转化为可交互的知识地图特别适合读书笔记梳理、论文概念拆解、课程主题归纳等教育性知识管理场景。相关资源速查模式本体LifeOS/install/skills/Fabric/Patterns/create_conceptmap/system.md模式一句话说明LifeOS/install/skills/Fabric/Patterns/pattern_explanations.md模式执行工作流LifeOS/install/skills/Fabric/Workflows/ExecutePattern.mdFabric 技能总览240 模式与原生执行机制LifeOS/install/skills/Fabric/SKILL.md模式更新工作流LifeOS/install/skills/Fabric/Workflows/UpdatePatterns.md【免费下载链接】LifeOS⛰️ The Life Operating System — an intent engineering platform that moves you from your current state to your ideal state, in life and work.项目地址: https://gitcode.com/GitHub_Trending/pe/LifeOS创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考