artifact-diagram

OUTPUT CONTRACT

Produces ONE .html file with inline <svg> elements.

• Diagrams are inline SVG. NEVER <img> references to external image files. NEVER Mermaid \``mermaid` blocks. NEVER PlantUML. NEVER ASCII boxes.
• Annotations and labels are real HTML elements (<aside class="note">, <div class="legend">) layered over or beside the SVG — not text inside <text> only.
• File extension is .html, always.

Inline-SVG diagrams. Boxes, arrows, swimlanes, dependency graphs — rendered in a single .html so they're self-contained, scalable, and editable in any text editor.

Read artifact-css/SKILL.md first for the OUTPUT CONTRACT, design tokens, and class vocabulary. This skill uses no jQuery — diagrams are static.

When to reach for this skill