cathrynlavery/diagram-design
38 editorial diagram types for Claude Code, Codex, and Pi. Self-contained HTML + SVG. No shadows. No Mermaid slop.
HTML★ 37,967+1,294 that day#6 on trending
5.3%duplicated code · 1,689 of 31,895 lines
111clones in code
74code files of 399 scanned
23.89%duplicated over all files · 1,060 clones
The code number leaves out tests, fixtures, docs, examples, data files, styles, translations and vendored code.
Largest clones in the code
- 59 lines in 2 placespython425 tokens
147def run(self, source: str, name: str = "example-beeswarm-fixture.html") -> list: 148 path = self.path_for(name) 149 path.write_text(source, encoding="utf-8") 150 try: 151 return verify.check(path) 152 finally: 153 path.unlink() 154 155def expect_clean(self, case: str, source: str, name: str | None = None) -> None: 156 self.count += 1First 10 of 59 lines.
- 45 lines in 2 placespython307 tokens
249`float("nan")` succeeds and then every `abs(x) > tolerance` comparison is 250False, so a NaN coordinate silently satisfies every check in the file. 251Any non-finite value is treated as unreadable instead. 252""" 253if value is None: 254 return None 255try: 256 parsed = float(str(value).replace(",", "")) 257except (TypeError, ValueError): 258 return NoneFirst 10 of 45 lines.
- 24 lines in 3 placespython137 tokens
888 help="check every shipped example that presents as a beeswarm", 889) 890args = parser.parse_args() 891if not args.all and not args.paths: 892 parser.print_help() 893 return 2 894 895if args.all: 896 targets = sorted(ASSET_DIR.glob("example-*.html")) 897else:First 10 of 24 lines.
7 more
- 12 lines in 4 placespython72 tokens
- 8 lines in 3 placespython103 tokens
- 35 lines in 2 placespython194 tokens
- 34 lines in 2 placespython188 tokens
- 16 lines in 3 placespython93 tokens
- 27 lines in 2 placespython185 tokens
- 36 lines in 2 placespython183 tokens
Largest clones over all files, tests and data included
- 343 lines in 2 placesmarkupmarkup7,508 tokensskills/diagram-design/assets/example-beeswarm-full.html:51–393skills/diagram-design/assets/example-beeswarm.html:41–383
51<desc id="beeswarm-full-desc">Beeswarm of 138 per-request latency samples for one checkout endpoint on a shared linear value axis from zero; vertical spread is… 52<defs> 53 <pattern id="dots" width="22" height="22" patternUnits="userSpaceOnUse"> 54 <circle cx="1" cy="1" r="0.9" fill="rgba(45,49,66,0.10)"/> 55 </pattern> 56</defs> 57 58<rect width="100%" height="100%" fill="#f5f5f5"/> 59<rect width="100%" height="100%" fill="url(#dots)" opacity="0.55"/> 60First 10 of 343 lines.
- 16 lines in 13 placesmarkupmarkup599 tokensskills/diagram-design/assets/example-architecture-full.html:20–35skills/diagram-design/assets/example-dependency-full.html:11–26skills/diagram-design/assets/example-er-full.html:11–26skills/diagram-design/assets/example-flowchart-full.html:11–26skills/diagram-design/assets/example-layers-full.html:11–26and 8 more
20body { font-family: var(--font-sans); background: var(--color-paper); min-height: 100vh; padding: 3rem 2rem; color: var(--color-ink); } 21.container { max-width: 1200px; margin: 0 auto; } 22.header { margin-bottom: 2.5rem; } 23.header-eyebrow { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-mu… 24h1 { font-family: var(--font-serif); font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; margin-bottom:… 25.subtitle { font-size: 1rem; line-height: 1.55; color: var(--color-muted); max-width: 58ch; } 26.diagram-container { background: var(--color-paper-2); border-radius: 8px; border: 1px solid var(--color-rule); padding: 1.5rem; overflow-x: auto; } 27svg { width: 100%; min-width: 900px; display: block; } 28.cards { display: grid; grid-template-columns: 1.1fr 1fr 0.9fr; gap: 1rem; margin-top: 1.5rem; } 29@media (max-width: 820px) { .cards { grid-template-columns: 1fr; } }First 10 of 16 lines.
- 52 lines in 19 placesmarkupmarkup375 tokensskills/diagram-design/assets/example-architecture.html:7–58skills/diagram-design/assets/example-dependency.html:7–58skills/diagram-design/assets/example-er.html:7–58skills/diagram-design/assets/example-flowchart.html:7–58skills/diagram-design/assets/example-kanban.html:7–58and 14 more
7<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" r… 8<style> 9 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } 10 :root { 11 --color-paper: #f5f5f5; 12 --color-ink: #2d3142; 13 --color-muted: #4f5d75; 14 --color-accent: #eb6c36; 15 --font-sans: 'Geist', system-ui, sans-serif; 16 --font-serif: 'Instrument Serif', serif;First 10 of 52 lines.
- 53 lines in 16 placesmarkupmarkup386 tokensskills/diagram-design/assets/example-architecture-dark.html:6–58skills/diagram-design/assets/example-dependency-dark.html:6–58skills/diagram-design/assets/example-er-dark.html:6–58skills/diagram-design/assets/example-flowchart-dark.html:6–58skills/diagram-design/assets/example-kanban-dark.html:6–58and 11 more
- 240 lines in 2 placesmarkupmarkup5,528 tokens
By format, code only
| Format | Files | Lines | Clones | Duplicated lines | Duplication |
|---|---|---|---|---|---|
| python | 64 | 31,077 | 111 | 1,689 | 5.43% |
| bash | 9 | 644 | 0 | 0 | 0% |
| perl | 1 | 174 | 0 | 0 | 0% |
By format, all files
| Format | Files | Lines | Clones | Duplicated lines | Duplication |
|---|---|---|---|---|---|
| markup | 183 | 28,474 | 905 | 15,894 | 55.82% |
| python | 66 | 31,167 | 113 | 1,713 | 5.5% |
| markdown | 89 | 11,631 | 30 | 298 | 2.56% |
| yaml | 20 | 1,462 | 9 | 67 | 4.58% |
| json | 8 | 1,030 | 2 | 49 | 4.76% |
| bash | 13 | 847 | 1 | 8 | 0.94% |
| text | 13 | 561 | 0 | 0 | 0% |
| perl | 1 | 174 | 0 | 0 | 0% |
| css | 2 | 52 | 0 | 0 | 0% |
| txt | 1 | 20 | 0 | 0 | 0% |
Trending appearances
| Day | Rank | Stars | Files | Lines | Clones | All files | Code | Health | Commit |
|---|---|---|---|---|---|---|---|---|---|
| Sep 11, 2026 | #6 | 37,967 (+1,294) | 399 | 75,455 | 1,060 | 23.89% | 5.3% | — | 8d8b299 |
| Sep 10, 2026 | #5 | 36,867 (+2,249) | 399 | 75,386 | 1,060 | 23.92% | 5.3% | — | 562dbdf |
| Sep 9, 2026 | #2 | 35,301 (+710) | 382 | 71,561 | 1,003 | 24.2% | 4.47% | — | dcd9317 |
| Sep 7, 2026 | #1 | 32,636 (+620) | 382 | 71,545 | 1,003 | 24.2% | 4.47% | — | 2724fd2 |
| Sep 6, 2026 | #3 | 31,817 (+855) | 374 | 70,129 | 973 | 24.01% | 4.41% | — | 4451ead |
| Sep 5, 2026 | #10 | 31,096 (+437) | 374 | 70,129 | 973 | 24.01% | 4.41% | — | 4451ead |
Want this for your own project? Install jscpd and run jscpd ., or measure it the way the baselines were measured.