# Diagram Design

Create technical and product diagrams, architecture, flowchart, sequence, state...

- Repository: https://github.com/Unclecheng-li/AI_Animation (1689 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-10-26
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Unclecheng-li/AI_Animation --skill diagram-design -g -a claude-code -y`
Codex: `npx skills add Unclecheng-li/AI_Animation --skill diagram-design -g -a codex -y`
Cursor: `npx skills add Unclecheng-li/AI_Animation --skill diagram-design -g -a cursor -y`
Gemini CLI: `npx skills add Unclecheng-li/AI_Animation --skill diagram-design -g -a gemini-cli -y`

## Description

Create technical and product diagrams, architecture, flowchart, sequence, state machine, ER / data model, timeline, swimlane, quadrant, nested, tree, org chart, layer stack, venn, pyramid, as standalone HTML files with inline SVG. Ships with a neutral editorial skin and a first-run gate that prompts users to customize the style guide (colors, fonts) from their own website before generating. Includes annotation-callout primitive and optional sketchy variant.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Diagram Design

Create visual diagrams as self-contained HTML files with inline SVG and CSS, following an opinionated editorial design system.

Fourteen diagram types. One shared design system, complexity budget, and taste gate. Type-specific conventions live in `references/` and are loaded only when you pick a type.

---

## 0. First-time setup, style guide gate

**Before generating your first diagram in a new project, verify the style guide has been customized.**

Open [`references/style-guide.md`](references/style-guide.md) and check the default tokens. If they're still the shipped defaults (paper `#faf7f2`, ink `#1c1917`, accent `#b5523a` rust), **pause and ask the user**:

> *"This is your first Schematic in this project. The style guide is still at the default (neutral stone + rust). Do you want to customize it to match your brand first? Options: (a) run onboarding, I'll pull colors and fonts from your website, (b) paste your tokens manually, (c) proceed with the default for now."*

Then branch:
- **(a)** → follow [`references/onboarding.md`](references/onboarding.md) to fetch the site, extract palette + fonts, propose a diff, and write `style-guide.md`.
- **(b)** → accept the user's tokens and write them into `style-guide.md` under a new "Custom tokens" section.
- **(c)** → proceed; optionally remind the user they can run onboarding later.

**Once the style guide has been customized** (or the user explicitly opted for default), skip this gate on subsequent runs. A simple way to detect customization: if the `accent` value in `style-guide.md` differs from `#b5523a`, assume custom.

Don't silently ship default-skinned diagrams into a branded project, that's the failure mode this gate exists to prevent.

---

## 1. Philosophy

**The highest-quality move is usually deletion.**

From `.impeccable.md`: *"Confident restraint. Earn every element. One color accent, two families, a small spacing vocabulary. If removing it wouldn't hurt the page, remove it."*

The rest: https://github.com/Unclecheng-li/AI_Animation/blob/HEAD/skills/swiss-shot-demos/assets/chart-skills/diagram-design/SKILL.md