vis-network

Generate self-contained vis-network MicroSims for iframe embedding in textbooks.

90|12|Updated Nov 1, 2025
One-click install
npx skills add https://github.com/dmccreary/claude-skills --skill vis-network
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vis-network
Source: https://github.com/dmccreary/claude-skills/tree/main/skills/archived/vis-network
Command: npx skills add https://github.com/dmccreary/claude-skills --skill vis-network

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill prescribes rules for creating vis-network MicroSims optimized for inline embedding in MkDocs-based textbooks.

Core Features & Use Cases

  • Standardized interaction: navigation buttons, no mouse zoom/pan for embedded contexts
  • Graphs for CLDs, concept maps, or knowledge graphs
  • Documentation templates and index integration

Quick Start

Use the vis-network skeleton to generate a MicroSim with a left graph and right controls.

Frequently Asked Questions about vis-network

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

FAQPage Schema
How do I embed network diagrams in textbooks without requiring users to download software?

Educational network diagrams can be embedded directly in textbooks using browser-based visualization. This Skill automates creation of self-contained vis-network packages deployable as iframes in MkDocs-based textbooks, supporting CLDs, concept maps, and organizational structures with standardized interaction controls and responsive design.

Can I create concept maps and knowledge graphs that work inside embedded textbook contexts?

Yes. This Skill generates vis-network MicroSims optimized for inline embedding, enforcing a standard folder structure, disabling mouse wheel zoom and drag-to-pan by default in embedded mode, and enabling built-in navigation buttons for seamless textbook integration across concept maps, workflows, and network diagrams.

What's the best way to standardize interaction behavior for embedded learning visualizations?

This Skill prescribes standardized rules for vis-network MicroSims, including environment-aware initialization that automatically switches interaction behavior between iframe-embedded and fullscreen contexts, disabling mouse controls for embedded deployment and enabling responsive layout with navigation buttons.

How do I set up browser-based graph visualizations for educational deployment?

This Skill automates setup of vis-network MicroSims with enforced folder structure under /docs/sims, fixed responsive layouts, pre-configured interaction settings, and documentation templates for quick integration into MkDocs textbooks without manual configuration.

Do I need special tools to deploy interactive diagrams across different network visualization types?

This Skill handles deployment across CLDs, concept maps, knowledge graphs, workflows, and organizational structures through a unified vis-network MicroSim workflow, requiring only standard browser support and MkDocs infrastructure for textbook embedding.

What limitations should I know about embedding graphs in textbooks?

Mouse wheel zoom and drag-to-pan are disabled by default in embedded contexts to prevent accidental scrolling conflicts with textbook pages. Navigation buttons replace these interactions. Fullscreen mode re-enables standard controls when users opt out of embedded viewing.