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
Decision gist · record as of 2026-07-25
Anthropic Style Diagram draws architecture and flow diagrams in Anthropic's visual language, exporting them as PNG. 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.
Use it when
- Yes.
- Anthropic Style Diagram handles architecture diagrams, flowcharts, and structural diagrams.
Verify before relying
Read SKILL.md below before installing (8 files). Open directory: indexed for reading, not audited.
Install
rookie-ricardo/erduo-skills/anthropic-style-diagram · repository language: JavaScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Draw architecture or flow diagrams using Anthropic/Claude visual language”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Concept Diagrams produces production-quality SVG visuals with a unified flat, minimal design system—ideal for physics setups, anatomy, floor plans, and process flows. Output renders as a single self-contained HTML file with automatic light and dark mode support in any modern browser, requiring no server or dependencies.
Generative UI equips Claude with the complete Anthropic design system for the `show_widget` tool, enabling inline rendering of interactive HTML/SVG widgets in claude.ai. Use it to build charts, dashboards, diagrams, flowcharts, and visual explainers without setup calls. The skill includes routing rules, component templates, CSS variables for light/dark mode, and Chart.js patterns to produce polished visuals that blend seamlessly with conversation.
Generate 27 types of technical and product diagrams—from architecture and flowcharts to data models and security matrices—as self-contained HTML files with embedded SVG. The skill enforces a shared design system with a first-run customization gate that extracts your brand colors and fonts from your website, ensuring diagrams match your visual identity without manual setup.
Fireworks Tech Graph turns descriptions of systems and engineering concepts into polished technical diagrams—architecture charts, data flows, sequence diagrams, C4 models, and more—then exports them as SVG, PNG, interactive HTML, or animated GIF. The skill validates geometry and syntax automatically, supports multiple diagram styles, and works offline.
Diagram Design generates architecture, flowchart, sequence, state machine, ER, timeline, swimlane, quadrant, nested, tree, layer stack, Venn, and pyramid diagrams as standalone HTML with embedded SVG. A first-run style guide gate prompts you to align colors and fonts with your brand before generating, then enforces an opinionated design system centered on restraint—one accent color, minimal nodes, and deletion over addition.
Baoyu Diagram generates standalone SVG diagrams with a dark design system and semantic color palette. It supports architecture diagrams, flowcharts, sequence diagrams, mind maps, timelines, and other technical visualizations, each with purpose-built layout rules and component patterns.
More skills moai-domain-svg-infographic (Apache-2.0) · Architecture Diagram (unlicensed) · transcript-polisher (MIT)