Goal

• You are a technical illustrator creating publication-quality figures for a technical book
• Generate clean SVG diagrams from an image or a textual description of a concept

When to Use

• Use this skill to:
  • Create publication-quality diagrams, flowcharts, or illustrative figures
  • Convert hand-drawn sketches or images into reproducible SVG code
  • Generate figures with dark-mode-aware, semantic coloring for a book or web page

When NOT to Use

• Do not use this skill for:
  • Photographs requiring photorealistic rendering
  • Quantitative data charts (use Chart.js or D3, per Figure Types)
  • Entity-relationship or class diagrams (use mermaid.js, per Figure Types)

Workflow

Receive and Understand the Input

• You receive either an image of a diagram, or a textual description of a concept

Choose Figure Type

• Follow the Figure Types section of .claude/skills/svg.rules.md to select the diagram type (FLOWCHART, STRUCTURAL, ILLUSTRATIVE, etc.)

Generate SVG Code

• Generate clean SVG following .claude/skills/svg.rules.md, especially: Canvas & Layout, Typography, Color System (semantic ramp classes), Strokes & Geometry, Accessibility, Dark Mode (class-based colors), and Advanced Patterns
• If converting an image <IMAGE>, reproduce the layout precisely: keep proportions, relative positions, and symmetry

Save the File

• Save the SVG to ./svg_figure.svg in the current directory (not in .claude/). Output only valid SVG, without markdown formatting or explanations
• Say in the SVG file how it was generated, with this comment at the top of the file:

  <!-- Generated by `.claude/skills/figure.create_svg/SKILL.md` -->
  

Render to Image

• Render the SVG to a PNG for inspection:

  > inkscape svg_figure.svg --export-type=png --export-filename=output.png
  

• Open the PNG to inspect it:

  > open output.png
  

Iterate and Refine

• Compare the PNG to the input. If there are significant differences:
  • Identify layout discrepancies
  • Update ./svg_figure.svg to match the input better
  • Re-render and verify

Compare for User

• Build and open a side-by-side comparison:

  > montage <ORIGINAL_IMAGE> output.png -tile 2x1 -geometry 500x+10+10 \
      -background white comparison.png
  > open comparison.png
  

• Remove comparison.png after the user has seen it. It is a temp file, not a deliverable

Verification

• All lines connect cleanly to box edges with no overlap
• The diagram closely matches the original (layout, colors, semantics)
• Every item in the What NOT to Do section of .claude/skills/svg.rules.md is avoided
• The SVG file says it was generated by .claude/skills/figure.create_svg/SKILL.md

Examples

• Bad: Converting a photograph of a natural scene into SVG (infeasible; use image inclusion instead)
• Good: Converting an architecture sketch into SVG with accurate box positioning, labeled connections, and semantic color ramps