[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-662":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":9,"rankLanguage":9,"license":9,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":9,"pushedAt":9,"updatedAt":25,"readmeContent":26,"aiSummary":27,"trendingCount":15,"starSnapshotCount":15,"syncStatus":28,"lastSyncTime":29,"discoverSource":30},662,"diagram-design","cathrynlavery\u002Fdiagram-design","cathrynlavery","Thirteen editorial diagram types for Claude Code. Self-contained HTML + SVG. No shadows, no Mermaid-slop.",null,"HTML",2558,188,6,1,0,26,57,243,78,28.83,false,"main",true,[],"2026-06-12 02:00:16","# Diagram Design\n\n**Editorial diagrams your designer won't hate.**\n\n![Content site architecture](docs\u002Fscreenshots\u002Farchitecture.png)\n\n14 types. One Claude Code skill. Your brand in 60 seconds — the skill reads your website and maps colors + fonts to every diagram.\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:\u002F\u002Flittlemight.com?utm_source=diagram-design&utm_medium=readme&utm_campaign=github&utm_content=intro) (and run [BestSelf.co](https:\u002F\u002Fbestself.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. Fourteen 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\u002F10.\n\n---\n\n## What it makes\n\nAll 14 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\u003Ctable>\n\u003Ctr>\n  \u003Ctd align=\"center\" width=\"33%\">\u003Cimg src=\"docs\u002Fscreenshots\u002Farchitecture.png\" alt=\"Architecture\">\u003Cbr>\u003Cb>Architecture\u003C\u002Fb>\u003Cbr>\u003Csub>Components + connections\u003C\u002Fsub>\u003C\u002Ftd>\n  \u003Ctd align=\"center\" width=\"33%\">\u003Cimg src=\"docs\u002Fscreenshots\u002Fflowchart.png\" alt=\"Flowchart\">\u003Cbr>\u003Cb>Flowchart\u003C\u002Fb>\u003Cbr>\u003Csub>Decision logic\u003C\u002Fsub>\u003C\u002Ftd>\n  \u003Ctd align=\"center\" width=\"33%\">\u003Cimg src=\"docs\u002Fscreenshots\u002Fsequence.png\" alt=\"Sequence\">\u003Cbr>\u003Cb>Sequence\u003C\u002Fb>\u003Cbr>\u003Csub>Messages over time\u003C\u002Fsub>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n  \u003Ctd align=\"center\">\u003Cimg src=\"docs\u002Fscreenshots\u002Fstate.png\" alt=\"State machine\">\u003Cbr>\u003Cb>State machine\u003C\u002Fb>\u003Cbr>\u003Csub>States + transitions\u003C\u002Fsub>\u003C\u002Ftd>\n  \u003Ctd align=\"center\">\u003Cimg src=\"docs\u002Fscreenshots\u002Fer.png\" alt=\"ER \u002F data model\">\u003Cbr>\u003Cb>ER \u002F data model\u003C\u002Fb>\u003Cbr>\u003Csub>Entities + fields\u003C\u002Fsub>\u003C\u002Ftd>\n  \u003Ctd align=\"center\">\u003Cimg src=\"docs\u002Fscreenshots\u002Ftimeline.png\" alt=\"Timeline\">\u003Cbr>\u003Cb>Timeline\u003C\u002Fb>\u003Cbr>\u003Csub>Events on an axis\u003C\u002Fsub>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n  \u003Ctd align=\"center\">\u003Cimg src=\"docs\u002Fscreenshots\u002Fswimlane.png\" alt=\"Swimlane\">\u003Cbr>\u003Cb>Swimlane\u003C\u002Fb>\u003Cbr>\u003Csub>Cross-functional flow\u003C\u002Fsub>\u003C\u002Ftd>\n  \u003Ctd align=\"center\">\u003Cimg src=\"docs\u002Fscreenshots\u002Fquadrant.png\" alt=\"Quadrant\">\u003Cbr>\u003Cb>Quadrant\u003C\u002Fb>\u003Cbr>\u003Csub>Two-axis positioning\u003C\u002Fsub>\u003C\u002Ftd>\n  \u003Ctd align=\"center\">\u003Cimg src=\"docs\u002Fscreenshots\u002Fnested.png\" alt=\"Nested\">\u003Cbr>\u003Cb>Nested\u003C\u002Fb>\u003Cbr>\u003Csub>Hierarchy by containment\u003C\u002Fsub>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n  \u003Ctd align=\"center\">\u003Cimg src=\"docs\u002Fscreenshots\u002Ftree.png\" alt=\"Tree\">\u003Cbr>\u003Cb>Tree\u003C\u002Fb>\u003Cbr>\u003Csub>Parent → children\u003C\u002Fsub>\u003C\u002Ftd>\n  \u003Ctd align=\"center\">\u003Cimg src=\"docs\u002Fscreenshots\u002Flayers.png\" alt=\"Layers\">\u003Cbr>\u003Cb>Layer stack\u003C\u002Fb>\u003Cbr>\u003Csub>Stacked abstractions\u003C\u002Fsub>\u003C\u002Ftd>\n  \u003Ctd align=\"center\">\u003Cimg src=\"docs\u002Fscreenshots\u002Fvenn.png\" alt=\"Venn\">\u003Cbr>\u003Cb>Venn\u003C\u002Fb>\u003Cbr>\u003Csub>Set overlap\u003C\u002Fsub>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n  \u003Ctd align=\"center\">\u003Cimg src=\"docs\u002Fscreenshots\u002Fpyramid.png\" alt=\"Pyramid\">\u003Cbr>\u003Cb>Pyramid \u002F funnel\u003C\u002Fb>\u003Cbr>\u003Csub>Ranked hierarchy or drop-off\u003C\u002Fsub>\u003C\u002Ftd>\n  \u003Ctd align=\"center\">\u003Cimg src=\"docs\u002Fscreenshots\u002Fquadrant-consultant.png\" alt=\"Consultant 2×2\">\u003Cbr>\u003Cb>Consultant 2×2\u003C\u002Fb>\u003Cbr>\u003Csub>Scenario matrix · named cells\u003C\u002Fsub>\u003C\u002Ftd>\n  \u003Ctd align=\"center\"> \u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\n\n**Browse the live gallery:** open [`skills\u002Fdiagram-design\u002Fassets\u002Findex.html`](skills\u002Fdiagram-design\u002Fassets\u002Findex.html) in your browser to flip through all 14 diagrams with light \u002F dark \u002F full-editorial tabs.\n\n---\n\n## Install\n\n```bash\n# Clone the repo somewhere, then symlink the inner skill into Claude Code's skills dir\ngit clone git@github.com:cathrynlavery\u002Fdiagram-design.git ~\u002Fcode\u002Fdiagram-design\nln -s ~\u002Fcode\u002Fdiagram-design\u002Fskills\u002Fdiagram-design ~\u002F.claude\u002Fskills\u002Fdiagram-design\n```\n\nThe real skill lives at `skills\u002Fdiagram-design\u002F` inside the repo (so the same tree works as a Claude Code plugin, a Codex plugin, and a standalone skill). The symlink points Claude Code at that inner directory.\n\nRestart Claude Code. The skill registers as `diagram-design` and activates whenever you ask Claude to make a diagram.\n\n### Alternative: install as a plugin\n\nQuicker to install — but the skill lives in the plugin cache, so edits to `references\u002Fstyle-guide.md` don't survive plugin updates. Pick this if you just want to try it out; use the clone route above if you plan to customize the style guide by hand.\n\n**Claude Code:**\n```\n\u002Fplugin marketplace add cathrynlavery\u002Fdiagram-design\n\u002Fplugin install diagram-design@diagram-design\n```\n\n**Claude Cowork:** Customize → Directory → Plugins → **+** → paste `cathrynlavery\u002Fdiagram-design` → Sync, then install from the Personal list.\n\n**Codex:**\n```\n\u002Fplugin marketplace add cathrynlavery\u002Fdiagram-design\n\u002Fplugin install diagram-design@diagram-design\n```\n\n---\n\n## Onboarding — make it look like *your* brand\n\nThe whole point: ship editorial-quality diagrams in **your** colors and typography, not a generic template.\n\nOut of the box, diagrams render in a clean **jet-black + atomic-tangerine** palette (white-smoke paper, jet-black ink, atomic-tangerine accent, blue-slate muted, silver hairlines). Good enough to screenshot straight away. But 60 seconds of onboarding is better — the skill will pull your brand from your website and apply it across every diagram.\n\n### The flow\n\n```\nYou:     \"onboard diagram-design to https:\u002F\u002Fyoursite.com\"\nClaude:  → fetches the homepage\n         → extracts the dominant palette + font stack\n         → maps detected values to semantic roles:\n             paper, ink, muted, accent, link\n         → shows a proposed diff\n         → writes your tokens to references\u002Fstyle-guide.md\nYou:     \"yes, apply it\"\n```\n\nEvery new diagram now uses your colors. Your website's paper color becomes the diagram background. Your CTA color becomes the focal accent. Your body font stack becomes the node label family.\n\n### What gets extracted\n\n| Detected from your site | Becomes |\n|---|---|\n| `\u003Cbody>` background | `paper` token |\n| Primary text color | `ink` token |\n| Secondary \u002F caption text | `muted` token |\n| Cards or containers | `paper-2` token |\n| Most-used brand color (CTA, link, heading) | `accent` token |\n| `\u003Ch1>` font family | `title` font |\n| `\u003Cbody>` font family | `node-name` font |\n| `\u003Ccode>` \u002F `\u003Cpre>` font | `sublabel` font |\n\n### Contrast checks happen automatically\n\nBefore writing tokens, the skill verifies WCAG AA contrast on `ink` over `paper`. If your site has a color that fails contrast at diagram sizes (9–12px), it proposes an adjusted value and explains why.\n\n### Manual override\n\nPrefer to set tokens by hand? Open [`skills\u002Fdiagram-design\u002Freferences\u002Fstyle-guide.md`](skills\u002Fdiagram-design\u002Freferences\u002Fstyle-guide.md) and edit the table. Everything downstream reads from there — all 14 diagrams, the annotation primitive, and the gallery all inherit semantic role names (`accent`, not `#eb6c36`).\n\n### First-run gate\n\nThe skill won't silently ship default-skinned diagrams into a branded project. On first use in a new project, it checks if `style-guide.md` has been customized. If not, it pauses and asks:\n\n> *\"This is your first diagram in this project. The style guide is still at the default. Want to run onboarding, paste tokens manually, or proceed with default?\"*\n\nSee [`skills\u002Fdiagram-design\u002Freferences\u002Fonboarding.md`](skills\u002Fdiagram-design\u002Freferences\u002Fonboarding.md) for the full spec.\n\n---\n\n## Quickstart\n\n```bash\n# Open the gallery to see all 14 diagrams\nopen ~\u002F.claude\u002Fskills\u002Fdiagram-design\u002Fassets\u002Findex.html\n\n# In Claude Code, just ask:\n# \"Make me an architecture diagram of my app: frontend, backend, database, Redis cache.\"\n# \"I need a quadrant showing Q2 projects by impact vs effort.\"\n# \"Give me a sequence diagram of the OAuth handshake.\"\n```\n\nClaude will pick the right type, build the HTML, and save it. You can also start from a template directly:\n\n```bash\ncp assets\u002Ftemplate.html my-diagram.html        # minimal light\ncp assets\u002Ftemplate-full.html my-diagram.html   # editorial with summary cards\n```\n\n---\n\n## Architecture\n\nProgressive disclosure. `SKILL.md` is a lean index — it tells Claude how to pick a type and where to look for detail. Every type lives in its own reference file, loaded only when relevant.\n\n```\ndiagram-design\u002F\n├── SKILL.md                         — top-level: philosophy, selection guide, checklist\n├── references\u002F                      — loaded only when a type or primitive is chosen\n│   ├── style-guide.md               — single source of truth for colors + fonts\n│   ├── onboarding.md                — the URL-to-tokens flow\n│   ├── type-architecture.md\n│   ├── type-flowchart.md\n│   ├── type-sequence.md\n│   ├── type-state.md\n│   ├── type-er.md\n│   ├── type-timeline.md\n│   ├── type-swimlane.md\n│   ├── type-quadrant.md\n│   ├── type-nested.md\n│   ├── type-tree.md\n│   ├── type-layers.md\n│   ├── type-venn.md\n│   ├── type-pyramid.md\n│   ├── primitive-annotation.md      — italic-serif editorial callouts\n│   └── primitive-sketchy.md         — hand-drawn SVG filter variant\n├── assets\u002F\n│   ├── index.html                   — live gallery, tabbed\n│   ├── template*.html               — scaffolds for new diagrams\n│   ├── example-\u003Ctype>.html          — 3 variants × 13 types\n│   └── example-quadrant-consultant.html  — consultant-special 2×2 scenario matrix\n└── docs\u002Fscreenshots\u002F                — the images in this README\n```\n\nThis keeps Claude's working context tight (only load what you need) and makes the skill easy to extend — drop a new `type-\u003Cname>.md` and wire it into the selection guide.\n\n### What loads when\n\nThe top-level `SKILL.md` is always in context. Everything else is pulled in only when relevant — this is what keeps the skill fast even with 15 reference files.\n\n| You ask for… | Claude loads |\n|---|---|\n| \"Make me a flowchart\" | `SKILL.md` + `references\u002Ftype-flowchart.md` |\n| \"Build an architecture diagram\" | `SKILL.md` + `references\u002Ftype-architecture.md` |\n| \"Onboard this skill to my site\" | `SKILL.md` + `references\u002Fonboarding.md` + `references\u002Fstyle-guide.md` |\n| \"Add an editorial callout to this diagram\" | `SKILL.md` + `references\u002Fprimitive-annotation.md` |\n| \"Give me a hand-drawn version\" | `SKILL.md` + `references\u002Fprimitive-sketchy.md` |\n| Routine diagram-making (any of the 14 diagrams) | Only `SKILL.md` + that one type's reference |\n\nNo matter how many types exist, Claude only reads the one you need. Add a new type tomorrow and nothing else changes.\n\n---\n\n## The design system (in one paragraph)\n\nOne accent color, 1–2 focal elements per diagram. Three font families: Instrument Serif (title + italic callouts), Geist sans (node names), Geist Mono (technical sublabels). 1px hairline borders, no shadows, max border-radius 10px. Every coord, width, and gap divisible by 4 — non-negotiable, it's what keeps the diagrams from feeling AI-generated. Mono is for technical content (ports, URLs, field types), not a blanket \"dev\" aesthetic. Coral-tinted focal nodes draw the eye to the 1–2 things that matter. Full spec in [`SKILL.md`](skills\u002Fdiagram-design\u002FSKILL.md#5-design-system).\n\n---\n\n## Primitives\n\n- **Annotation callout** — italic Instrument Serif + dashed Bézier leader, for editorial asides that sit in the margins. See [`skills\u002Fdiagram-design\u002Freferences\u002Fprimitive-annotation.md`](skills\u002Fdiagram-design\u002Freferences\u002Fprimitive-annotation.md).\n- **Sketchy filter** — SVG turbulence + displacement map for a hand-drawn variant. Good for essays, not for technical docs. See [`skills\u002Fdiagram-design\u002Freferences\u002Fprimitive-sketchy.md`](skills\u002Fdiagram-design\u002Freferences\u002Fprimitive-sketchy.md).\n\n---\n\n## When *not* to use this skill\n\n- **Quick unicode diagrams** for tweets or terminal output → wiretext-style skill.\n- **Lists of anything** → a table or bullets.\n- **Before\u002Fafter comparisons** → a table.\n- **One-shape \"diagrams\"** — a single box with a label → just write the sentence.\n\nBefore drawing, ask: *would a reader learn more from this than from a well-written paragraph?* If no, don't draw.\n\n---\n\n## About\n\nMade by **Cathryn Lavery** — founder of [BestSelf.co](https:\u002F\u002Fbestself.co?utm_source=diagram-design&utm_medium=readme&utm_campaign=github&utm_content=bio). I write about AI, entrepreneurship, and designing nice-looking things at [littlemight.com](https:\u002F\u002Flittlemight.com?utm_source=diagram-design&utm_medium=readme&utm_campaign=github&utm_content=bio) — blog + newsletter.\n\nIf this is useful, **star the repo** and come [say hi on X](https:\u002F\u002Fx.com\u002Fcathrynlavery).\n","该项目提供14种高质量的编辑图表类型，适用于Claude Code，采用自包含的HTML+SVG格式，无阴影和Mermaid风格的杂乱。其核心功能包括快速生成与品牌风格一致的图表，并能够自动从网站中读取颜色和字体信息以匹配设计。适合需要在短时间内创建专业且符合品牌形象图表的内容创作者或设计师使用，尤其对于那些希望避免使用复杂工具如Figma来调整样式的人非常有用。通过该项目，用户可以直接在浏览器中打开任何一种图表，无需额外构建步骤或依赖外部资源。",2,"2026-06-11 02:38:26","CREATED_QUERY"]