AstroKnot — 3D知识图谱编辑器，让知识像星空一样可视化

星移三秋 · 2026 年7 月 8 日 13:56

0. 先和大家打个招呼吧

你是谁：一名毕业一年将要入职的汽车智能网联DRE
你是怎么用 TRAE 把 Demo 做出来的：

说实话最开始我并不知道trae这个工具。

一开始我是想整理自己和ai对话学到的零碎知识，并且打算打造属于自己用于工作的个人知识库。一开始是用obsidian之类软件，但感觉上手有些困难，需要学会markdown语言，知识图谱默认是力导向，很难看出层次级别关系。另外节点和连线默认样式又有些单调乏味。而且实现一些功能样式需要折腾插件。（obsidian是一个很优秀的笔记软件，是我太笨不会用）

deepseek_html_20260511_3f36b4.html (20.3 KB)

这是这个软件最开始的样子，我从obsidian导出markdown，然后在网页版deepseek让ai给我写出来这么一个文件。然后尝试是不是可一步一步加功能，添加节点，删除节点，连线，每个节点有自己的富文本编辑器…之后就是一发不可收拾。

一开始是让ai一遍又一遍的从头到尾生成代码，后来学会了把这个html下载用记事本打开，把文件发给ai，告诉我具体改哪行，后来写成屎山代码了，知道需要拆分文件了，让deepseek给我先拆出来html，css，js文件，后来又把js文件拆成了十几个模块文件。这些文件怎么管理呢？于是通过ai推荐下载了vscode，在vscode里进行开发。

AstroKnot（未做任何抽离的屎山）.html (147.6 KB)

后来ai每一个对话，我都需要把所有文件全部上传到对话里。然后提出需求，deepseek生成代码并告诉我哪个文件改哪行，我就网页和vscode来回切换复制粘贴。

**但每次都需要上传文件，还需要切换页面复制粘贴是在太累太低效了。**于是通过deepseek知道了trae这个工具

1. Demo 简介

是什么：AstroKnot 是一款 Electron 桌面应用，将知识笔记以 3D 星系可视化的形式呈现。每个知识点是一颗星球，连线展示知识之间的关联层级，支持富文本编辑、代码块、公式、多媒体嵌入，让复杂知识的"结构"真正看得见、可交互。
面向谁：

研究人员/学者：需要管理大量文献笔记，看清研究脉络
创作者/写作者：构思长篇文章、小说、剧本时把握整体结构
学生/学习者：复习复杂学科知识，建立知识网络而非碎片笔记
项目经理/策划者：规划多层级项目，理清任务关联

主要功能： 3D 星系视图：每个知识点是一颗星球，连线展示关联关系，拖拽、旋转、缩放自由探索

2D 树状视图：需要细节时一键切换，层级结构清晰呈现
富文本节点：每个节点内可嵌入代码块（语法高亮+缩进引导线）、数学公式、图片、表格
多文档预览：PDF、Word、Excel 、音视频直接在节点内预览，无需跳转

2. Demo 创作思路

灵感来源：你为什么想到做这个；

一开始我是想整理自己和ai对话学到的零碎知识，并且打算打造属于自己用于工作的个人知识库。一开始是用obsidian之类软件，但感觉上手有些困难，需要学会markdown语言，知识图谱默认是力导向，很难看出层次级别关系。另外节点和连线默认样式又有些单调乏味。而且实现一些功能样式需要折腾插件。（obsidian是一个很优秀的笔记软件，是我太笨不会用）

想解决的问题：用户真实存在的痛点；

痛点一：笔记散落，难以看清整体结构

传统笔记工具以"页面"为单位，你打开一个文档，只能看到这个文档的内容。要理解整体，需要在大脑中拼凑各个页面——这对于复杂项目来说，认知负担极高。

痛点二：层级关系不够直观

思维导图在二维平面上展开，当层级深、节点多时，图会变得非常拥挤，无法一眼看出"哪个节点在哪里"。而且二维平面限制了空间布局的自由度。

痛点三：节点内容与结构割裂

很多工具要么专注"结构"（如 XMind），要么专注"内容"（如 Word）。你需要在两个工具之间来回切换，无法在一个应用内同时编辑内容和调整结构。

为什么做这个方向：你的判断和取舍。

三维空间天然适合表达复杂层级：星球可以悬浮于空间任意位置，连线不会像二维那样拥挤
技术可行性已成熟：Three.js 让 Web 3D 渲染变得简单，Electron 让桌面应用开发门槛降低
差异化明显：市面上少有知识管理工具采用 3D 可视化，并且几乎没有支持用3d视图表达多层2D视图。本项目支持多图层2D视图，并且可通过自动排列在3D视图中还原2D布局并且在高度的维度中实现多2D图层堆叠。
用户体验可接受：通过模仿大众已知软件系统的操作流程降低用户上手学习成本

很多用户玩过 3D 游戏、易于接受WASD，空格，ctrl，鼠标滚轮的交互方式。
主界面模仿Windows桌面，（右键菜单面板，双击节点进入文本编辑器，类似于双击图标打开应用软件，避免功能按钮大量堆砌从而视觉上造成用户的心理负担）
文本编辑器模仿word布局，所见即所得

3. Demo 体验地址

网页演示版：AstroKnot

