Diagram Drawing

Generate high-quality SVG and PNG technical diagrams from natural language, including architecture, flowchart, sequence, UML, mind maps, and AI agent systems.

Security Scan

The skill's files, instructions, and requested capabilities align with a diagram-generation utility — it uses local SVG generation and a small conversion script and does not request unrelated credentials or network access.

Purpose & Capability

Name and description (generate SVG/PNG diagrams) match the provided assets: an extensive SKILL.md describing SVG generation, style/icon references, and a local svg2png conversion script. There are no unrelated required binaries, env vars, or config paths.

Instruction Scope

Runtime instructions focus on classifying diagram types, building SVG content, loading local style/icon reference files included in the bundle, and converting SVG→PNG using a local script or rsvg-convert. The instructions do write files to disk (expected for an image generator) but do not instruct reading arbitrary system files, environment variables, or transmitting data to external endpoints.

Install Mechanism

No install spec; this is instruction-only plus a small included Python script. No downloads from external URLs or archive extraction are present. Conversion backends referenced (rsvg-convert, cairosvg, svglib) are standard and optional dependencies.

Credentials

The skill declares and uses no environment variables or credentials. The SKILL.md and included script do not reference secrets or unrelated services.

Persistence & Privilege

always is false, and the skill does not request persistent/global agent privileges or attempt to modify other skills or agent-wide configuration. It runs local generation/conversion only.

Assessment

This skill appears coherent for generating diagrams: it uses local templates and a small included converter script and does not request credentials or network endpoints. Before installing, review and be aware that: (1) the skill will create SVG/PNG files on disk — check any output paths used in examples (the SKILL.md shows '/path/to/output.svg' as a placeholder); (2) converting to PNG may require rsvg-convert or Python libraries (cairosvg, svglib, reportlab, Pillow) which you may need to install; (3) the source is 'unknown' — if you require stronger assurance, inspect scripts/svg2png.py and the reference files yourself or run the skill in an isolated environment; and (4) if you need to limit file writes, restrict the agent's filesystem permissions or run it in a sandbox. Overall there are no red flags suggesting credential access or data exfiltration.

Generate production-quality SVG+PNG technical diagrams from natural language descriptions.

Quick Start

1. Classify diagram type from user request
2. Extract layers, nodes, edges, flows
3. Plan layout (top→bottom for most, left→right for wide flows)
4. Generate SVG with semantic shapes and arrows
5. Export PNG at 1920px width

Diagram Types & Layout

Architecture

Nodes = services/components. Group into horizontal layers (top→bottom or left→right).

• Typical: Client → Gateway → Services → Data/Storage
• Dashed <rect> containers group related services
• ViewBox: 0 0 960 600 or 0 0 960 800

Data Flow

Label every arrow with data type ("embeddings", "query", "context"). Wider arrows for primary paths.

Flowchart / Process

Top-to-bottom preferred. Diamond = decision, rounded rect = process, parallelogram = I/O.

Agent Architecture

5 layers: Input → Agent Core (LLM) → Memory → Tools → Output

• Show iterative reasoning with loop arcs (curved arrows)
• Separate memory read/write paths visually

Memory Architecture (Mem0-style)

• Show memory write path and read path separately
• Tiers: Working → Short-term → Long-term → External Store
• Operations: store(), retrieve(), forget(), consolidate()

Sequence Diagram

• Vertical lifelines (dashed lines)
• Horizontal arrows = messages, top-to-bottom time order
• Activation boxes (thin filled rects on lifeline)
• ViewBox height = 80 + (num_messages × 50)

Comparison Matrix

• Column headers = systems, row headers = attributes
• Checked: #dcfce7 fill + ✓; unsupported: #f9fafb fill

Mind Map

• Central node at cx=480, cy=280
• Curved bezier branches, not straight lines
• First-level: 360/N degrees apart

UML Diagrams

• Class: 3-compartment rect (name / attributes / methods)
• Use Case: Ellipse + stick figure actors
• State Machine: Rounded rects + transitions with guards
• ER: Rect entities + diamond relationships + cardinality

Shape Vocabulary

