diff --git a/packages/graphin-components/src/Legend/demos/index.tsx b/packages/graphin-components/src/Legend/demos/index.tsx
new file mode 100644
index 000000000..cbb927f5a
--- /dev/null
+++ b/packages/graphin-components/src/Legend/demos/index.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import Graphin, { Utils } from '@antv/graphin';
+import { Legend } from '@antv/graphin-components';
+
+const data = Utils.mock(5).circle().graphin();
+data.nodes.forEach((node, index) => {
+  const isCompany = index % 3 === 0;
+  node.data.type = isCompany ? 'company' : 'person';
+  node.style = {
+    fill: isCompany ? 'red' : '#f79e26',
+    icon: {
+      type: 'font',
+      fontFamily: 'graphin',
+      value: isCompany ? 'company' : 'user',
+    },
+  };
+});
+
+const Demo = () => {
+  return (
+    <Graphin data={data}>
+      <Legend bindType="node" sortKey="data.type" colorKey="style.fill">
+        <Legend.Node />
+      </Legend>
+    </Graphin>
+  );
+};
+
+export default Demo;
diff --git a/packages/graphin-components/src/Legend/index.md b/packages/graphin-components/src/Legend/index.md
index 1d8390585..3792ca00b 100644
--- a/packages/graphin-components/src/Legend/index.md
+++ b/packages/graphin-components/src/Legend/index.md
@@ -14,6 +14,8 @@ nav:
 
 Legend 图例是一种常见的图分析配套组件，通常将节点和边分类后进行染色，方便用户交互分析。其中点击图例有两种逻辑，一是高亮，即高亮选中的图例所对应的节点；二是过滤，即将未选中的节点隐藏。
 
+<code src='./demos/index.tsx'>
+
 ## 功能特性
 
 - 支持用户自定义 legend 的颜色映射