skills.rest
rookie-ricardo
rookie-ricardoCOMMUNITY
Explore all skills by this author →
GitHub

anthropic-style-diagram

Author semantic SVG diagrams in the Anthropic visual language and render them to audited PNG files.

934|86|Updated Jan 20, 2026
Search Tags:#playwright#svg#diagram#Flowchart#architecture diagram#png export#anthropic style
One-click install
npx skills add https://github.com/rookie-ricardo/erduo-skills --skill anthropic-style-diagram
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: anthropic-style-diagram
Source: https://github.com/rookie-ricardo/erduo-skills/tree/main/skills/anthropic-style-diagram
Command: npx skills add https://github.com/rookie-ricardo/erduo-skills --skill anthropic-style-diagram

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

Hand-drawing architecture and flow diagrams that look consistent is slow, and raw SVG output often has overlapping nodes, overflowing text, and crossed connectors that go unnoticed until the image is shared.

Core Features & Use Cases

  • Semantic SVG authoring: Draw with a small class system (th/ts/box/arr/c-blue...) while the renderer owns colour, theme, viewBox cropping, and style flattening.
  • Automated layout audit: The render script detects text spilling out of shapes, overlapping nodes (including ellipse-accurate checks for ring layouts), and connectors crossing unrelated nodes.
  • Theme-aware export: Render light, dark, or both themes at configurable pixel density, with optional transparent background and a portable flattened SVG.
  • Use Case: Ask for an Anthropic-style architecture diagram of your agent system; the skill writes the SVG, renders it via Playwright, fixes every layout warning, and reviews the final image against a composition checklist before delivering the PNG.

Quick Start

Draw an Anthropic style architecture diagram of my agent pipeline and export it as a PNG.

Frequently Asked Questions about anthropic-style-diagram

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render an Anthropic style SVG diagram to PNG?▼

Run node scripts/render.mjs diagram.svg -o output.png from the skill directory. The script injects the design system CSS, audits the layout, crops the viewBox to the ink bounds, and writes a PNG at 2x scale by default.

What diagram types can this skill draw?▼

It supports flowcharts for sequential processes, structural diagrams for containment and architecture, and illustrative diagrams for spatial metaphors. Database schemas and ERDs are out of scope and should use mermaid erDiagram instead.

Does the renderer support dark mode diagrams?▼

Yes. Pass --theme dark or --theme both to render.mjs. The design system remaps every colour ramp for dark mode, and the both option writes an additional <name>-dark.png from the same source SVG.

Why does render.mjs fail with a playwright not found error?▼

The renderer requires the Playwright npm package and a Chromium browser. Run npm install inside the skill directory, or install globally with npm install -g playwright followed by npx playwright install chromium.

What do layout warnings from the audit mean?▼

Warnings report three mechanical problems: text overflowing its shape, nodes overlapping, and connectors crossing unrelated nodes. Fix the SVG geometry and re-render until the run is clean, then still review the image for composition quality.

When should I not use this diagram skill?▼

Skip it for plain diagram requests with no style named, data charts, UI mockups, illustrations requiring TikZ or mermaid output, and database ERDs. It triggers only when the Anthropic or Claude visual language is explicitly requested.

Related Skills

Explore More Design & Creative Skills→
codatacodata
8

architect

Create Mermaid.js system architecture diagrams from descriptive texts.

Official
Advanced
openaiopenai
5.3k

reports-pdfs-and-slide-automation

Compose chart assets into reports, PDFs, PowerPoint decks, and Google Slides documents.

Official
Advanced
rjroyrjroy
6

ddp

Generate Mermaid diagrams for data flows, class relationships, and architectures.

Community
Basic
el-feoel-feo
12

mermaid-diagrams

Create Mermaid diagrams from text-based syntax for software designs and workflows.

Community
Basic