Concept	Shape
User / Human	Circle head + body path
LLM / Model	Rounded rect, double border, ⚡
Agent	Hexagon or double-border rect
Memory (short-term)	Dashed-border rounded rect
Memory (long-term)	Solid cylinder
Vector Store	Cylinder with grid lines
Graph DB	3 overlapping circles
Tool / Function	Rect with ⚙ icon
API Gateway	Hexagon
Queue / Stream	Horizontal pipe/tube
Document	Folded-corner rect
Browser / UI	Rect with 3-dot titlebar
Decision	Diamond

Arrow Semantics

Flow Type	Color	Stroke	Dash
Primary data	#2563eb blue	2px solid	none
Control/trigger	#ea580c orange	1.5px solid	none
Memory read	#059669 green	1.5px solid	none
Memory write	#059669 green	1.5px	5,3
Async/event	#6b7280 gray	1.5px	4,2
Embedding	#7c3aed purple	1px solid	none
Feedback/loop	#7c3aed purple	1.5px curved	none

Always include a legend when 2+ arrow types are used.

Workflow (Always Follow)

1. Classify diagram type
2. Extract structure — layers, nodes, edges, flows
3. Plan layout
4. Load style reference from references/styles.md for exact colors
5. Map nodes to shapes
6. Check references/icons.md for known products
7. Generate SVG
8. Validate: run python3 scripts/svg2png.py <file.svg> or rsvg-convert
9. Export PNG at 1920px width
10. Report output paths

SVG Generation Strategy

Estimate complexity:

• Count nodes: N, arrows: A
• Estimated SVG lines: L = 50 (header) + N×15 + A×3 + 20 (legend)

Generation method:

• L < 150: Write tool directly (single call, most reliable)
• L ≥ 150: Python script via exec tool (avoids heredoc issues)

Python method (recommended for complex SVGs):

python3 << 'EOF'
svg_content = '''<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 600">
...complete SVG here...
</svg>'''

with open('/path/to/output.svg', 'w') as f:
    f.write(svg_content)
print("Generated output.svg")
EOF

SVG Technical Rules

• ViewBox: 0 0 960 600 default; 0 0 960 800 tall; 0 0 1200 600 wide
• Fonts: <style>font-family: system-ui, Helvetica, sans-serif</style> — no external @import
• <defs>: arrow markers, gradients, filters, clip paths
• Text: minimum 12px, prefer 13-14px labels
• All arrows: <marker> with markerEnd, sized markerWidth="10" markerHeight="7"
• Drop shadows: <feDropShadow> sparingly
• Curved paths: M x1,y1 C cx1,cy1 cx2,cy2 x2,y2 cubic bezier

Built-in Patterns

RAG Pipeline: Query → Embed → VectorSearch → Retrieve → LLM → Response Agentic RAG: Query → Embed → VectorSearch → Agent loop (Tool use) → LLM → Response Agentic Search: Query → Planner → [Search / Calculator / Code] → Synthesizer → Response Mem0 Memory: Input → Memory Manager → [Write: VectorDB + GraphDB] → [Read: Retrieve+Rank] → Context Multi-Agent: Orchestrator → [SubAgent A / B / C] → Aggregator → Output Tool Call Flow: LLM → Tool Selector → Tool Execution → Parser → LLM (loop)

Error Recovery

Problem	Fix
PNG blank/black	Remove @import url() — use system fonts only
rsvg-convert not found	Use python3 scripts/svg2png.py fallback
SVG cut off at bottom	Increase ViewBox height
Text overflowing	text-anchor="middle" + shorten label
Marker undefined	Ensure <marker id="..."> in <defs>
Arrow crossing nodes	Use orthogonal routing or bezier detour

Output

• Default: ./[derived-name].svg and ./[derived-name].png
• Custom: user specifies --output /path/

Styles

#	Name	Background	Best For
1	Flat Icon (default)	White	Blogs, docs, slides
2	Dark Terminal	#0f0f1a	GitHub, dev articles
3	Blueprint	#0a1628	Architecture docs
4	Notion Clean	White	Notion, wikis
5	Glassmorphism	#0d1117 gradient	Product sites, keynotes
6	Claude Official	#f8f6f3 warm cream	Anthropic-style diagrams
7	OpenAI Official	Pure white	OpenAI-style diagrams

Load references/styles.md for exact color tokens and patterns.