diff --git a/demo.html b/demo.html
new file mode 100644
index 0000000..c400f9d
--- /dev/null
+++ b/demo.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html><html lang="zh"><head><meta charset="utf-8"><title>GraphViewer 组件 Demo</title>
+<style>body{font-family:system-ui;margin:0;background:#0a0e17;color:#dbe2ea}h2{padding:12px 16px;margin:0;font-size:15px}
+.box{height:520px;margin:0 16px 16px;border:1px solid #1e2f4d;border-radius:8px;overflow:hidden}</style></head><body>
+<h2>① 内联数据 mount(el,{data})</h2><div class="box" id="v1"></div>
+<h2>② API 数据源 mount(el,{api:'url'}) —— 这里连 Graphiti 后端</h2><div class="box" id="v2"></div>
+<script src="https://cdn.jsdelivr.net/npm/react@18.3.1/umd/react.production.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/react-force-graph-2d@1.29.0/dist/react-force-graph-2d.min.js"></script>
+<script src="./graph-viewer.js"></script>
+<script>
+// ① 喂任意符合格式的数据(这里手搓一个示例图)
+GraphViewer.mount(document.getElementById('v1'),{data:{
+  nodes:[{id:'A',labels:['人'],properties:{entity_type:'人',name:'张三',description:'后端工程师'}},
+         {id:'B',labels:['组织'],properties:{entity_type:'组织',name:'技术部'}},
+         {id:'C',labels:['系统'],properties:{entity_type:'系统',name:'订单服务'}}],
+  edges:[{id:'e1',source:'A',target:'B',type:'隶属',properties:{keywords:'属于'}},
+         {id:'e2',source:'A',target:'C',type:'负责',properties:{keywords:'开发'}},
+         {id:'e3',source:'A',target:'B',type:'曾任下属',properties:{keywords:'旧关系',invalid_at:'2026-10-15'}}]
+}});
+// ② 指定任意返回 {nodes,edges} 的 API URL (此处用 Graphiti viz 后端演示)
+GraphViewer.mount(document.getElementById('v2'),{api:'/api/graph?group_id=infra&limit=80'});
+// ③ iframe 场景: 宿主页面 postMessage({type:'gv-data',data:{...}}) 即可动态喂图(见 README)
+</script></body></html>