A community-driven registry for Claude, Cursor, Windsurf, Cline & more. Not affiliated with Anthropic.
Are you the author? Sign in to claim
Claude Code skill: Turn any input into beautiful architecture diagrams — self-contained HTML with dark theme, animations
Turn any input into beautiful, production-ready diagrams on an infinite canvas. Self-contained HTML files with 5 themes, 8 topology layouts, pan & zoom navigation, professional typography, smooth animations, and zero dependencies.
Give it literally any file — or just a sentence — and it generates a polished diagram as a single .html file you can open directly in your browser. No accounts, no setup, no dependencies.
"Create a diagram of OAuth 2.0 flow" → diagram-oauth2-flow.html
"Visualize this docker-compose.yml" → diagram-docker-compose.html
"Diagram my Kubernetes networking" → diagram-k8s-networking.html
"Turn this business plan into a visual schema" → diagram-business-plan.html
The skill reads any file, auto-detects the format, extracts the relevant structure, and picks the best topology and layout. You don't need to reformat your input — just point it at a file and it figures out the rest.
Give it any file or topic — code, config, data, docs, PDFs, spreadsheets, notebooks, API specs, database schemas, CI/CD pipelines, or just a sentence describing what you want. The skill reads the content, auto-detects the format, extracts the relevant structure, and diagrams it. No reformatting needed.
| Layout | Best for | Examples |
|---|---|---|
| Nested | Hierarchical containment | Docker networking, K8s pods, VPCs, OSI model |
| Left-to-right | Sequential flows | OAuth flow, CI/CD pipeline, user journey |
| Hub-and-spoke | Central node + surrounding nodes | API gateway, microservices, load balancer |
| Timeline | Ordered vertical steps | Deploy pipeline, project roadmap, historical events |
| Grid / Matrix | Comparison tables, feature grids | Feature comparison, skill map, competitive landscape |
| Tree / Org Chart | Hierarchical branching | Org chart, file tree, decision tree, taxonomy |
| Funnel | Progressive narrowing | Sales funnel, conversion pipeline, data filtering |
| Comparison / VS | Side-by-side 2-3 options | Product vs product, tech choices, before/after |
| Theme | Best for |
|---|---|
| Dark (default) | Technical diagrams, dev docs, README screenshots |
| Light | Presentations, documentation sites, print-friendly |
| Corporate | Business plans, pitch decks, stakeholder presentations |
| Neon | Creative projects, gaming, social media screenshots |
| Minimal | Clean documentation, technical specs |
+ zoom in, - zoom out, 0 resetnpx skills add ferdinandobons/diagram-creator-skill
From inside a Claude Code session:
/plugin marketplace add ferdinandobons/diagram-creator-skill
/plugin install diagram-creator
git clone https://github.com/ferdinandobons/diagram-creator-skill.git
cp -r diagram-creator-skill/skills/diagram-creator ~/.claude/skills/
git submodule add https://github.com/ferdinandobons/diagram-creator-skill.git .claude/diagram-creator
npx skillkit install ferdinandobons/diagram-creator-skill
Once installed, just ask Claude naturally:
"Create a diagram of my microservices architecture"
"Visualize this docker-compose.yml"
"Turn this business plan into a schema"
"Diagram the OAuth 2.0 flow"
"Make a timeline of the deployment pipeline"
"Show me an org chart from this team spreadsheet"
"Create a sales funnel from this data"
Or pass a file directly:
"Diagram this file: /path/to/architecture.md"
"Visualize /path/to/docker-compose.yml"
"Turn /path/to/schema.prisma into a diagram"
diagram-creator-skill/
├── .claude-plugin/
│ └── marketplace.json # Marketplace manifest
├── .github/
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/ # Bug reports, topology requests
│ ├── PULL_REQUEST_TEMPLATE/ # New topology, skill update, docs
│ └── workflows/
│ └── validate-skill.yml # CI: validates skill structure
├── assets/
│ └── demo.png # Hero image
├── skills/
│ └── diagram-creator/
│ ├── SKILL.md # Core skill instructions
│ ├── references/
│ │ ├── typography-and-colors.md # Fonts, palette, background
│ │ ├── themes.md # 5 color themes
│ │ ├── topology-layouts.md # Layout rules for all 8 topologies
│ │ ├── components.md # Cards, badges, callouts, animations
│ │ ├── canvas.md # Infinite canvas with pan & zoom
│ │ └── safety-rules.md # Mandatory layout constraints
│ └── examples/
│ ├── oauth2-flow.md # Left-to-right example
│ ├── kubernetes-networking.md # Nested example
│ └── saas-microservices.md # Hub-and-spoke example
├── AGENTS.md # Guidelines for AI agents
├── CLAUDE.md # Claude Code project config
├── CONTRIBUTING.md # How to contribute
├── LICENSE # MIT
├── README.md
└── VERSIONS.md # Version tracking & changelog
Built by Ferdinando Bonsegna.
Contributions welcome! Found a way to improve the skill or want to add a new topology? Check out the Contributing Guide or open a PR.
git checkout -b feature/new-topology)references/topology-layouts.mdexamples/SKILL.mdSee CONTRIBUTING.md for full details.
1000+ skills curated from Anthropic, Vercel, Stripe, and other engineering teams
A Claude Code skill by Hao (駱君昊) that learns your Facebook voice and auto-posts to FB / IG / Threads / X with a 14-day c
Human + AI music production workflow for Suno - skills, templates, and tools
Claude Code skill for YouTube creators — channel audits, video SEO, retention scripts, thumbnails, content strategy, Sho