neo4j-nvl-skill

仓库创建 2026年1月20日最近提交 7 天前SkillHot 收录 20 天前

▸ 精选理由

支持 Canvas/WebGL 与丰富交互，便于嵌入现有前端

▸ 风险提示

浏览器端渲染大量节点可能影响性能

这个 Skill 做什么

在浏览器中以框架无关方式渲染并交互式展示 Neo4j 图

在浏览器里把 Neo4j 的图渲染成可交互的可视化，框架无关，支持 Canvas 和 WebGL，两者可以按性能和效果选择。常用场景是把 driver.executeQuery 的结果喂进来，接入缩放、拖拽、点选、框选、lasso 等交互，或在 React/vanilla 应用里嵌入。库自带 interaction-handlers 和结果转换器，省去自己从头处理事件和数据映射。

▸ 展开 SKILL.md 英文原文

Neo4j Visualization Library (NVL) — framework-agnostic graph rendering for the browser. Covers @neo4j-nvl/base (NVL class, nodes/relationships, Canvas vs WebGL renderer), @neo4j-nvl/interaction-handlers (ZoomInteraction, PanInteraction, DragNodeInteraction, ClickInteraction, HoverInteraction, BoxSelectInteraction, LassoInteraction, KeyboardInteraction), and @neo4j-nvl/react (InteractiveNvlWrapper, BasicNvlWrapper, StaticPictureWrapper). Use when rendering a Neo4j graph in a browser, feeding driver results through nvlResultTransformer, choosing Canvas vs WebGL, wiring node/relationship click/hover/drag handlers, or embedding NVL in React, Vite, or vanilla JS apps. Does NOT handle Cypher query authoring — use neo4j-cypher-skill. Does NOT handle driver lifecycle, sessions, or executeQuery setup — use neo4j-driver-javascript-skill. Does NOT handle GraphVisualization/Needle default embed — use @neo4j-ndl/react.

内容创作可视化前端交互通用

Stars

Forks

仓库内 Skill

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/neo4j-contrib/neo4j-skills/main/neo4j-nvl-skill/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/neo4j-contrib/neo4j-skills/main/neo4j-nvl-skill/SKILL.md"

SKILL.MD 节选查看完整文件 ↗

## When to Use
- Rendering a Neo4j graph in a browser (vanilla JS, React, Vite) with custom interactions, rendering, or data shapes
- Visualizing `driver.executeQuery` results as an interactive graph
- Wiring zoom, pan, drag, click, hover, lasso, or box-select interactions
- Embedding NVL inside an existing app and synchronizing graph state

## When NOT to Use
- **Pre-styled embedded graph view with default behavior, no custom interactions** → `GraphVisualization` from `@neo4j-ndl/react` (Neo4j Needle / NDL design system) — wraps NVL with default Neo4j styling. See [Use NVL or the Needle Component?](#use-nvl-or-the-needle-component) below.
- **Python / Jupyter notebook graph visualization**

via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有