Knowledge Graph Visualizer Expert

Problem

Course, competency, and knowledge structures are often kept as outlines, tables, or scattered notes. Turning them into diagrams by hand can drop hierarchy or relationship labels, while maintaining Mermaid, Graphviz, and interactive HTML separately creates inconsistent versions of the same graph.

How It Works

The skill expects a unified stage-one JSON object with nodes, edges, and optional metadata; if only a course or topic name is supplied, it first constructs that stage-one graph. It then emits a fixed sequence of outputs: raw JSON, Mermaid, Graphviz DOT, Markdown hierarchy, a single-file HTML visualization, and a static image prompt or image when available. The HTML page uses a D3.js force-directed layout with drag, zoom, node details, neighbor highlighting, search, reset, a type legend, curved directed edges, and arrow markers. All formats preserve the same graph data, with matching node and edge counts, which makes it useful for visualizing modules, knowledge points, methods, cases, activities, and assessment items.

Boundaries

This skill is best for teaching, research, and concept explanation. It does not require a backend and should not mutate the source graph during visualization. Mermaid and Graphviz output still depend on the rendering environment, and dense graphs with many Chinese labels may need careful zooming. The single-file HTML should remain self-contained except for the D3 CDN. For readable course graphs, keep the input around 18 to 35 nodes and 20 to 45 edges unless a larger structure is explicitly requested.