ferdinandobons/diagram-creator-skill

11 stars · Last commit 2026-03-06

Claude Code skill: Turn any input into beautiful architecture diagrams — self-contained HTML with dark theme, animations, zero dependencies

README preview

# Diagram Creator — Claude Code Skill

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![Skill Version](https://img.shields.io/badge/version-1.0.0-blue.svg)](VERSIONS.md)
[![Topologies](https://img.shields.io/badge/topologies-8-green.svg)](#8-topology-layouts)
[![Themes](https://img.shields.io/badge/themes-5-purple.svg)](#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

View full repository on GitHub →