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.
