# Diagram Creator โ Claude Code Skill
[](https://opensource.org/licenses/MIT)
[](VERSIONS.md)
[](#8-topology-layouts)
[](#5-themes)
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.
<p align="center">
<img src="assets/demo.png" alt="Diagram Creator โ SaaS Microservices Architecture example" width="100%">
</p>
## What It Does
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.
## Supported Inputs
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.
## 8 Topology Layouts
| 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 |
## 5 Themes
| 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 |
## Output Features
- **Infinite canvas** โ pan (click+drag) and zoom (scroll wheel) like Miro/draw.io
- Professional typography (Syne + JetBrains Mono)
- Animated connections and entrance effects
- Fully responsive (works down to 360px)
- Single HTML file, zero external dependencies
- Color-coded layers with auto-generated legends
- Hover effects on all interactive elements
- Keyboard shortcuts: `+` zoom in, `-` zoom out, `0` reset
## Installation
### Option 1: CLI Install (Recommended)
```bash
npx skills add ferdinandobons/diagram-creator-skill
```
### Option 2: Claude Code Plugin
From inside a Claude Code session:
```
/plugin marketplace add ferdinandobons/diagram-creator-skill
/plugin install diagram-creator
```
### Option 3: Clone and Copy
```bash
git clone https://github.com/ferdinandobons/diagram-creator-skill.git
cp -r diagram-creator-skill/skills/diagram-creator ~/.claude/skills/
```
### Option 4: Git Submodule
```bash
git submodule add https://github.com/ferdinandobons/diagram-creator-skill.git .claude/diagram-creator
```
### Option 5: SkillKit (Multi-Agent)
```bash
npx skillkit install ferdinandobons/diagram-creator-skill
```
## Usage
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"
```
## Skill Structure
```
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
```
## Contributing
Built by [Ferdinando Bonsegna](https://github.com/ferdinandobons).
**Contributions welcome!** Found a way to improve the skill or want to add a new topology? Check out the [Contributing Guide](CONTRIBUTING.md) or [open a PR](https://github.com/ferdinandobons/diagram-creator-skill/pulls).
1. Fork this repository
2. Create a feature branch (`git checkout -b feature/new-topology`)
3. Make your changes
4. Submit a Pull Request using the [appropriate template](.github/PULL_REQUEST_TEMPLATE/)
### Adding a new topology
1. Add layout rules in `references/topology-layouts.md`
2. Add an example in `examples/`
3. Update the topology table in `SKILL.md`
4. Test with at least 3 different inputs
See [CONTRIBUTING.md](CONTRIBUTING.md) for full details.
## License
[MIT](LICENSE)