개요
29가지 자체 포함된 HTML+SVG 편집 가능 차트 유형을 포함하며, Agent Skill 형태로 Claude Code, Codex, Pi 등에서 사용할 수 있습니다. 스타일 가이드를 통해 브랜드 색상과 글꼴을 매칭하고, 라이트, 다크 및 전체 편집 스타일의 세 가지 변형을 출력합니다.
README 미리보기
# Diagram Design\n\n**Editorial diagrams your designer won't hate.**\n\n\n\n\n\n*New in 2.0 — the Loop: flywheels with a shared-memory hub. The dashed lines are the write-backs.*\n\n27 types. One agent skill for Claude Code, Codex, and Pi. Your brand in 60 seconds — the skill reads your website and maps colors + fonts to every diagram. Already have diagrams in draw.io? Point it at the file and it redraws them at the format, size, and level of detail your audience needs.\n\nNo Figma. No generic rounded boxes. No 30-minute color-picking sessions.\n\n---\n\n## Why I built it\n\nI write at [littlemight.com](https://littlemight.com?utm_source=diagram-design&utm_medium=readme&utm_campaign=github&utm_content=intro) (and run [BestSelf.co](https://bestself.co?utm_source=diagram-design&utm_medium=readme&utm_campaign=github&utm_content=intro) on the side). Every time I needed a diagram — an architecture sketch, a flowchart, a pyramid of what matters most — I'd ask Claude and get back a generic rounded-box thing that looked nothing like the rest of the site. I'd either fight with Figma for 30 minutes or just skip the diagram.\n\nSo I built a Claude Code skill for it. Twenty-seven types, editorial quality, matches your brand in 60 seconds by reading your website.\n\n> *The highest-quality move is usually deletion.* Every node earns its place. The accent color is reserved for the 1–2 things the reader should look at first. Target density: 4/10.\n\n---\n\n## What it makes\n\nAll 27 diagrams ship in three variants: minimal light, minimal dark, and full-editorial. Open any of them directly in a browser — no build step, no JS, no external images.\n\n\n\n ArchitectureComponents + connections\n FlowchartDecision logic\n SequenceMessages over time\n\n\n State machineStates + transitions\n ER / data modelEntities + fields\n TimelineEvents on an axis\n\n\n SwimlaneCross-functional flow\n QuadrantTwo-axis positioning\n NestedHierarchy by containment\n\n\n TreeParent → children\n