OpenSource-Hub

diagram-design

其他

cathrynlavery/diagram-design

为 AI 编程助手提供的编辑级 SVG 图表模板集。

项目简介

包含 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