Architecture Diagram — React/Inline-SVG Embedding

This is the embedded counterpart to the architecture-diagram skill. The parent skill ships a self-contained .html file with its own toolbar, html2canvas/jsPDF CDN scripts, summary cards, and footer. This skill produces a leaner artifact suited for direct embedding inside a React-rendered markdown page: a fenced markdown block whose body is inline <svg> augmented with <lucide-icon> placeholders.

The runtime renderer lives in the consumer repo (see "Consumer contract" below). The React component provides the chrome (frame, FIG label, copy/save toolbar, slate-950 grid background, JetBrains Mono surface) — so the SVG you emit must contain only the diagram itself, not the chrome.

What triggers this skill

• "Embed this diagram inside the blog post"
• "Generate the SVG for an arch-diagram block"
• "Make a React-embedded version of the architecture diagram"
• Any request where the user wants the diagram inline in a page, not as a downloadable HTML file
• Follow-on to the architecture-diagram skill when the user says "now put this on the site"

If the user wants a shareable standalone artifact (Slack, PDF, slides), use the parent architecture-diagram skill instead.

Workflow