VisNetwork

Interactive network graphs with context menus and drag interactions.

VisNetwork graph

Interactive network graph with vis-network + Vue.

VisNetwork graph inside panelini
Context menus

Right-click nodes and edges to run per-element actions from Python.

VisNetwork context menus
Ctrl+drag duplicate

Hold Ctrl and drag to clone nodes, with a post-processing callback.

VisNetwork Ctrl+drag duplicate

More examples

VisNetwork - standalone

The same graph without the Panelini shell.

Standalone VisNetwork
JSON data tooltips

Attach json_data to a node and show it as a YAML tooltip on hover.

Node tooltips from JSON data
Device hierarchy

A device ontology in a top-down hierarchical layout with typed edges.

Device hierarchy ontology
Family hierarchy

A family tree with fixed node positions and labeled relations.

Family tree with fixed positions
Team and project groups

People and projects colored by team group with a physics layout.

Team and project structure with colored groups
Image nodes

Render nodes as remote images.

Image nodes
Rotating circles

A ring of fixed nodes plus free nodes (the rotation runs when you run it locally).

Rotating circles
File drop

Drop image or CSV files onto the canvas to spawn nodes.

Drop files onto the graph
GraphDetailTool with file drop

The GraphDetailTool workspace seeded with file-drop nodes.

GraphDetailTool file-drop workspace
Incremental graph updates

Build a knowledge graph step by step with an action playbook.

Incremental knowledge graph