network-graph-modal

Render an embeddable force-directed network graph modal for related entities.

1|Updated Jan 28, 2026
One-click install
npx skills add https://github.com/Benmore-Studio/Benmore-Meridian --skill network-graph-modal
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: network-graph-modal
Source: https://github.com/Benmore-Studio/Benmore-Meridian/tree/main/skills/network-graph-modal
Command: npx skills add https://github.com/Benmore-Studio/Benmore-Meridian --skill network-graph-modal

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) and references (resource) components.

What problem does it solve?

Manually exploring relationships across entities is error-prone and time-consuming; this skill provides an interactive graph modal to visualize connections around a root entity.

Core Features & Use Cases

  • Hover to highlight the 1-hop neighbourhood and update the sidebar with the related entity’s profile.
  • Click to pin a node or edge, enabling multi-hop expansion and branch collapse for deeper investigation.
  • Drop-in modal that works with any entity type and any signal set, with a small reference implementation (assets/network-graph.js, assets/network-graph.html).

Quick Start

Drop in the modal HTML and JS, define window.rootEntityId and window.rootEntityName on the page, then open the graph via the trigger.

Frequently Asked Questions about network-graph-modal

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I visualize related entities in a network graph modal?

You can explore related entities using an embeddable force-directed network graph modal that operates on any entity type, supports multi-hop expansion, hover-based neighbourhood highlighting, and pinning for deeper investigation.

What is the best way to explore multi-hop relationships around a root entity?

The best way to explore multi-hop relationships is using a force-directed graph modal that lets you click to pin nodes or edges, enabling branch expansion and collapse for deeper investigation around a root entity.

How do I add a force-directed graph visualization to my frontend page?

To add a force-directed graph to your frontend, include the domain-agnostic network-graph.html and network-graph.js assets, define your root entity variables, and open the drop-in modal via a trigger element.

Does this network graph visualization work with any entity type?

Yes, the network graph visualization works with any entity type and any signal set, provided you rely on a JSON API that returns related entities in a consistent structure for the graph to render.

How do I highlight a node's 1-hop neighbourhood in a vis-network graph?

To highlight a 1-hop neighbourhood in a vis-network graph, hover over a node to visually isolate its direct connections and update the sidebar with the related entity’s profile for inspection.

Do I need a specific JSON API structure to render related entities in a graph modal?

Yes, you need a JSON API that returns related entities in a consistent structure to populate the force-directed graph modal, as the visualization relies on this standardized data to map multi-hop connections.