From svg-diagram
Generate technical diagrams, architecture visuals, and layered illustrations as SVG files with an HTML export wrapper for PNG download. Use when the user asks to create a diagram, architecture chart, flowchart, layered visualization, system overview, or any visual that uses boxes, arrows, labels, and colors. TRIGGER when: user says "create a diagram", "draw", "visualize", "architecture diagram", "layered diagram", "flowchart", "make me an image of", or describes a visual layout. DO NOT TRIGGER when: user wants a presentation, a chart from data (use a charting library), or photo editing.
How this skill is triggered — by the user, by Claude, or both
Slash command
/svg-diagram:svg-diagramThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generate clean, professional technical diagrams as SVG files with an accompanying HTML page for PNG export.
Generate clean, professional technical diagrams as SVG files with an accompanying HTML page for PNG export.
.svg file that opens anywhere.<name>.svg and <name>-export.html. No build tools.Before generating, determine what the user needs. If the request is vague, ask via AskUserQuestion.
If the user provides a screenshot or detailed description, skip questions and generate directly. Use your judgment for layout, colors, and structure -- there are no prescribed patterns. Design each diagram to fit its content.
Use a descriptive kebab-case name based on the content (e.g. api-architecture.svg, deploy-pipeline.svg).
<svg xmlns="http://www.w3.org/2000/svg" width="{W}" height="{H}" viewBox="0 0 {W} {H}">
<style>
text { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; }
/* Define reusable text classes */
</style>
<!-- Background -->
<rect width="{W}" height="{H}" fill="#ffffff"/>
<!-- Diagram elements -->
</svg>
These are the SVG pitfalls that ruin diagrams. Avoid all of them.
SVG has no auto-layout. Text elements placed at similar Y coordinates WILL collide. You must manually guarantee separation.
character_count x per_char_width. Common per-char widths:
estimated_text_width < container_width - (2 x padding). If it doesn't fit, shrink the font, abbreviate the text, or widen the container.SVG text does NOT clip or wrap automatically. If text is wider than its box, it bleeds out visually.
<tspan> elements with dy spacing between them.width >= (longest_word_in_chars x per_char_width) + 16px padding at minimum.Browsers block canvas.toDataURL() on images loaded from file:// URLs due to CORS. This silently breaks PNG export.
<img src="diagram.svg"> in the export HTML. Always inline the full SVG markup directly into the HTML page.text-anchor on centered text. Without text-anchor="middle", text positioned at a center X coordinate will be left-aligned from that point, not centered on it.<text> element for multi-line content. SVG <text> is single-line only. Use <tspan> elements with dy attributes for line breaks.<title> and <desc> elements inside the SVG root. Screen readers need them.<defs>. Only add markers, filters, or patterns you actually reference.For every SVG, create a companion <name>-export.html file. The SVG MUST be inlined directly (see anti-pattern above).
<!DOCTYPE html>
<html>
<head>
<title>{Diagram Title}</title>
<style>
body { margin: 40px; font-family: sans-serif; background: #f5f5f5; }
button { padding: 12px 24px; font-size: 16px; cursor: pointer; background: #333; color: #fff; border: none; border-radius: 6px; margin-bottom: 20px; margin-right: 8px; }
button:hover { background: #555; }
.preview { max-width: 100%; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; background: #fff; }
.preview svg { display: block; width: 100%; height: auto; }
canvas { display: none; }
</style>
</head>
<body>
<button onclick="downloadPNG(1)">Download as PNG</button>
<button onclick="downloadPNG(2)">Download as PNG (2x)</button>
<br><br>
<div class="preview" id="preview">
<!-- INLINE THE FULL SVG MARKUP HERE (not an <img> tag) -->
<svg xmlns="http://www.w3.org/2000/svg" width="..." height="..." viewBox="...">
...
</svg>
</div>
<canvas id="canvas"></canvas>
<script>
function downloadPNG(scale) {
const svgEl = document.querySelector('#preview svg');
const svgData = new XMLSerializer().serializeToString(svgEl);
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
canvas.width = img.naturalWidth * scale;
canvas.height = img.naturalHeight * scale;
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
const link = document.createElement('a');
link.download = '{name}.png';
link.href = canvas.toDataURL('image/png');
link.click();
URL.revokeObjectURL(url);
};
img.src = url;
}
</script>
</body>
</html>
Replace {name} with the actual diagram name.
open <name>-export.htmlnpx claudepluginhub tielur/claude-code-skills --plugin svg-diagramCreate SVG-based technical diagrams inside HTML — flowcharts, sequence diagrams, state machines, data-flow diagrams, dependency graphs, request/response timelines. Use whenever the user wants to visualize, illustrate, diagram, or sketch a technical concept, system, or process. Strongly prefer SVG over ASCII art, mermaid blocks, or markdown text for anything spatial or relational. Reach for this whenever an explanation involves arrows, boxes, layers, or sequencing — even when the user doesn't say "diagram".
Generates a self-contained HTML file with a high-quality SVG system architecture diagram, optionally interactive with animated request paths. Use when visualizing architecture or stack relationships, not prose.
Generates .drawio architecture diagrams with consistent styles for containers, capabilities, external services, processes, and outcomes. Includes legend and exports to PNG/SVG/PDF/HTML.