AstroKnot项目介绍网页：AstroKnot - 3D 知识网络可视化与编辑工具

源码地址：

Gitee：https://gitee.com/star-movement-three-autumn/AstroKnot.git

GitHub： GitHub - StarAutumn/AstroKnot: 3D 知识网络可视化与编辑工具。基于 Electron + Three.js 构建，将知识节点以 3D 星图的形式呈现，每个节点可打开富文本编辑器进行深度编辑。 · GitHub

GitHub发行版安装包：Release AstroKnot Windows x64 · StarAutumn/AstroKnot

早期Demo：AstroKnot（未做任何抽离的屎山）.html (147.6 KB)

4. TRAE 实践过程

清晰展示用 TRAE 完成 Demo 开发的完整流程；

我这个“Demo“有些大，我用AstroKnot的2D视图概括展示我的项目每个功能的开发以及修bug的流程

附开发关键步骤截图（不少于 3 张）；

附关键任务对话的 Session ID（不少于 3 个），用于证明作品由 TRAE 开发完成。

文本编辑器由quill换成tinyMCE：

.2556777706297289:e8ccbcff0dc184a80e72b76def4f7275_6a0dde1d2834f2fbb7c4cd1b.6a0de5f8da168e139a79d329.6a0de5f8009c607f4a99ddf2:Trae CN.T(2026/5/21 00:48:56)

.2556777706297289:8e62e2c5e0b5f52112a1ceff9eab7d18_6a0dde1d2834f2fbb7c4cd1b.6a0de8a8da168e139a79d367.6a0de8a7009c607f4a99ddf3:Trae CN.T(2026/5/21 01:00:24)

.2556777706297289:5642daffffd50e0239b6d453cb0a6d39_6a0dde1d2834f2fbb7c4cd1b.6a0dec05da168e139a79d3a8.6a0dec05009c607f4a99ddf4:Trae CN.T(2026/5/21 01:14:45)

.2556777706297289:533359a16f5a19cbc0b0205b278af64f_6a0dde1d2834f2fbb7c4cd1b.6a0dee21da168e139a79d3d1.6a0dee21009c607f4a99ddf6:Trae CN.T(2026/5/21 01:23:45)

.2556777706297289:6a7293d0132bb7fc40329054aef1757f_6a0dde1d2834f2fbb7c4cd1b.6a0df7a0da168e139a79d504.6a0df7a0009c607f4a99ddf9:Trae CN.T(2026/5/21 02:04:16)

2d模式增加光标悬浮节点上快速创建子节点的按钮：

.2556777706297289:863152a31540f0dacfc2ea3ec1bc529c_6a3d0ff596d79ddf9dbfc504.6a3d1d5d96d79ddf9dbfc660.6a3d1d5d95dcf16d8ececc28:Trae CN.T(2026/6/25 20:21:49)

.2556777706297289:de8646757d3b6ed693b9c8b536c49d40_6a3d0ff596d79ddf9dbfc504.6a3d27cf96d79ddf9dbfc758.6a3d27cf95dcf16d8ececc29:Trae CN.T(2026/6/25 21:06:23)

文本编辑器代码块样式修改：

.2556777706297289:2b127faf875e0d4f3eb1b21600daf038_6a3d0ff596d79ddf9dbfc504.6a3d4c9896d79ddf9dbfcda2.6a3d4c9795dcf16d8ececc34:Trae CN.T(2026/6/25 23:43:20)

.2556777706297289:157305c92e4e8e068030abe9aae65cfa_6a3d0ff596d79ddf9dbfc504.6a3d4fad96d79ddf9dbfceb1.6a3d4fac95dcf16d8ececc36:Trae CN.T(2026/6/25 23:56:29)

.2556777706297289:367ecec1dd6203bf852921e542fe8db7_6a3d0ff596d79ddf9dbfc504.6a3d544f96d79ddf9dbfcffd.6a3d544f95dcf16d8ececc3c:Trae CN.T(2026/6/26 00:16:15)

插入代码块导致文本编辑器闪退bug的调试与修复：

.2556777706297289:2accba74a0654493282c84a60074e991_6a3d0ff596d79ddf9dbfc504.6a3dcc8f58635268d2eb6c83.6a3dcc8f53cf7c420f63e15d:Trae CN.T(2026/6/26 08:49:19)

.2556777706297289:196d76518a410fef24958ae221e0a714_6a3d0ff596d79ddf9dbfc504.6a3dd2b558635268d2eb6cd3.6a3dd2b453cf7c420f63e15e:Trae CN.T(2026/6/26 09:15:33)

.2556777706297289:1797fbe5d02c0762daca87d9bc9ad37d_6a3d0ff596d79ddf9dbfc504.6a3dd48858635268d2eb6daf.6a3dd48753cf7c420f63e160:Trae CN.T(2026/6/26 09:23:20)

.2556777706297289:821b5542e45987900df06986e722a190_6a3d0ff596d79ddf9dbfc504.6a3dda2558635268d2eb6f37.6a3dda2553cf7c420f63e162:Trae CN.T(2026/6/26 09:47:17)

5. 对应的报名审核通过的帖子链接

【学习工作赛道】 AstroKnot — 3D知识图谱编辑器，让知识像星空一样可视化 - TRAE AI 创造力大赛 / 【大赛报名专区】 - TRAE 官方中文社区