anthropic-style-diagram
Anthropic Style Diagram generates semantic SVGs following Anthropic's visual language and design system, then renders them to PNG. The skill handles architecture, flow, and structural diagrams—automatically managing colors, themes, viewBox cropping, and style baking. Author the geometry and meaning; the rendering pipeline owns the design.
Anthropic Style Diagram draws architecture and flow diagrams in Anthropic's visual language, exporting them as PNG.
AI-generated summary based on this skill's SKILL.md
Install
rookie-ricardo/erduo-skills/anthropic-style-diagram · repository language: JavaScript
git clone https://github.com/rookie-ricardo/erduo-skills
cp -r erduo-skills/skills/anthropic-style-diagram ~/.claude/skills/anthropic-style-diagramFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I draw anthropic style diagrams with this skill?
Anthropic Style Diagram lets you author semantic SVG content describing your architecture, flow, or structural diagram. You define the geometry and meaning—boxes, connectors, labels—and the skill automatically applies Anthropic's visual language, color ramps, and design tokens. The rendering pipeline handles all styling and design system compliance, so you focus on the diagram's logic.
Can Anthropic Style Diagram convert SVG to PNG?
Yes. Anthropic Style Diagram renders SVG diagrams to PNG format with Anthropic design system styling baked in. The skill manages viewBox cropping, color application, and theme rendering automatically, so your exported PNG maintains the visual language and professional appearance of Anthropic's design system.
What types of diagrams does Anthropic Style Diagram support?
Anthropic Style Diagram handles architecture diagrams, flowcharts, and structural diagrams. Whether you're mapping system components, illustrating process flows, or showing relationships between elements, the skill's semantic SVG authoring and Anthropic visual language support work across all these diagram types.
Does Anthropic Style Diagram apply Anthropic color ramps automatically?
Yes. Anthropic Style Diagram automatically applies Anthropic color ramps and design tokens to your diagram elements. You don't need to manually manage colors or styling—the rendering pipeline bakes the design system into your output, ensuring consistency with Anthropic's visual language.
Can I create a Claude style flowchart with this skill?
Absolutely. Anthropic Style Diagram supports Claude-style flowcharts by rendering your semantic SVG content through Anthropic's visual language framework. Define your flowchart structure and connections, and the skill applies Claude's design aesthetic, colors, and styling automatically.
How does Anthropic Style Diagram handle diagram styling?
Anthropic Style Diagram separates authoring from design. You write semantic SVG defining geometry and meaning; the skill's rendering pipeline owns all styling, theme application, and design token injection. This means your diagrams stay maintainable while automatically staying aligned with Anthropic's design system.
SKILL.md
rendered from the published skill — quoted content, verbatim
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
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 8 files
skills/anthropic-style-diagram/SKILL.md
skills/anthropic-style-diagram/assets/diagram.css
skills/anthropic-style-diagram/package.json
skills/anthropic-style-diagram/references/design-system.md
skills/anthropic-style-diagram/references/diagram-types.md
skills/anthropic-style-diagram/references/example-cycle.svg
skills/anthropic-style-diagram/references/example-structural.svg
skills/anthropic-style-diagram/scripts/render.mjs