元数据（属性设计）
为什么要对知识节点进行属性设计？
既然要进行知识管理，那么像我们之前只有一个名称肯定是不够的，这时候就要对知识进行多维度管理。
知识属性设计的简单示例：
• 比如你知道一个新名词叫做『ChatGPT』，你把他加到了知识图谱里面；
• 随着你对这个名词了解的越来越多， 你知道
越来越多的信息丰富了 ChatGPT 这个知识点，这些看似杂乱的信息到底应该怎么表示呢。
主体识别
第一步我们要做的不是今天的主题『属性提取』，而是主体识别。主体识别也是人工智能的一个重要研究领域。
对于知识图谱来说，识别出的主题就是「知识节点」。在上面的例子中，ChatGPT，GPT4，OpenAI，GPT3 都是可以作为一个主体的，也就是说他本身也是一个事物。
属性提取
而上面例子中的AI产品，SaaS 服务，收费，免费试用，提供 API，提供 SDK等就可以作为 ChatGPT 的属性。
OpenAI公司，
GPT4 模型；而属性则不能单独存在，你说
收费时，你要说谁收费了，
SaaS 服务你要说谁是一个 SaaS 服务。
知识图谱表示
梳理好实体和属性之后，我们就可以考虑如何展示图谱了。
主体和属性展示
实体之间最常见的方式就是用线连接，属性最简单的方法肯定是放在旁边，下面给一个示意图：
更简洁的展示
上面的方案很严重的一个问题就是，当我们的节点显示很多的时候，几百上千甚至只需要几十个，界面就放不下了。
上面的图如果加上连线就更混乱了。
当然我们可以通过 UI 优化来达到更好的显示效果，但是无论怎么优化当系统显示太多内容都避免不了显示不下，杂乱的问题。
很简单的方案就是直接去掉属性，只保留名称，再看看示意效果：
这个时候大致就能看到我们的实体了（有些名字偷懒没加上，线也没连接）。
用我们上一篇的工具3d 展示之后就是下面这样：
显示文字之后：
主体区分颜色
不过看了一会儿，发现了一个问题：主体的归类可视化做的不好。
我们对这些实体的第一印象是什么：
•
ChatGPT是一个产品，•
GPT3和GPT4都是大语言模型，•
OpenAI是一家公司
这些我们在看图谱时第一反应的印象没有在图谱上很好体现出来。下面优化下展示方式，比如给实体增加颜色：
我们挑选了最主要的属性来增加颜色，当然这个颜色选择也可以根据你的使用场景挑选不同的属性。
用上篇介绍的工具可视化之后大概这样：
这个功能对现阶段构建个人知识库不太必要，就不做 Demo 了。
我的知识图谱设计
下面看看我自己怎么设计的知识图谱。
之前讲过，我现在还是从事技术相关工作居多，个人的知识沉淀也是大多基于此的。那我设计的时候也主要针对此类知识。
比如拿大家都熟悉的 LangChain 来说，他在我的知识世界里面长什么样呢：
• 姓名：LangChain
• 类型：Agent 框架
• 开源：是
• 免费：是
• 个人评价：三颗星
• 流行程度：五颗星
• 开发语言：Python
• 主页：https://www.langchain.com[1]
好了，一下子能想到这么多，基于刚才的属性描述，我们设计下通用的知识属性：
产品设计过程先讲这么多，下面看看如何实现。
知识图谱实现
截止当前介绍的为止，这个个人知识图谱后端就是标准的增删改查，不涉及什么好玩儿的实现或者复杂的逻辑。
在这个看脸的时代，咱们还是从前端开始，首先祭出我们的 VV大法（Vue+Vite），建一个 Vite + TypeScript 项目（Vite文档[2]）。
创建一个 Vite Vue 项目
新建一个项目：
> yarn create vite输入项目名称：
> yarn create vite
yarn create v1.22.19
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Installed "create-vite@4.4.1" with binaries:
- create-vite
- cva
? Project name: › vite-project选择Vue：
> yarn create vite
...
✔ Project name: … knowledge-web
? Select a framework: › - Use arrow-keys. Return to submit.
Vanilla
❯ Vue
React
Preact
Lit
Svelte
Solid
Qwik
Others接着选择 TypeScript：
> yarn create vite
...
✔ Project name: … knowledge-web
✔ Select a framework: › Vue
? Select a variant: › - Use arrow-keys. Return to submit.
❯ TypeScript
JavaScript
Customize with create-vue ↗
Nuxt ↗完成：
> yarn create vite
...
Scaffolding project in /knowledge-web...
Done. Now run:
cd knowledge-web
yarn
yarn dev
✨ Done in 167.44s.进入项目安装下依赖：
cd knowledge-web
yarn使用 Tailwind CSS
然后安装下宇宙第二的 CSS 框架 Tailwind[3]。
根据 Vite Tailwind CSS 文档[4] 操作：
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p配置 tailwind.config.js，
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}配置 ./src/index.css 文件，引用 CSS 资源：
@tailwind base;
@tailwind components;
@tailwind utilities;安装 Element Plus
如果使用表单的话，可以用 Element Plus[5] 这个框架。
根据 ElementPlus安装文档[6] 进行安装：
yarn add element-plusmain.ts 里面引入：
// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')其他 Js Lib
还用到一些额外的工具包，我就不一一演示怎么安装了，直接去软件首页下载安装配置即可：
• 3d-force-graph
• axios
• dat.gui
• pinia
初始化图
首先在 Vue 文件里面加一个节点：
<template>
<div ref="mountNode" class="mountNode w-full h-full"></div>
</template>在 Setup 代码里面把昨天的代码拷贝进去：
<script setup lang="ts">
onMounted(async () => {
const data = await getGraphData()
const container = mountNode.value
const Graph = ForceGraph3D()(mountNode.value)
.backgroundColor('#000003')
.graphData(data)
...
})
</script>就可以看到结果了：
还记得我们说前面要增加颜色吧，
先定义一组颜色：
const darkColors = [
'#7DA8FF',
'#44E6C1',
'#FF68A7',
'#7F86FF'
]如下：
然后找出我们的知识主体类型，给每个类型分配一个颜色，我之前保存了 5 个类型的数据：
•
company,•
tools,•
methods&patterns,•
frameworks,•
platforms
export const NODE_COLORS = {
company: darkColors[0],
tools: darkColors[1],
'methods&patterns': darkColors[2],
frameworks: darkColors[3],
platforms: darkColors[4]
}最后调整下 nodeColor 方法：
.nodeColor((node) =>
selectedNodes.value.has(node)
? 'rgb(215,255,0,1)'
: highlightNodes.has(node)
? node === hoverNode
? 'rgb(255,0,0,1)'
: 'rgba(255,160,0,0.8)'
: !!node.type
? NODE_COLORS[node.type]
: 'rgba(0,255,255,0.6)'
)就得出我们想要的效果了：
新增弹窗
之前的数据都是手动写的，现在咱们增加一个界面新增的功能，方便在查看知识图谱的时候进行数据的新增。
二话不说先增加一堆按钮：
<div class="bg-none absolute top-0 z-50 pl-8 pt-4">
<el-button :icon="Search" circle />
<el-button type="primary" :icon="Plus" circle @click="nodeDialogVisible = true" />
<el-button type="primary" :icon="Link" circle @click="linkDialogVisible = true" />
<el-button type="success" :icon="FullScreen" circle />
<el-button type="info" :icon="Message" circle />
<el-button type="warning" :icon="Star" circle />
<el-button type="danger" :icon="Delete" circle />
</div>效果如下：
然后定义一个表单弹窗，参考 官方表单文档[7]， 使用「CV 大法」，再结合我们三天速成的 JavaScript，改吧改吧：
然后定义保存方法（保存之后记得重新刷新下数据）。
const createNodeAndClose = async () => {
const nodeResult = await createNode(newNode.value)
nodeDialogVisible.value = false
const data = await getGraphData()
g.value.graphData(data)
}最后把填充一些知识，小工告成：
结语
之前跟身边的人或者网友聊天，大家经常觉得找一款或者开发一块合适的工具最重要，正所谓古语云：『工欲善其事，必先利其器』。
但是大家看下来今天这篇文章，是不是发现，要做的技术工作其实并不多，甚至我昨天介绍的一些现成的工具就能实现。所以这个「利其器」，首先是构建知识图谱流程的了解，然后是对自己知识世界的梳理和判断，以及对所构建产品的理解和思考， 最重要的是对个人知识不断地收集、清洗、提取、使用的过程。
好啦，收工。明天继续完善图谱的设计。
引用链接
[1]: https://www.langchain.com[2] Vite文档: https://vitejs.dev/guide/[3] Tailwind: https://tailwindcss.com/docs/installation[4] Vite Tailwind CSS 文档: https://tailwindcss.com/docs/guides/vite[5] Element Plus: https://element-plus.org/[6] ElementPlus安装文档: https://element-plus.org/zh-CN/guide/installation.html[7] 官方表单文档: https://element-plus.org/zh-CN/component/form.html
--- END ---