Agent skill · design visual · rookie-ricardo
anthropic-style-diagram
Draw architecture, flow and structural diagrams in the Anthropic/Claude visual language as SVG, then render and save them as PNG. Trigger ONLY when the user names that visual language — 'Anthropic 风格架构图', 'Claude 风格流程图', 'Anthropic style diagram', 'Claude style flowchart', 'Anthropic 配色的图' — or asks for another diagram in the same style after this skill has already produced one in the conversation. Also use to re-render or export an SVG that already uses this skill's class system (th/ts/box/arr/c-blue…). Do NOT use for a plain 画图/画流程图/draw a diagram request with no style named, for data charts, UI mockups, illustrations, TikZ or mermaid output, or database ERDs.
Why this skill is useful
Adds a specific rendering workflow and SVG generation process for diagrams in the Anthropic visual language that the AI wouldn't reliably generate on its own.
What it needs
Requires node installed locally. About 8k tokens when loaded. Last updated 2026-07-25. 929 stars on the source repository.
What this skill does
Anthropic Style Diagram Author a semantic SVG, let the browser do the rest. scripts/render.mjs supplies the design system, resolves the theme, audits the layout, crops the viewBox to the real ink bounds, bakes every computed style into literal attributes, and writes the PNG. You draw geometry and meaning. The script owns colour, theme, viewBox and export. Never hardcode a hex value, never write a <style> block, never compute the final viewBox height by hand. Workflow 1. Plan before drawing. Count the nodes and group them by kind — one colour ramp per kind, never one per row. Decide the diagram type (see below). If the user named 6+ components, split into an overview plus one diagram per sub-flow rather than cramming one canvas. 2. Write the SVG to a working path (scratchpad or /tmp), not the delivery path. Follow the authoring contract below; references/example-structural.svg and references/example-cycle.svg are the canonical shapes to imitate. 3. Render: node scripts/render.mjs <working.svg> -o <target.png>. 4. Clear the audit. Layout warnings print on stdout. Fix every one and re-render until the run is clean. A clean run only means nothing collides — that is the floor, not the bar. 5. Review the render yourself against the checklist below. Any failure sends you back to step 2. This step is not optional: the audit measures geometry, and almost everything that makes a diagram wrong lives outside geometry. 6. Report the saved path, and say what the review turned up. The review checklist Read the rendered image, not your source. The source is what you meant; the image is what the reader gets, and only one of those can be wrong. 1. Read it cold. Set aside what you set out to draw and say what the picture actually claims. If that differs from the request, the diagram is wrong — not the reader. 2. Trace every arrow. Each must start and end on the shape it means, and its direction must assert something true. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills rookie-ricardo/anthropic-style-diagram