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.