Ultimate Draw Framework

A Claude Code skill for creating drawing and diagramming applications with structured output. Covers vector drawing, shape creation, path manipulation, text rendering, and export to multiple formats (SVG, PNG, PDF) — optimized for creating technical diagrams, wireframes, and illustrations.

When to Use This Skill

Choose Ultimate Draw Framework when:

• You're building a diagramming or wireframing tool
• You need to generate SVG diagrams programmatically
• You want to create technical drawings with precise positioning
• You need vector graphics manipulation and export
• You're building a tool for creating flowcharts, org charts, or network diagrams

Consider alternatives when:

• You need freeform canvas painting (use a canvas module skill)
• You want 3D rendering (use a 3D workspace skill)
• You need existing diagram formats like C4 or UML (use a specific diagramming skill)

Quick Start

Copy
# Install the skill
claude install ultimate-draw-framework

# Create a flowchart programmatically
claude "Generate an SVG flowchart for a user authentication flow: login → validate → 2FA → success/failure"

# Build a wireframe tool
claude "Create a React-based wireframing tool with drag-and-drop shapes, connectors, and text labels"

# Export diagrams
claude "Add PDF export functionality to my SVG-based diagramming application"

Core Concepts

Drawing Primitives

Primitive	SVG Element	Use Case
Rectangle	<rect>	Boxes, containers, cards
Circle/Ellipse	<circle>, <ellipse>	Nodes, states, decorations
Line	<line>, <polyline>	Connections, dividers
Path	<path>	Complex shapes, curves, arrows
Text	<text>, <foreignObject>	Labels, descriptions
Group	<g>	Logical grouping, transformations
Image	<image>	Icons, embedded graphics

Diagram Layout Algorithms

Auto-Layout Options:
├── Force-Directed (d3-force)
│   → Best for: network graphs, mind maps
│   → Pros: organic look, good for exploration
│   → Cons: non-deterministic, can be slow
│
├── Hierarchical (dagre, ELK)
│   → Best for: flowcharts, org charts, dependency graphs
│   → Pros: clear direction, predictable
│   → Cons: less flexible for cyclic graphs
│
├── Grid-Based
│   → Best for: wireframes, dashboard layouts
│   → Pros: precise alignment, responsive
│   → Cons: rigid, doesn't suit all diagram types
│
└── Circular
    → Best for: relationship diagrams, wheel charts
    → Pros: equal emphasis on all nodes
    → Cons: poor for many connections

Connector/Edge Patterns

Pattern	When to Use	Implementation
Straight Line	Short connections	SVG <line>
Orthogonal	Flowcharts, architecture	Path with 90° turns
Curved	Organic diagrams, mind maps	Cubic bezier <path>
Stepped	UML sequence diagrams	Horizontal + vertical segments
Arrow Types	Directional relationships	Marker elements on path ends

Configuration

Parameter	Type	Default	Description
output_format	string	"svg"	Format: svg, png, pdf, canvas
layout_engine	string	"dagre"	Layout: dagre, elk, d3-force, manual
library	string	"svg"	Drawing library: svg (raw), d3, rough.js, fabric
interactive	boolean	true	Support drag, zoom, and pan
export_formats	string[]	["svg", "png"]	Available export formats

Best Practices

1. Use SVG for diagrams, Canvas for painting — SVG is resolution-independent, searchable, and individual elements are DOM-accessible for interaction. Use Canvas only when you need pixel-level manipulation or very high object counts (10,000+).

2. Implement smart connectors — Connectors should automatically route around obstacles and update when connected shapes move. Use waypoint-based orthogonal routing for clean flowcharts.

3. Separate data model from rendering — Store your diagram as a structured data model (nodes, edges, positions) and render from that model. This enables undo/redo, serialization, collaboration, and format-agnostic export.

4. Provide snap-to-grid and alignment guides — Users expect drawing tools to help them align elements. Implement snap-to-grid with toggleable grid display, and show alignment guides when dragging elements near other elements' edges.

5. Support keyboard shortcuts — Professional drawing tools require keyboard efficiency: Delete to remove, Cmd+Z for undo, Cmd+D for duplicate, arrow keys for nudge, Shift+click for multi-select. Implement these early.

Common Issues

SVG export is blurry at high resolution — SVG is vector and should be crisp at any resolution. If it's blurry, you may be rasterizing SVG to canvas before export. Export the SVG DOM directly as a string for vector output.

Auto-layout produces cluttered diagrams — Layout algorithms need tuning. Increase spacing between nodes, adjust edge routing to minimize crossings, and consider grouping related nodes in subgraphs for hierarchical layouts.

Large diagrams are slow to interact with — For diagrams with 500+ elements, implement viewport culling (only render visible elements), use requestAnimationFrame for smooth panning/zooming, and batch DOM updates.