skills.rest
Emasoft
EmasoftCOMMUNITY
Explore all skills by this author →
Website𝕏@fmuaddibGitHub

amvcp-diagram

Generate themed, selectable SVG diagrams from JSON scene graphs.

Updated May 8, 2026
Search Tags:#theming#svg#diagram#agent tooling#json scene graph#interactive selection#edge routing
One-click install
npx skills add https://github.com/Emasoft/ai-maestro-visual-communicator-plugin --skill amvcp-diagram
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: amvcp-diagram
Source: https://github.com/Emasoft/ai-maestro-visual-communicator-plugin/tree/main/skills/amvcp-diagram
Command: npx skills add https://github.com/Emasoft/ai-maestro-visual-communicator-plugin --skill amvcp-diagram

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Producing consistent, clickable diagrams from LLM output is hard: manual SVG is error-prone, theming can drift across light/dark, and selection interactions are easy to break.

Core Features & Use Cases

  • JSON scene-graph diagram rendering for themed, selectable SVG diagrams (nodes, edges, groups) with fail-fast validation.
  • Renderer routing guidance: use this skill for diagram structures that need exact geometry and a fixed vocabulary, or return to other skills for charts/graph auto-layout/ASCII fallbacks.
  • Interactive selection primitives via stable payloads, enabling click-to-detail, comment threading, and element targeting.
  • Shared engine fundamentals including theming token forwarding, node-type library, edge routing strategies, marker semantics, and viewport scaffolding.

Quick Start

Use the amvcp-diagram skill when the user asks for any diagram, then emit a valid JSON scene graph with nodes and edges using an appropriate preset (flow, architecture, time, network, or ASCII handoff).

Frequently Asked Questions about amvcp-diagram

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

FAQPage Schema
How do I generate interactive SVG diagrams from JSON data?▼

You can generate interactive SVG diagrams from JSON data by defining a JSON scene graph containing nodes, edges, and groups, which the renderer validates and converts into a self-contained HTML file with clickable, selectable elements.

What is a JSON scene graph and when do I need it for diagram rendering?▼

A JSON scene graph is a structured format defining exact geometry and a fixed vocabulary for nodes and edges. You need it when your diagram requires precise layouts, consistent theming via CSS tokens, and interactive selection payloads for agent workflows.

How do I theme SVG diagrams for light and dark modes using JSON?▼

Theme SVG diagrams for light and dark modes by forwarding CSS custom properties, specifically using `--vc` theming tokens within the JSON scene graph configuration to maintain consistent visual styling across different viewport environments.

Can I use JSON scene graph rendering for auto-layout graphs and numeric charts?▼

JSON scene graph rendering is not intended for auto-layout graphs or numeric charts. It is designed for process, architecture, time, and network visualizations that require exact geometry and a consistent node-edge vocabulary.

Does the interactive diagram renderer support click-to-detail and comment threading?▼

Yes, the interactive diagram renderer supports click-to-detail and comment threading by emitting stable selection-atom payloads upon user interaction, enabling agent-driven workflows to target specific diagram elements.

What are the limitations of using JSON scene graphs for SVG diagram generation?▼

Limitations of using JSON scene graphs include strict fail-fast scene validation and a fixed vocabulary for exact geometry, meaning it cannot handle numeric charts or auto-layout graphs and may require an ASCII fallback for unsupported structures.

Related Skills

Explore More Design & Creative Skills→
zephyrwang6zephyrwang6
333

json-canvas

Create and edit JSON Canvas .canvas files with nodes, edges, and groups.

Community
Basic
xingxingstars123xingxingstars123

agent-browser

Automate browser interactions with ref-based element targeting and JSON snapshots.

Community
Advanced
radioactive-labsradioactive-labs
68

plutonium-theming

Apply CSS design tokens to standardize UI theming across web application components.

Official
Advanced
EmasoftEmasoft

amvcp-diag-time

Generate time-axis diagrams for sequences, state machines, timelines, and Gantt schedules.

Community
Intermediate