# GBrain：把散落的知识，织成一张能看见的网 > 你脑子里有一堆概念，它们之间有依赖、有调用、有关联——但画在纸上是一团乱线，存在文档里是一堆死文字。GBrain 想解决的就是这件事。 > > > 最近在学习LangChain和langGraph的时候，总是前面学后面忘，我想总结一个思维导图，但是xmind有没有智能体，我个人非常懒惰，我实在不想想一个一个手敲，就做了这个小工具，里面的内容都是让AI帮我生成格式化数据然后直接塞进去了，有什么知识一目了然，后续的想法是加上智能体功能，通过人工交互自动生成节点和描述。 **开源地址**：https://github.com/DevYangJC/knowledge-graph-app **同时你在做智能体（灵码平台）的话可以看看我的如下正在做的项目，当然，现在还是半成品，可以给各位看看页面乐呵一下。** **开源地址**：https://github.com/DevYangJC/LingmaForge ![image.png](https://pic.code-nav.cn/post_picture/1609766978631761921/ulht927MUmjOMj83.webp) ![image.png](https://pic.code-nav.cn/post_picture/1609766978631761921/ZUny99HHiq3xA5fz.webp) ![image.png](https://pic.code-nav.cn/post_picture/1609766978631761921/MANPHpLPPiVFlcvv.webp) ## 为什么需要这个东西先说一个很真实的场景。你在学一门新技术，比如 LangChain。你看了几十篇文档，记了几十篇笔记。你知道"Prompt"和"OutputParser"有关系，知道"Chain"依赖"LLM"，知道"Agent"会"调用"Tools。但这些关系全散落在不同的笔记里，你从来没能在一张图上同时看到它们的全貌。你试过用思维导图。但思维导图只有父子层级，表达不了"A 依赖 B"和"A 调用 B"的区别。你试过用流程图。但流程图没有主题中心，所有框框平铺在一起，看不出哪个是核心、哪个是分支。你试过用 Notion / Obsidian 的双链。但双链只有"关联"一种关系，分不清是依赖、是实现、还是应用。 **问题的本质是：知识不是树，也不是无向图，它是一张有层次、有语义关系的有向网络。** 现有工具要么只支持树（思维导图），要么只支持无语义的线（流程图/白板），要么连语义都没有（双链笔记）。 GBrain 就是为这个场景设计的。 ## GBrain 是什么一句话：**一个支持三级节点层次 + 五种语义关系的可视化知识图谱编辑器。** ![image.png](https://pic.code-nav.cn/post_picture/1609766978631761921/JJUOSgZVnHzUBsqB.webp) ![image.png](https://pic.code-nav.cn/post_picture/1609766978631761921/52qNUgFmew41GO9g.webp) ![image.png](https://pic.code-nav.cn/post_picture/1609766978631761921/CfNieFtPaiLtLmGp.webp) 它能让你把零散的概念组织成一张有结构的网络图——核心主题在中心，能力域围绕展开，概念节点挂在能力域下，节点之间用带语义标签的连线表达"谁依赖谁、谁调用谁、谁实现了谁"。而且，它不是一个需要登录、需要联网、需要订阅的 SaaS。它跑在你本地，数据存在 SQLite 里，一键导出一个 HTML 文件就能离线分享。 ```mermaid graph TB subgraph "传统工具的局限" A1["思维导图
✗ 只有父子层级
✗ 无法表达语义关系"] A2["流程图/白板
✗ 没有主题中心
✗ 所有节点平铺
✗ 连线无语义"] A3["双链笔记
✗ 只有'关联'
✗ 无法区分依赖/调用/实现"] end subgraph "GBrain 的定位" B["三级节点层次
+ 五种语义关系
+ 离线导出
+ 本地持久化
+ 多画板管理"] 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： 1. 评审前：在画布上搭好方案架构，节点拖到合适位置，连线标注关系 2. 评审中：投屏展示，现场讨论时直接拖节点、改连线、加新概念 3. 评审后：一键导出 HTML 文件，发给所有参会者。他们打开就能交互——拖动画布、缩放查看、点击节点看详情、切换主题 **导出的 HTML 不是一张截图，是一个可交互的离线副本。** 这意味着即使你的电脑没装 GBrain，即使断网，收件人也能完整浏览你的知识图谱。 ```mermaid graph LR A["评审前
在 GBrain 中搭建方案"] --> B["评审中
投屏 + 现场编辑"] B --> C["评审后
一键导出 HTML"] C --> D["发给参会者"] D --> E["收件人打开 HTML
━━━━━━━━━━━━━
• 可拖动画布
• 可滚轮缩放
• 可点击节点看详情
• 可切换主题
• 无需安装任何软件
• 无需联网"] 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
学 B 之前必须先学 A
━━━━━━━━━━━━━
线型：实线
标签：依赖"] end subgraph "数据调用 calls" D2["A → B 表示：A 调用 B
传输数据或调用接口
━━━━━━━━━━━━━
线型：虚线
颜色：天蓝
标签：调用"] end subgraph "架构实现 implements" D3["A → B 表示：B 是 A 的实现
接口与实现类的关系
━━━━━━━━━━━━━
线型：虚线
颜色：紫色
标签：实现"] end subgraph "应用落地 application" D4["A → B 表示：A 在 B 中应用
理论概念在项目中的落地
━━━━━━━━━━━━━
线型：实线
颜色：翠绿
标签：应用"] end subgraph "扩展关联 related" D5["A ↔ B 表示：两者有关联
概念间的逻辑关联
━━━━━━━━━━━━━
线型：虚线
无箭头（双向）
标签：相关"] end ``` 每种关系有自己的颜色、线型和标签。一眼扫过去，你就能分辨出哪些线是依赖（实线）、哪些是调用（蓝色虚线）、哪些是关联（无箭头虚线）。这不是装饰，是信息密度——**线的视觉风格本身就在传递语义**。 ### 自由拖拽 + 智能布局，两全其美你可能会担心：自动布局会不会把我的节点摆得到处都是？不会。GBrain 的策略是**"自动布局打底，手动拖拽微调"**： 1. 新增节点时，布局算法自动把它放到合理的位置（径向分布 + 碰撞排斥，保证不重叠） 2. 你觉得位置不满意？直接拖。拖完的位置会被"钉住"，后续布局算法不会再动它 3. 你可以拖单个节点，也可以拖整个能力域组——该域下所有节点跟着一起平移 ```mermaid graph TD A["新增节点"] --> B["自动布局算法
径向分布 + 碰撞排斥
放到合理初始位置"] B --> C{"用户满意?"} C -->|是| D["完成"] C -->|否| E["手动拖拽节点"] E --> F["位置被'钉住'
pinnedPos 记录坐标"] F --> G["后续布局不再移动它
其他节点绕开它排列"] G --> D H["拖拽 Domain Hub"] --> I["整组移动
该域下所有节点一起平移
组内相对位置不变"] I --> D ``` ### 节点详情面板，每个概念都有完整档案点击任意概念节点，右侧自动展开详情面板。不是只有一个标题——每个节点都是一个完整的"知识卡片"： - **标题 + 图标**：快速识别 - **核心描述**：一段话讲清楚这个概念是什么 - **阶段标签**：标记学习阶段或优先级 - **能力域归属**：颜色标识属于哪个分组 - **外部链接**：挂参考文档、论文、视频的 URL - **自动推导的关联**：系统从所有连线中自动找出这个节点的前置依赖、相关概念、应用实例，点击可跳转你还可以双击任意节点直接内联编辑标题，或者在详情面板里修改图标、描述、链接。**所见即所得，不需要弹窗，不需要表单。** ```mermaid graph LR subgraph "节点详情面板" P1["📌 节点标题
━━━━━━━━━━━━━"] P2["阶段 Badge | 能力域 Badge"] P3["核心描述（长文本）
━━━━━━━━━━━━━
一段话讲清楚概念"] P4["外部链接
━━━━━━━━━━━━━
• 官方文档
• 论文
• 教程视频"] P5["自动推导的关联
━━━━━━━━━━━━━
↓ 前置依赖（点击跳转）
↔ 相关概念（点击跳转）
↑ 应用实例（点击跳转）"] 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["三级节点层次
+ 五种语义关系
+ 离线可交互导出"] 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["截图发图片
✗ 不可交互
✗ 看不清细节"] T2["发文档链接
✗ 需要登录
✗ 需要联网
✗ 对方要有账号"] T3["导出 PDF
✗ 不可交互
✗ 布局可能错乱"] end subgraph "GBrain 导出" G1["导出 HTML 文件
✓ 可拖动/缩放/点击
✓ 可切换主题
✓ 无需安装
✓ 无需联网
✓ file:// 直接打开"] end style G1 fill:#3574f0,color:#fff,stroke:#3574f0,stroke-width:3px ``` ## 快速上手：三步建好一张知识图谱 ```mermaid graph LR S1["第一步
━━━━━
创建画板
填写主题名称
添加能力域"] --> S2["第二步
━━━━━
在每个能力域下
添加概念节点
填写标题和描述"] S2 --> S3["第三步
━━━━━
进入连线模式
点击两个节点
选择关系类型
语义连线自动生成"] S3 --> S4["🎉 完成
一张有层次、有语义
的知识图谱就建好了"] 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](https://github.com/DevYangJC)* *技术栈：React 19 + TypeScript + Vite + Zustand + Zod + Express + SQLite*

《实战Java高并发程序设计》