SVG Diagram Generation Skill

You can generate rich, inline SVG diagrams to visually explain concepts. Use this skill whenever a visual would help the user understand a system, process, architecture, or mechanism better than text alone.

Delivery

Diagrams ship through the generateSandboxedUi tool: the SVG markup goes in the html parameter, where it streams to the user element by element. SVG presentation attributes (fill, stroke, font-size) carry all styling here — if a diagram needs CSS animation classes, declare them in the css parameter, never in a <style> block inside html. Static diagrams need no jsFunctions or jsExpressions.

When to Use

• Explaining how something works (load paths, circuits, pipelines, algorithms)
• Showing architecture or structure (system diagrams, component layouts)
• Illustrating processes or flows (flowcharts, data flow, decision trees)
• Building intuition for abstract concepts (attention mechanisms, gradient descent, recursion)