---
title: "简介"
description: "Movk Sigma 是基于 sigma v4 的知识图谱可视化 Nuxt 模块，为 Vue 3 / Nuxt 4 提供声明式组件与 composables。"
canonical_url: "https://sigma.mhaibaraai.cn/docs/getting-started"
---
# 简介

> Movk Sigma 是基于 sigma v4 的知识图谱可视化 Nuxt 模块，为 Vue 3 / Nuxt 4 提供声明式组件与 composables。

## 什么是 Movk Sigma

[sigma.js](https://www.sigmajs.org/) 是一个 WebGL 图渲染引擎，[graphology](https://graphology.github.io/) 是与之配套的图数据结构。两者都是命令式的原生 JavaScript 库：建实例、改数据、调 `refresh()`、手动清理。

Movk Sigma 把这套流程包成 Vue 组件与 composables——数据变化自动增量同步、相机与选中状态成为响应式引用、覆盖层跟随画布定位、实例生命周期跟着组件走。

## 设计原则

**封装是加法，不是围墙。** 库没覆盖的原生能力，用户必须仍然能用：

- `useSigma()` 返回**原生** `Sigma` 与 `Graph` 实例，不包 Proxy、不做代理
- `settings` **整体透传**给 sigma，不逐字段枚举、不过滤未知键，上游新增配置立即可用
- 数据双通道：传 `data` 由库做增量 diff，传 `graph` 则库完全不碰数据，只负责渲染与生命周期
- 渲染程序、布局、控件全都可以绕过，库不劫持画布
- 不 re-export 上游，`sigma` 与 `graphology` 保持 peer 依赖，不夹带第二份实例
- `styles` 与用户自带的 `nodeReducer` / `edgeReducer` 都原样进构造选项，库内规则只在其后叠加，不会顶掉你的声明

## 能力概览

[**11 个组件**](https://sigma.mhaibaraai.cn/docs/components/graph)

根组件 

SigmaGraph

、四种 DOM 覆盖层、六个内置控件，全部 

Sigma

 前缀。

[**16 个 Composables**](https://sigma.mhaibaraai.cn/docs/composables/use-sigma)

相机、选中、邻域、拖拽、搜索、过滤、布局、指标、导出。

[**6 个工具函数**](https://sigma.mhaibaraai.cn/docs/utils/apply-graph-diff)

增量 diff、styles 合成、标签方位与档位、SDF 形状、延迟加载渲染原语。

## 一个最小例子

```vue [BasicExample.vue]
<script lang="ts" setup>
import type { SerializedGraph } from 'graphology-types'

const data: SerializedGraph = {
  attributes: {},
  options: { type: 'mixed', multi: false, allowSelfLoops: true },
  nodes: [
    { key: '1', attributes: { label: 'Node 1', x: 0, y: 0, size: 1, color: 'blue' } },
    { key: '2', attributes: { label: 'Node 2', x: 5, y: 10, size: 1, color: 'red' } },
    { key: '3', attributes: { label: 'Node 3', x: 10, y: 0, size: 1, color: 'green' } }
  ],
  edges: [
    { source: '1', target: '2', attributes: { size: 1 } },
    { source: '2', target: '3', attributes: { size: 1 } },
    { source: '3', target: '1', attributes: { size: 1 } }
  ]
}
</script>

<template>
  <SigmaGraph :data="data" />
</template>
```

> [!NOTE]
> 
> useSigma()
> 
>  是 inject，所有 composable 都必须在 
> 
> SigmaGraph
> 
>  子树内调用。因此消费上下文的部分总是一个独立子组件——这也正是真实应用的结构。


## Sitemap

See the full [sitemap](https://sigma.mhaibaraai.cn/sitemap.md) for all pages.