Generate editorial-style diagrams in the Anthropic blog visual style as SVG files. Use this skill whenever the user wants to create a diagram, flowchart, architecture diagram, comparison chart, or any visual that should look like Anthropic's blog article illustrations. Trigger on prompts like "draw a diagram", "create a flowchart", "visualize this process", "make an architecture diagram", "画流程图", "画架构图", "帮我画", or any request to turn text/process descriptions into a visual. This skill produces the calm, editorial, publication-quality look characteristic of Anthropic's technical blog.
설치
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
Generate editorial-style diagrams in the Anthropic blog visual style as SVG files. Use this skill whenever the user wants to create a diagram, flowchart, architecture diagram, comparison chart, or any visual that should look like Anthropic's blog article illustrations. Trigger on prompts like "draw a diagram", "create a flowchart", "visualize this process", "make an architecture diagram", "画流程图", "画架构图", "帮我画", or any request to turn text/process descriptions into a visual. This skill produces the calm, editorial, publication-quality look characteristic of Anthropic's technical blog.
Anthropic-SVG Diagram Skill
Generate SVG diagrams that match the editorial, warm, minimalist visual style of Anthropic's blog article illustrations.
Workflow
User text → DiagramSpec (written out as text) → Styled SVG → .svg file
Step 1: Analyze the Request
Determine:
Main claim: What is the one thing this diagram should make obvious?
Pattern: Which visual pattern best serves that claim? (See Step 2 and references/pattern-library.md)
Reading direction: left-to-right for workflows/comparisons; top-to-bottom for stacks/hierarchies
When uncertain about pattern, default rules:
Sequential steps → Linear Workflow
System components/containment → Grouped Architecture
Before/after or two approaches → Split Comparison
Overlap/shared ownership → Venn
Central coordination → Hub-and-Spoke
Step 2: Build the DiagramSpec
Before writing any SVG, write out the diagram plan explicitly as text — this helps catch structural mistakes before committing to coordinates. Output the DiagramSpec in this format:
**DiagramSpec**
main_claim: [one sentence — what is the diagram making obvious?]
pattern: [primary pattern]
secondary_pattern: [optional, or none]
reading_direction: [left-to-right / top-to-bottom]
title: "Diagram Title"
canvas_size: [estimated width x height]
nodes:
- id: n1
label: "Short label"
semantic_type: [primary | secondary | tertiary | start | end | warning | decision | ai_llm | inactive | error]
shape: [rect | pill | diamond]
position: [x, y]
size: [width, height]
group: [container_id if inside a container, else none]
connections:
- from: n1
to: n2
label: ""
style: [primary | optional | feedback | human | context | error]
exit_port: [right | bottom | top | left]
entry_port: [left | top | bottom | right]
route_shape: [straight | L-shape | Z-shape | U-shape]
waypoints: [list of x,y turning points]
offset: [0 | +12 | -12 | ...] # parallel offset if sharing corridor with another connector
groups:
- id: g1
label: "Panel title"
type: [outer_panel | inner_panel | soft_region]
bounds: [x, y, width, height]
children: [n1, n2, ...]
Writing this out is an internal planning step — clarify the structure in your own reasoning before committing to SVG. After writing the DiagramSpec, proceed immediately to Step 3 without waiting for user confirmation. Read references/pattern-library.md for layout rules per pattern type.
Language consistency: Write the DiagramSpec — and all node labels, titles, and edge labels in the final SVG — in the same language the user used. If the user wrote in Chinese, the diagram text should be Chinese too.
Step 3: Generate SVG
SVG document structure
<svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 {width} {height}"width="{width}"height="{height}"><defs><!-- Arrow markers go here --></defs><!-- Background --><!-- Outer border --><!-- Title --><!-- Groups/Panels (render before nodes so they sit behind) --><!-- Nodes --><!-- Connectors (render last so they sit on top) --></svg>
Set both viewBox="0 0 {width} {height}" and matching width="{width}" height="{height}" attributes. The width/height give the SVG an intrinsic default size so it renders at design size in IDE/Markdown previews instead of stretching to fill the container, while the viewBox keeps it scalable when embedded with CSS sizing. Typical canvas sizes:
Simple diagrams (3-6 nodes): 0 0 1000 600
Medium diagrams (7-12 nodes): 0 0 1200 800
Complex diagrams (13-20 nodes): 0 0 1400 1000
Adjust as needed based on actual content.
Arrow marker definitions
The single most important style rule: all arrows use open chevron arrowheads. This is the signature visual element.
Define one marker per connector color in <defs>. Each marker uses a <polyline> to draw an open V shape:
Use dy attribute for line spacing (typically 18-22px for font-size 16)
When using multi-line text, increase the node height accordingly
Container / panel styles
Containers are <g> groups with a background <rect> and a title <text>. Render containers before their children so the background sits behind.
Outer panel (large system boundary):
<g><rectx="80"y="120"width="480"height="500"rx="16"fill="#FAF8F4"stroke="#8C867F"stroke-width="2"/><textx="100"y="150"font-size="20"font-weight="600"fill="#5F5A54">Panel Title</text><!-- Children go here --></g>
This is the most common quality issue in generated diagrams. Read references/connector-routing.md for the full routing rules with examples and SVG <path> templates. The four mandatory rules are:
Port selection: Each node has 4 ports (top/right/bottom/left). No two connectors may use the same port on the same node. Distribute connectors across different edges.
Parallel offset: When connectors share a corridor, offset each subsequent line by 12px (pattern: 0, +12, -12, +24...).
Crossover bridge: Unavoidable crossings get an 8px-radius arc bump (A 8 8 0 0 1).
Perpendicular entry/exit: Every connector must leave and enter nodes perpendicular to the edge, with a >= 20px straight stub before the first turn and after the last turn.
Routing process: Route the main flow path first, then secondary connectors. For each connector: assign ports (Rule 1) → choose shape (straight/L/Z/S/U) → check for corridor conflicts (Rule 2) → add bridges at crossings (Rule 3) → verify perpendicularity (Rule 4).
Five connector shapes are available — straight, L-shape (1 turn), Z-shape (2 turns), S-shape (3 turns, for cross-axis port combinations), and U-shape (feedback loops). See references/connector-routing.md for SVG <path> templates for each.
Step 4: Layout rules
These rules keep diagrams feeling calm and well-composed:
Node spacing: minimum 80px horizontal gap between adjacent nodes; 60px vertical gap
Recommended horizontal pitch: 200px center-to-center for workflow steps
Recommended vertical pitch: 120px center-to-center for parallel elements
Canvas padding: 60px around the outermost content (inside the outer border)
Grid alignment: snap all positions to multiples of 10
Node size: standard nodes 140x60 to 180x70; wide containers 300-600+
Keep layout flat: max 3 nesting levels; prefer whitespace over extra containers
For pattern-specific layout rules, read references/pattern-library.md.
Step 5: Write and open
Write the complete SVG to a descriptive .svg file in the current working directory.
Filename: lowercase with hyphens, e.g., agent-loop.svg, context-engineering.svg
Open the file: open <filename>.svg (macOS) or start <filename>.svg (Windows) or xdg-open <filename>.svg (Linux)
Quality checklist
Before finalizing the SVG, verify:
SVG root has xmlns="http://www.w3.org/2000/svg", viewBox, and matching width/height attributes (intrinsic default size)
<defs> section contains all needed arrow markers with open chevron <polyline>
Title is large (font-size >= 28), bold, dark (#1F1F1C), horizontally centered
Every arrow uses marker-end="url(#arrow-{type})" — never filled arrowheads
No two connectors share the same path segment — parallel connectors are offset by 12px
No two connectors use the same port on any node — ports are distributed across top/right/bottom/left
Crossings have bridge arcs — unavoidable crossings use A 8 8 0 0 1 arc bumps
Connectors are perpendicular to node edges — every connector's first segment exits perpendicular to the port edge with >= 20px stub, and last segment enters perpendicular with >= 20px approach
Node colors follow semantic meaning, not decoration
Main flow path is visually dominant within 3 seconds
No more than 4 semantic accent colors in one diagram
All coordinates are multiples of 10
Text labels are short; multi-line text uses <tspan> with dy spacing
Containers render before their children (background behind content)
Connectors render last (on top of everything)
SVG is well-formed XML — all tags closed, special characters escaped (&<>)
No style or class attributes that depend on external CSS — all styling is inline
Reference files
references/color-palette.md — Full semantic color rules, text hierarchy, container specs, background values, geometry tokens. Read when you need to choose colors or verify a semantic mapping.
references/pattern-library.md — 10 diagram patterns with layout rules, anti-patterns, and combination rules. Read when the pattern choice is ambiguous or the layout needs fine-tuning.
references/connector-routing.md — Detailed connector routing rules (port selection, parallel offset, crossover bridge, perpendicular entry/exit) with SVG <path> templates. Read this file before drawing any connectors.
