Diagram Design Editorial
Generates self-contained HTML+SVG diagrams in 13 types (architecture, flowchart, sequence, state machine, ER, timeline, swimlane, quadrant, nested, tree, layer stack, Venn, pyramid) without Mermaid or build tools. It reads your website's color palette and font stack in 60 seconds, then writes brand-matched diagrams following strict design constraints: 4px grid alignment, single accent color on 1-2 focal nodes, three-font system (Instrument Serif for titles, Geist Sans for labels, Geist Mono for technical sublabels), and ruthless visual sparseness. Defaults to warm off-white and rust orange if you skip onboarding. Useful when you need editorial-quality diagrams that sit quietly in documentation without looking like engineer art.
- skills.sh installs
- 307
- GitHub stars
- 26
- last updated
- Jun 3, 2026
Install
$ npx -y skills add aradotso/trending-skills --skill diagram-design-editorial --agent claude-codeInstalls into .claude/skills of the current project.
Files
Diagram Design — Editorial HTML+SVG Diagrams
Skill by ara.so — Daily 2026 Skills collection.
Editorial-quality diagrams for blog posts and documentation. 13 types, self-contained HTML+SVG, no build step, no Mermaid, no shadows. Brand-matched in 60 seconds by reading your website.
Installation
git clone git@github.com:cathrynlavery/diagram-design.git ~/.claude/skills/diagram-design
# restart Claude Code — skill registers as `diagram-design`
Or symlink from another location:
git clone git@github.com:cathrynlavery/diagram-design.git ~/code/diagram-design
ln -s ~/code/diagram-design ~/.claude/skills/diagram-design
Browse all 13 types locally:
open ~/.claude/skills/diagram-design/assets/index.html
The 13 Diagram Types
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/aradotso/trending-skills
- Category
- Design & UI/UX
- First seen
- Jun 3, 2026
More from aradotso/trending-skills
All 251- Meta Harness Optimization306
- Border Beam React304
- Wx Favorites Report299
- Cc Design Html Prototyping297
- Pgque Postgres Queue296
- Huashu Design Html Native290
- Freebuff2api Openai Proxy289
- Aube Package Manager286
- Permiso Accessibility Permissions283
- Mdv Markdown Visualization282
- Create Simulated Aeronautics Mod281
- Kami Document Design277
- Gpt2api Openai Gateway276
- Opengame Agentic Game Creation268
- Oransim Causal Marketing Twin267
- Aglais Xqvm Quantum Vm266
- Cairn Ai Pentest265
- Flashkda Delta Attention261
- Openai Privacy Filter261
- Masterhttprelayvpn Proxy259
- Crabtrap Llm Proxy257
- Masterhttprelayvpn Rust256
- Tilekernels Gpu Kernels256
- Text To Cad Harness250
Recommended
More Design & UI/UX
antigravity-design-expertsickn33/antigravity-awesome-skillsantigravity design expert273skills.sh installs
typography-systemsanky369/vibe-building-skillsBuild or repair a typography system: a modular type scale, font choices and loading, hierarchy, line-height/line-length, and fluid sizing — delivered as tokens 260skills.sh installs
frontend-designaiskillstore/marketplaceCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applicat255skills.sh installs