Diagram Visualization Skill

Design Principles

• Flat: No gradients, shadows, blur, glow, or decorative effects. Clean flat surfaces only.
• Compact: Show the essential inline. Explain the rest in response text.
• Theme-aware: Every color must work in both light and dark mode. Use CSS classes for SVG, window.__jawTokens for canvas/JS.
• Text in response, visuals in tool: All explanatory prose goes outside the diagram. Never put paragraphs of explanation inside the SVG or widget HTML.

Complexity Budget — Hard Limits

• Box subtitles: ≤5 words. Detail goes in sendPrompt() or prose — not the box.
• Colors: ≤2 ramps per diagram. More = visual noise.
• Horizontal row: ≤4 boxes at 680px width. 5+ boxes → shrink or wrap to 2 rows.
• Nodes: ≤6 per diagram. 7+ → split into overview + detail diagrams.
• Always add prose between diagrams — never output consecutive SVG blocks or widget blocks without text between them.

Diagram Type Selection