从零造一个知识图谱编辑器：GBrain 全架构深度解析
GBrain：把散落的知识，织成一张能看见的网
你脑子里有一堆概念，它们之间有依赖、有调用、有关联——但画在纸上是一团乱线，存在文档里是一堆死文字。GBrain 想解决的就是这件事。
最近在学习LangChain和langGraph的时候，总是前面学后面忘，我想总结一个思维导图，但是xmind有没有智能体，我个人非常懒惰，我实在不想想一个一个手敲，就做了这个小工具，里面的内容都是让AI帮我生成格式化数据然后直接塞进去了，有什么知识一目了然，后续的想法是加上智能体功能，通过人工交互自动生成节点和描述。
开源地址：https://github.com/DevYangJC/knowledge-graph-app
同时你在做智能体（灵码平台）的话可以看看我的如下正在做的项目，当然，现在还是半成品，可以给各位看看页面乐呵一下。 开源地址：https://github.com/DevYangJC/LingmaForge
为什么需要这个东西
先说一个很真实的场景。
你在学一门新技术，比如 LangChain。你看了几十篇文档，记了几十篇笔记。你知道"Prompt"和"OutputParser"有关系，知道"Chain"依赖"LLM"，知道"Agent"会"调用"Tools。但这些关系全散落在不同的笔记里，你从来没能在一张图上同时看到它们的全貌。
你试过用思维导图。但思维导图只有父子层级，表达不了"A 依赖 B"和"A 调用 B"的区别。
你试过用流程图。但流程图没有主题中心，所有框框平铺在一起，看不出哪个是核心、哪个是分支。
你试过用 Notion / Obsidian 的双链。但双链只有"关联"一种关系，分不清是依赖、是实现、还是应用。
问题的本质是：知识不是树，也不是无向图，它是一张有层次、有语义关系的有向网络。 现有工具要么只支持树（思维导图），要么只支持无语义的线（流程图/白板），要么连语义都没有（双链笔记）。
GBrain 就是为这个场景设计的。
GBrain 是什么
一句话：一个支持三级节点层次 + 五种语义关系的可视化知识图谱编辑器。
它能让你把零散的概念组织成一张有结构的网络图——核心主题在中心，能力域围绕展开，概念节点挂在能力域下，节点之间用带语义标签的连线表达"谁依赖谁、谁调用谁、谁实现了谁"。
而且，它不是一个需要登录、需要联网、需要订阅的 SaaS。它跑在你本地，数据存在 SQLite 里，一键导出一个 HTML 文件就能离线分享。
▼mermaid复制代码graph TB subgraph "传统工具的局限" A1["思维导图<br/>✗ 只有父子层级<br/>✗ 无法表达语义关系"] A2["流程图/白板<br/>✗ 没有主题中心<br/>✗ 所有节点平铺<br/>✗ 连线无语义"] A3["双链笔记<br/>✗ 只有'关联'<br/>✗ 无法区分依赖/调用/实现"] end subgraph "GBrain 的定位" B["三级节点层次<br/>+ 五种语义关系<br/>+ 离线导出<br/>+ 本地持久化<br/>+ 多画板管理"] end A1 -->|无法满足| B A2 -->|无法满足| B A3 -->|无法满足| B
它能帮你做什么
场景一：技术学习地图
你在学一个复杂的技术体系。打开 GBrain，创建一个画板，把核心主题写在中心节点。然后围绕主题添加几个能力域——比如"基础组件""提示词工程""链与编排""记忆与检索""Agent 与工具"。每个能力域下面挂具体的概念节点。
接下来是最关键的一步：给节点之间连语义线。
- Prompt 依赖 LLM → 连一条"前置依赖"线
- Chain 调用 LLM → 连一条"数据调用"线
- Agent 实现了 Chain 的扩展 → 连一条"架构实现"线
- RAG 是检索增强生成的应用落地 → 连一条"应用落地"线
- Memory 和 Context 有关联 → 连一条"扩展关联"线
连完之后，你得到的是一张有语义的知识网络。一眼就能看出：哪些概念是地基（被很多节点依赖），哪些是上层应用（依赖很多东西），哪些是平行的关联。
▼mermaid复制代码graph LR subgraph "学习前：散落的笔记" N1["笔记1: Prompt概念"] N2["笔记2: LLM原理"] N3["笔记3: Chain用法"] N4["笔记4: Agent架构"] N5["笔记5: RAG实践"] N1 -.- N2 -.- N3 -.- N4 -.- N5 end subgraph "学习后：GBrain 知识图谱" T["🧠 LangChain"] H1["基础组件"] H2["链与编排"] H3["Agent与工具"] H4["检索与向量库"] C1["Prompt"] C2["LLM"] C3["Chain"] C4["Agent"] C5["RAG"] T --> H1 T --> H2 T --> H3 T --> H4 H1 --> C1 H1 --> C2 H2 --> C3 H3 --> C4 H4 --> C5 C1 -->|"依赖"| C2 C3 -->|"调用"| C2 C4 -->|"实现"| C3 C5 -->|"应用"| C3 C4 -.->|"相关"| C5 end
场景二：团队知识沉淀
团队在做项目，每个人负责不同模块。你用 GBrain 创建一个画板，把系统架构画出来：核心系统在中心，各子系统作为能力域展开，每个子系统下的关键模块作为概念节点。
新成员入职时，不用翻几十页文档，打开这张图就能看到：
- 系统全貌（三级层次一目了然）
- 模块间依赖关系（语义连线带标签）
- 某个模块的详细描述（点击节点，右侧面板展开详情）
- 相关的外部链接（节点上挂的参考文档 URL）
而且这张图是活的——任何人改了节点内容，2 秒后自动保存到数据库。不需要手动 Ctrl+S，不需要担心丢数据。
场景三：方案评审与展示
你要做一个技术方案评审。用 PPT 画架构图？改一版要重新画。用在线白板？评审完了图就丢在那了，没人再看。
用 GBrain：
- 评审前：在画布上搭好方案架构，节点拖到合适位置，连线标注关系
- 评审中：投屏展示，现场讨论时直接拖节点、改连线、加新概念
- 评审后：一键导出 HTML 文件，发给所有参会者。他们打开就能交互——拖动画布、缩放查看、点击节点看详情、切换主题
导出的 HTML 不是一张截图，是一个可交互的离线副本。 这意味着即使你的电脑没装 GBrain，即使断网，收件人也能完整浏览你的知识图谱。
▼mermaid复制代码graph LR A["评审前<br/>在 GBrain 中搭建方案"] --> B["评审中<br/>投屏 + 现场编辑"] B --> C["评审后<br/>一键导出 HTML"] C --> D["发给参会者"] D --> E["收件人打开 HTML<br/>━━━━━━━━━━━━━<br/>• 可拖动画布<br/>• 可滚轮缩放<br/>• 可点击节点看详情<br/>• 可切换主题<br/>• 无需安装任何软件<br/>• 无需联网"] style C fill:#d97757,color:#fff style E fill:#3574f0,color:#fff
核心功能一览
三级节点层次，让知识有骨架
不是所有节点平铺在一起。GBrain 的节点分三级，自动形成树状骨架：
| 层级 | 节点类型 | 角色 | 位置 |
|---|---|---|---|
| 一级 | Topic 根节点 | 核心主题，整个图谱的中心 | 固定在画布正中心 |
| 二级 | Domain Hub | 能力域分组，像树枝 | 围绕中心按角度均匀分布 |
| 三级 | Concept 概念 | 具体知识点，像树叶 | 挂在对应的 Hub 下 |
你不需要手动摆位置——布局算法会自动计算。你也不不需要手动连线表示层级——Topic 到 Hub、Hub 到 Concept 的结构边自动生成。你只需要关注内容本身。
五种语义关系，让知识有灵魂
这是 GBrain 区别于所有思维导图工具的核心能力。节点之间不只是"连了一根线"，而是有明确的语义：
▼mermaid复制代码graph TD subgraph "前置依赖 depends_on" D1["A → B 表示：B 依赖 A<br/>学 B 之前必须先学 A<br/>━━━━━━━━━━━━━<br/>线型：实线<br/>标签：依赖"] end subgraph "数据调用 calls" D2["A → B 表示：A 调用 B<br/>传输数据或调用接口<br/>━━━━━━━━━━━━━<br/>线型：虚线<br/>颜色：天蓝<br/>标签：调用"] end subgraph "架构实现 implements" D3["A → B 表示：B 是 A 的实现<br/>接口与实现类的关系<br/>━━━━━━━━━━━━━<br/>线型：虚线<br/>颜色：紫色<br/>标签：实现"] end subgraph "应用落地 application" D4["A → B 表示：A 在 B 中应用<br/>理论概念在项目中的落地<br/>━━━━━━━━━━━━━<br/>线型：实线<br/>颜色：翠绿<br/>标签：应用"] end subgraph "扩展关联 related" D5["A ↔ B 表示：两者有关联<br/>概念间的逻辑关联<br/>━━━━━━━━━━━━━<br/>线型：虚线<br/>无箭头（双向）<br/>标签：相关"] end
每种关系有自己的颜色、线型和标签。一眼扫过去，你就能分辨出哪些线是依赖（实线）、哪些是调用（蓝色虚线）、哪些是关联（无箭头虚线）。这不是装饰，是信息密度——线的视觉风格本身就在传递语义。
自由拖拽 + 智能布局，两全其美
你可能会担心：自动布局会不会把我的节点摆得到处都是？
不会。GBrain 的策略是**"自动布局打底，手动拖拽微调"**：
- 新增节点时，布局算法自动把它放到合理的位置（径向分布 + 碰撞排斥，保证不重叠）
- 你觉得位置不满意？直接拖。拖完的位置会被"钉住"，后续布局算法不会再动它
- 你可以拖单个节点，也可以拖整个能力域组——该域下所有节点跟着一起平移
▼mermaid复制代码graph TD A["新增节点"] --> B["自动布局算法<br/>径向分布 + 碰撞排斥<br/>放到合理初始位置"] B --> C{"用户满意?"} C -->|是| D["完成"] C -->|否| E["手动拖拽节点"] E --> F["位置被'钉住'<br/>pinnedPos 记录坐标"] F --> G["后续布局不再移动它<br/>其他节点绕开它排列"] G --> D H["拖拽 Domain Hub"] --> I["整组移动<br/>该域下所有节点一起平移<br/>组内相对位置不变"] I --> D
节点详情面板，每个概念都有完整档案
点击任意概念节点，右侧自动展开详情面板。不是只有一个标题——每个节点都是一个完整的"知识卡片"：
- 标题 + 图标：快速识别
- 核心描述：一段话讲清楚这个概念是什么
- 阶段标签：标记学习阶段或优先级
- 能力域归属：颜色标识属于哪个分组
- 外部链接：挂参考文档、论文、视频的 URL
- 自动推导的关联：系统从所有连线中自动找出这个节点的前置依赖、相关概念、应用实例，点击可跳转
你还可以双击任意节点直接内联编辑标题，或者在详情面板里修改图标、描述、链接。所见即所得，不需要弹窗，不需要表单。
▼mermaid复制代码graph LR subgraph "节点详情面板" P1["📌 节点标题<br/>━━━━━━━━━━━━━"] P2["阶段 Badge | 能力域 Badge"] P3["核心描述（长文本）<br/>━━━━━━━━━━━━━<br/>一段话讲清楚概念"] P4["外部链接<br/>━━━━━━━━━━━━━<br/>• 官方文档<br/>• 论文<br/>• 教程视频"] P5["自动推导的关联<br/>━━━━━━━━━━━━━<br/>↓ 前置依赖（点击跳转）<br/>↔ 相关概念（点击跳转）<br/>↑ 应用实例（点击跳转）"] P6["源文件路径（可复制）"] end
搜索过滤，快速定位
图谱大了之后，找节点是个问题。工具栏的搜索框支持实时过滤：
- 输入关键词，匹配的节点高亮显示（加粗边框 + 发光）
- 不匹配的节点降低透明度到 25%，不消失但退到背景
- 能力域 Hub 同步高亮，告诉你匹配的节点在哪个分组
这比"搜索后只显示结果"的方案好——你能在搜索的同时看到匹配节点在整个图谱中的位置关系。
多画板管理，不同主题隔离
你不会把所有知识塞在一张图里。GBrain 支持创建多个画板，每个画板是一个独立的知识图谱：
- 学习 LangChain？建一个画板
- 学习 Spring AI？再建一个
- 团队架构文档？又建一个
顶栏可以快速切换画板，每个画板独立保存。画板列表按更新时间排序，最近操作的排在最前面。
三套主题，换肤只在一瞬
| 主题 | 风格 | 适合场景 |
|---|---|---|
| Panda（暗琥珀） | 深色背景 + 暖琥珀主色 | 长时间阅读，护眼 |
| JetBrains（暗蓝） | 深色背景 + IDE 蓝主色 | 技术演示，专业感 |
| Claude（亮橙） | 米白背景 + 橙色主色 + 衬线字体 | 正式分享，优雅感 |
切换主题是瞬时的——不需要刷新页面，CSS 变量驱动，所有颜色、字体、阴影一键切换。导出 HTML 时三套主题也一起打包，收件人可以自己切换。
它和其他工具有什么不同
| 能力 | 思维导图（XMind） | 流程图（Draw.io） | 双链笔记（Obsidian） | 白板（Miro） | GBrain |
|---|---|---|---|---|---|
| 三级节点层次 | ✓（多级） | ✗（平铺） | ✗ | ✗ | ✓ |
| 语义化连线 | ✗（仅父子） | ✗（无语义） | ✗（仅关联） | ✗（无语义） | ✓（5种） |
| 自动布局 | 部分 | ✗ | ✗ | ✗ | ✓ |
| 手动拖拽微调 | ✓ | ✓ | ✗ | ✓ | ✓ |
| 节点详情面板 | ✗ | ✗ | ✓（但非图形） | ✗ | ✓ |
| 离线导出（可交互） | ✗（图片/PDF） | ✗（图片） | ✗ | ✗ | ✓（HTML） |
| 本地持久化 | ✓（文件） | ✓（文件） | ✓（文件） | ✗（云端） | ✓（SQLite） |
| 多画板管理 | ✓（多页签） | ✓（多页签） | ✓（多库） | ✓（多板） | ✓ |
| 自动保存 | 部分 | ✗ | ✓ | ✓ | ✓（2s debounce） |
核心差异在两点：语义化连线和离线可交互导出。这两个能力目前没有其他工具能同时做到。
▼mermaid复制代码graph TB subgraph "GBrain 独有组合" A["三级节点层次<br/>+ 五种语义关系<br/>+ 离线可交互导出"] end subgraph "其他工具" B["思维导图: 有层次, 无语义"] C["流程图: 可连线, 无层次, 无语义"] D["双链笔记: 有关联, 无层次, 无语义, 无图形"] E["白板: 可连线, 无层次, 无语义, 无离线"] end style A fill:#d97757,color:#fff,stroke:#d97757,stroke-width:3px
数据安全：你的知识在你手里
很多在线工具的问题是：数据在云端，你不放心。
GBrain 的数据全部存在你本机的 SQLite 数据库里。不需要注册账号，不需要登录，不需要联网。你可以随时备份数据库文件，可以随时删除它。你的知识图谱永远在你手里。
自动保存每 2 秒触发一次，顶栏实时显示保存状态——"已保存""保存中""有未保存更改"。你永远不会遇到"编辑了半天忘记保存"的噩梦。
离线导出：分享知识零门槛
这可能是 GBrain 最"惊艳"的功能。
点击工具栏的"导出 HTML"按钮，生成一个完全自包含的 HTML 文件。把这个文件发给任何人——不需要安装 GBrain，不需要联网，用浏览器直接打开就能看到完整的知识图谱。
而且不是一张死图。打开导出的 HTML，你可以：
- 拖动画布平移视图
- 滚轮缩放放大缩小
- 点击节点查看详情
- 切换主题换肤
- 查看图例理解关系类型
这意味着你的知识图谱可以像分享一个网页一样分享出去，接收者的体验和你在 GBrain 里编辑时几乎一样。
▼mermaid复制代码graph LR subgraph "传统分享方式" T1["截图发图片<br/>✗ 不可交互<br/>✗ 看不清细节"] T2["发文档链接<br/>✗ 需要登录<br/>✗ 需要联网<br/>✗ 对方要有账号"] T3["导出 PDF<br/>✗ 不可交互<br/>✗ 布局可能错乱"] end subgraph "GBrain 导出" G1["导出 HTML 文件<br/>✓ 可拖动/缩放/点击<br/>✓ 可切换主题<br/>✓ 无需安装<br/>✓ 无需联网<br/>✓ file:// 直接打开"] end style G1 fill:#3574f0,color:#fff,stroke:#3574f0,stroke-width:3px
快速上手：三步建好一张知识图谱
▼mermaid复制代码graph LR S1["第一步<br/>━━━━━<br/>创建画板<br/>填写主题名称<br/>添加能力域"] --> S2["第二步<br/>━━━━━<br/>在每个能力域下<br/>添加概念节点<br/>填写标题和描述"] S2 --> S3["第三步<br/>━━━━━<br/>进入连线模式<br/>点击两个节点<br/>选择关系类型<br/>语义连线自动生成"] S3 --> S4["🎉 完成<br/>一张有层次、有语义<br/>的知识图谱就建好了"] style S4 fill:#d97757,color:#fff
第一步：创建画板。 点击顶栏"新建画板"，填写画板名称和核心主题，添加几个能力域（比如"基础概念""核心模块""应用场景"）。系统会自动在画布中心生成主题节点，能力域 Hub 围绕展开。
第二步：添加概念节点。 点击能力域 Hub 上的"+"按钮，快速添加概念节点。双击节点标题可以内联编辑。在右侧面板填写描述、选择图标、添加外部链接。布局算法自动把新节点放到合理位置。
第三步：建立语义关系。 点击工具栏"连线模式"按钮，光标变成十字。点击第一个节点（起点），再点击第二个节点（终点），弹窗选择关系类型——前置依赖、数据调用、架构实现、应用落地、扩展关联。确认后，带语义标签的连线自动生成，附带流光动画。
三步完成。你现在有了一张可交互、可搜索、可导出、可持久化的知识图谱。
谁适合用
| 人群 | 用法 |
|---|---|
| 技术学习者 | 把一个技术体系的概念整理成图谱，看清楚依赖关系和学习路径 |
| 技术团队 | 沉淀系统架构文档，新成员入职看图就能理解全貌 |
| 方案架构师 | 画方案架构图，评审时投屏展示，评审后导出 HTML 分发 |
| 知识管理者 | 把散落在文档、笔记、脑子里的知识织成一张网，可视化呈现 |
| 教师/讲师 | 把课程知识体系画成图谱，导出 HTML 发给学生，学生可交互浏览 |
技术栈
GBrain 基于 React 19 + TypeScript + Vite 构建，后端使用 Express + SQLite，状态管理采用 Zustand。整个项目不依赖任何第三方图谱库，画布、节点、连线、视口变换全部从零实现——这意味着极致的定制能力和零外部依赖风险。
| 层级 | 技术 |
|---|---|
| 前端 | React 19 + TypeScript 6 + Vite 8 |
| 样式 | Tailwind CSS 4 + CSS 变量（三主题） |
| 状态管理 | Zustand 5（三 Store 拆分 + Facade） |
| 数据验证 | Zod 4（前后端共享 Schema） |
| 后端 | Express 5 + better-sqlite3（WAL 模式） |
| 导出 | html-to-image（PNG）+ 自研 HTML 生成器 |
总结
GBrain 不是一个"更好的思维导图"，也不是一个"更好的流程图"。它是一个为有语义关系的知识网络设计的编辑器。
如果你曾经因为思维导图表达不了"依赖"而苦恼，因为流程图看不出层次而抓狂，因为双链笔记没有图形视图而头疼——GBrain 就是为你做的。
试试看。创建一个画板，花十分钟把你在学的某个技术体系画进去。你会发现自己对这些概念的理解，在连线的那一刻变得清晰了。
项目地址：GitHub - knowledge-graph-app 技术栈：React 19 + TypeScript + Vite + Zustand + Zod + Express + SQLite
