skills.rest
acaprino
acaprinoCOMMUNITY
Explore all skills by this author →
GitHub

forcegraph-exporter

Convert mindmap JSON outlines into interactive force-directed HTML visualizations.

6|2|Updated Jan 6, 2026
Search Tags:#html#interactive#visualization#graph#export#mindmap#force-graph
One-click install
npx skills add https://github.com/acaprino/claude-code-daodan --skill forcegraph-exporter
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: forcegraph-exporter
Source: https://github.com/acaprino/claude-code-daodan/tree/main/plugins/learning/skills/forcegraph-exporter
Command: npx skills add https://github.com/acaprino/claude-code-daodan --skill forcegraph-exporter

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Mindmaps are hard to explore from plain JSON; this skill provides a ready-made, browser-based interactive visualization for mindmap outlines.

Core Features & Use Cases

  • Interactive force-directed graph rendering of mindmap JSON outlines that runs in any browser with a CDN-based library.
  • Outputs a standalone HTML file for sharing, labeling, and exploring branches, roots, and colors.
  • Use cases include brainstorming sessions, educational demonstrations, and project planning visualizations.

Quick Start

Provide a mindmap JSON outline and run the exporter to generate mindmap.html.

Frequently Asked Questions about forcegraph-exporter

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

FAQPage Schema
How do I convert mindmap JSON to an interactive HTML visualization?▼

Convert mindmap JSON to an interactive HTML visualization by processing the outline into a standalone file with a force-directed graph. The export renders node-link data with color-coding and zoomable navigation using a CDN-powered library.

What is a force-directed graph used for when exploring mindmap outlines?▼

A force-directed graph provides browser-based mindmap exploration by dynamically rendering JSON outlines as interactive nodes and links. It solves the problem of plain JSON being hard to explore, enabling visual brainstorming and project planning.

Can I share interactive mindmap visualizations without installing extra dependencies?▼

Yes, you can share interactive mindmap visualizations without dependencies. The exporter generates a standalone HTML file that runs in any browser, loading its force-graph rendering library directly via a CDN.

Does the force-graph HTML export work in any browser for educational demonstrations?▼

The force-graph HTML export works in any standard browser for educational demonstrations. It relies on a CDN-based library to render the interactive visualization, ensuring accessibility for lightweight sharing and project planning.

What is the best way to visualize branches and roots from mindmap JSON?▼

The best way to visualize branches and roots from mindmap JSON is exporting a standalone HTML file with a force-directed graph. This approach applies color-coding and zoomable navigation to explore the outline structure interactively.

Related Skills

Explore More Software Engineering Skills→
acaprinoacaprino
6

generate-mindmap

Generate radiant Buzan-style mindmap JSON outlines with emoji anchors and color coding.

Community
Advanced
alanzoppaalanzoppa
1

react-force-graph

Embed and customize force-directed graph visualizations in React interfaces.

Community
Intermediate
joaquimscostajoaquimscosta
21

extracting-stitch-mockups

Extract Stitch mockup images from Google Stitch project pages via Playwright.

Community
Advanced
abpaiabpai

beautiful-mermaid

Render Mermaid diagrams to SVG and PNG files.

Community
Intermediate