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

amvcp-graph-diagrams

Generates interactive Mermaid and Graphviz HTML diagrams with node/edge click-to-select payloads for agents.

Updated May 8, 2026
Search Tags:#mermaid#diagram generation#architecture visualization#graphviz#interactive html#click selection#dot + latex
One-click install
npx skills add https://github.com/Emasoft/ai-maestro-visual-communicator-plugin --skill amvcp-graph-diagrams
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: amvcp-graph-diagrams
Source: https://github.com/Emasoft/ai-maestro-visual-communicator-plugin/tree/main/skills/amvcp-graph-diagrams
Command: npx skills add https://github.com/Emasoft/ai-maestro-visual-communicator-plugin --skill amvcp-graph-diagrams

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Turns diagram generation into an interactive experience where users can click individual nodes and edges and immediately send precise selections back to the agent.

Core Features & Use Cases

  • Mermaid diagram authoring with clickable nodes: Create flowcharts, sequences, ER diagrams, state diagrams, mindmaps, class diagrams, and C4-style flow layouts with selectable elements.
  • Graphviz directed graphs via .ve-graph: Render DOT-based graphs with zoom/pan and semantic click wiring for nodes and edges.
  • Typed click-to-selection wiring: Ensures each node/edge click returns an actionable selection payload to the agent.
  • LaTeX-ready labels: Supports math labels in DOT using $...$ with KaTeX post-processing for clean, exportable figures.
  • Guided engine selection and troubleshooting: Recommends Mermaid vs Graphviz based on graph size and provides handling for common rendering pitfalls.

Quick Start

Generate an interactive diagram by asking for an architecture, flowchart, sequence, ER, state machine, or mindmap and include Mermaid/Graphviz keywords (or run the command /amvcp-generate-web-diagram).

Frequently Asked Questions about amvcp-graph-diagrams

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

FAQPage Schema
How do I make Mermaid diagrams interactive with click-to-select nodes?▼

Interactive Mermaid diagrams use deterministic click wiring to register node and edge hit targets, returning selection payloads to the agent upon clicking. This requires Mermaid v11+ ESM rendering to wire elements for precise click-to-select events.

Can I use LaTeX math labels in Graphviz DOT diagrams?▼

Yes, LaTeX math labels are supported in Graphviz DOT diagrams using $...$ syntax. KaTeX post-processing renders the math expressions into clean, exportable HTML figures within the directed graph visualization.

When should I use Mermaid vs Graphviz for diagram generation?▼

Mermaid suits flowcharts, sequence, ER, state, mindmap, class, and C4 diagrams, while Graphviz via vendored viz.js handles larger directed graphs needing zoom and pan. Engine selection is guided by graph size and visualization requirements.

How do I render self-contained HTML diagrams with clickable architecture visualizations?▼

You generate self-contained HTML by creating Mermaid or Graphviz .ve-graph diagrams with wired click-to-select nodes. A Python runner opens the resulting interactive HTML file and emits selection counts and corresponding IDs.

Does Graphviz rendering in HTML require external dependencies or lazy loading?▼

Graphviz rendering uses vendored viz.js that is lazy-loaded, requiring no external runtime dependencies. The directed graphs render client-side within the self-contained HTML output file.

Related Skills

Explore More Design & Creative Skills→
eugenelimeugenelim
15

markdown-to-html

Convert Markdown files into self-contained styled HTML pages.

Community
Advanced
EmasoftEmasoft

amvcp-diagram

Generate themed, selectable SVG diagrams from JSON scene graphs.

Community
Advanced
sweeden-ttusweeden-ttu

latex-blog-series-publisher

Convert a LaTeX document into a Jekyll blog series with KaTeX and Mermaid diagrams.

Community
Advanced
mindmorassmindmorass
2

graphviz-diagrams

Create Graphviz diagrams with DOT source and pre-rendered images.

Community
Advanced