[{"_1":2,"_640":-5,"_641":-5},"loaderData",{"_3":4,"_8":9,"_23":24},"root",{"_5":-5,"_6":7},"user","countable",true,"routes/_main",{"_5":-5,"_10":11},"recentPosts",[12,17,20],{"_13":14,"_15":16},"slug","claude-code-channels","title","Claude Code Channels: Pushing Events Into a Session",{"_13":18,"_15":19},"claude-code-monitor-tool","What Claude Code's Monitor Tool Does",{"_13":21,"_15":22},"claude-code-subagent-forking","How Claude Code's Subagent Forking Works","routes/creators.$handle",{"_25":26,"_27":26,"_28":29,"_30":31,"_32":33,"_638":31,"_639":112},"handle","cathrynlavery","displayName","profileUrl","https://github.com/cathrynlavery","verified",false,"skills",[34],{"_35":36,"_13":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_55":56,"_61":62,"_63":64,"_65":66,"_82":83,"_84":-5,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":-5,"_96":97,"_98":26,"_30":31,"_99":31,"_100":88,"_101":102,"_103":88,"_104":88,"_105":106,"_107":108,"_135":136,"_171":172,"_222":223,"_610":611,"_622":623,"_634":635,"_636":637},"id","gh__cathrynlavery__diagram-design__skills-diagram-design","diagram-design-cathrynlavery","name","Diagram Design","canonicalName","diagram-design","tagline","Create technical diagrams with custom styles easily.","description","Create technical and product diagrams — architecture, IT current-state, flowchart, sequence, state machine, ER / data model, timeline, swimlane, quadrant, radar / spider, loop / flywheel, nested, tree, org chart, layer stack, venn, pyramid / funnel, bar chart, line chart, Gantt, scatter plot, high-level, process, medallion, data flow, DP integration, DP security matrix — as standalone HTML files with inline SVG. Ships with a neutral editorial skin and a first-run gate that prompts users to customize the style guide (colors, fonts) from their own website before generating. Includes annotation-callout primitive and optional sketchy variant.","longDescription","Diagram Design is a skill that enables users to create a variety of technical and product diagrams as standalone HTML files, complete with inline SVG and CSS. This skill supports twenty-seven different diagram types, including architecture diagrams, flowcharts, ER/data models, Gantt charts, and more. Each diagram follows a cohesive design philosophy that emphasizes clarity and restraint, ensuring that every element serves a purpose and contributes to the overall understanding of the depicted information.\n\nBefore generating diagrams, users are prompted to customize a style guide to align with their brand's visual identity. This first-run gate ensures that diagrams do not ship with default styling, which could detract from a user's brand consistency. Users can pull color palettes and fonts from their website or other sources, ensuring that the generated diagrams are visually integrated into their existing documentation or presentations.\n\nThe skill is particularly useful for developers, designers, and technical writers who need to convey complex information visually. By providing a structured approach to diagram creation, it helps users focus on the essential elements of their diagrams, promoting better communication of ideas. The skill is designed for those who understand the value of visual representation in technical documentation and are looking for a way to streamline their diagramming process.\n\nWith its opinionated design system and emphasis on quality, Diagram Design is an excellent tool for anyone needing to create professional-grade diagrams that are both informative and aesthetically pleasing. It is especially beneficial in environments where clarity and branding are paramount, such as in technical documentation, presentations, or project proposals.","primaryCategory","design","subcategory","design-systems","secondaryCategories",[54],"productivity","tags",[41,57,58,59,60],"html-diagrams","svg-diagrams","technical-diagrams","custom-style-guide","skillType","generator","complexity","intermediate","platforms",[67,68,69,70,71,72,73,74,75,76,77,78,79,80,81],"claude-code","claude-desktop","claude-api","codex-cli","cursor","antigravity","github-copilot","windsurf","opencode","cline","roo-code","goose","kiro","continue","trae","delivery","source-link","skillFileUrl","pricing","free","price",0,"thumbnailType","icon","thumbnailIcon","chart-bar","thumbnailColor","blue","thumbnailImageUrl","sellerId","gh__cathrynlavery","sellerName","featured","downloads","views",13,"rating","reviewCount","status","active","metrics",{"_109":110,"_111":112,"_113":112,"_114":110,"_115":88,"_116":117,"_118":119,"_120":112,"_121":122,"_123":124,"_125":126,"_127":128,"_129":130,"_131":132,"_133":134},"freshnessScore",100,"mirrorCount",1,"skillCountInRepo","qualityScore","daysSinceUpdate","popularityScore",75,"trustScore",60,"repoOpenIssues","repoStars",4852,"repoWatchers",25,"repoContributors",6,"overallScore",86,"repoCreatedAt","2026-04-16T18:01:16Z","repoForks",334,"repoPushedAt","2026-08-10T18:44:05Z","source",{"_137":26,"_138":139,"_140":141,"_146":41,"_147":-5,"_144":148,"_149":150,"_151":31,"_152":153,"_154":155,"_161":162,"_163":7,"_164":165,"_166":167,"_168":169,"_170":169},"owner","repoUrl","https://github.com/cathrynlavery/diagram-design","author",{"_28":29,"_142":143,"_38":26,"_25":26,"_144":145},"avatarUrl","https://github.com/cathrynlavery.png","type","User","repo","commitSha","github","branch","main","isOfficial","path","skills/diagram-design","license",{"_38":156,"_157":158,"_159":160},"MIT License","spdxId","MIT","url","https://github.com/cathrynlavery/diagram-design/blob/main/LICENSE","sourceUpdatedAt","2026-08-10T18:44:04.000Z","redistributable","permalink","https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/SKILL.md","repoFullName","cathrynlavery/diagram-design","lastSyncedAt","2026-08-11T01:24:09.094Z","firstSeenAt","seo",{"_173":174,"_185":186,"_187":188,"_206":-5,"_207":208,"_214":215,"_216":217,"_218":219,"_220":221},"useCases",[175,179,182],{"_15":176,"_177":178},"Creating System Architecture Diagrams","body","Use this skill to generate architecture diagrams that clearly represent the components and connections in your system.",{"_15":180,"_177":181},"Visualizing Project Timelines","Create Gantt charts to visualize project timelines and task dependencies, making it easier to communicate progress.",{"_15":183,"_177":184},"Documenting Data Models","Generate ER diagrams to document data models, helping teams understand the relationships between different entities.","whenNotToUse","Avoid this skill for simple diagrams that do not require detailed representation or when quick sketches are sufficient.","faqs",[189,194,197,200,203],{"_190":191,"_192":193},"q","What types of diagrams can I create?","a","You can create 27 different types of diagrams, including architecture, flowcharts, ER models, Gantt charts, and more.",{"_190":195,"_192":196},"How do I customize the style of my diagrams?","You can customize the style guide by pulling colors and fonts from your website, or by manually entering your own design tokens.",{"_190":198,"_192":199},"Is this skill suitable for beginners?","While the skill is designed for users with some technical knowledge, it provides clear instructions for customization and diagram creation.",{"_190":201,"_192":202},"Can I use this skill for non-technical diagrams?","This skill is primarily focused on technical and product diagrams, so it may not be ideal for simple or artistic diagrams.",{"_190":204,"_192":205},"What happens if I don't customize the style guide?","If you proceed without customizing, the diagrams will use default styling, which may not align with your brand.","ogImageUrl","keywords",[209,210,211,212,213],"create diagrams","technical diagrams","SVG diagrams","customizable diagrams","HTML diagram generator","whenToUse","Use this skill when you need to create any of the supported diagram types for technical documentation or presentations.","metaTitle","Diagram Design - Create Custom Technical Diagrams","problemSolved","This skill removes the complexity of creating visually consistent and informative diagrams.","metaDescription","Generate customizable technical diagrams in HTML with inline SVG. Perfect for branding and clarity.","content",{"_224":225,"_226":227,"_593":594,"_603":604,"_605":31,"_606":607,"_608":609},"bundledFiles",132,"fileTree",[228,235,239,242,245,248,251,254,257,260,263,266,269,272,275,278,281,284,287,290,293,296,299,302,305,308,311,314,317,320,323,326,329,332,335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395,398,401,404,407,410,413,416,419,422,425,428,431,434,437,440,443,446,449,452,455,458,461,464,467,470,473,476,479,482,485,488,491,494,497,500,503,506,509,512,515,518,521,524,527,530,533,536,539,542,545,548,551,554,557,560,563,566,569,572,575,578,581,584,587,590],{"_152":229,"_230":231,"_144":232,"_233":234},"SKILL.md","size",28219,"file","language","markdown",{"_152":236,"_230":237,"_144":232,"_233":238},"assets/example-architecture-dark.html",11716,"html",{"_152":240,"_230":241,"_144":232,"_233":238},"assets/example-architecture-full.html",14663,{"_152":243,"_230":244,"_144":232,"_233":238},"assets/example-architecture.html",11789,{"_152":246,"_230":247,"_144":232,"_233":238},"assets/example-bar-dark.html",8845,{"_152":249,"_230":250,"_144":232,"_233":238},"assets/example-bar-full.html",10975,{"_152":252,"_230":253,"_144":232,"_233":238},"assets/example-bar.html",8664,{"_152":255,"_230":256,"_144":232,"_233":238},"assets/example-data-flow-dark.html",12926,{"_152":258,"_230":259,"_144":232,"_233":238},"assets/example-data-flow-full.html",15795,{"_152":261,"_230":262,"_144":232,"_233":238},"assets/example-data-flow.html",12783,{"_152":264,"_230":265,"_144":232,"_233":238},"assets/example-datalake-dark.html",24599,{"_152":267,"_230":268,"_144":232,"_233":238},"assets/example-datalake-full.html",28107,{"_152":270,"_230":271,"_144":232,"_233":238},"assets/example-datalake.html",26162,{"_152":273,"_230":274,"_144":232,"_233":238},"assets/example-dp-integration-dark.html",14376,{"_152":276,"_230":277,"_144":232,"_233":238},"assets/example-dp-integration-full.html",16893,{"_152":279,"_230":280,"_144":232,"_233":238},"assets/example-dp-integration.html",14365,{"_152":282,"_230":283,"_144":232,"_233":238},"assets/example-dp-security-matrix-dark.html",10231,{"_152":285,"_230":286,"_144":232,"_233":238},"assets/example-dp-security-matrix-full.html",12554,{"_152":288,"_230":289,"_144":232,"_233":238},"assets/example-dp-security-matrix.html",10858,{"_152":291,"_230":292,"_144":232,"_233":238},"assets/example-er-dark.html",13925,{"_152":294,"_230":295,"_144":232,"_233":238},"assets/example-er-full.html",16851,{"_152":297,"_230":298,"_144":232,"_233":238},"assets/example-er.html",13886,{"_152":300,"_230":301,"_144":232,"_233":238},"assets/example-flowchart-dark.html",8910,{"_152":303,"_230":304,"_144":232,"_233":238},"assets/example-flowchart-full.html",11884,{"_152":306,"_230":307,"_144":232,"_233":238},"assets/example-flowchart.html",8880,{"_152":309,"_230":310,"_144":232,"_233":238},"assets/example-gantt-dark.html",10003,{"_152":312,"_230":313,"_144":232,"_233":238},"assets/example-gantt-full.html",11567,{"_152":315,"_230":316,"_144":232,"_233":238},"assets/example-gantt.html",9768,{"_152":318,"_230":319,"_144":232,"_233":238},"assets/example-high-level-dark.html",23614,{"_152":321,"_230":322,"_144":232,"_233":238},"assets/example-high-level-full.html",27894,{"_152":324,"_230":325,"_144":232,"_233":238},"assets/example-high-level-vertical-dark.html",24306,{"_152":327,"_230":328,"_144":232,"_233":238},"assets/example-high-level-vertical-full.html",28071,{"_152":330,"_230":331,"_144":232,"_233":238},"assets/example-high-level-vertical.html",29803,{"_152":333,"_230":334,"_144":232,"_233":238},"assets/example-high-level.html",26400,{"_152":336,"_230":337,"_144":232,"_233":238},"assets/example-it-state-dark.html",11968,{"_152":339,"_230":340,"_144":232,"_233":238},"assets/example-it-state-full.html",14201,{"_152":342,"_230":343,"_144":232,"_233":238},"assets/example-it-state.html",12476,{"_152":345,"_230":346,"_144":232,"_233":238},"assets/example-layers-dark.html",6581,{"_152":348,"_230":349,"_144":232,"_233":238},"assets/example-layers-full.html",9688,{"_152":351,"_230":352,"_144":232,"_233":238},"assets/example-layers.html",6564,{"_152":354,"_230":355,"_144":232,"_233":238},"assets/example-line-dark.html",7318,{"_152":357,"_230":358,"_144":232,"_233":238},"assets/example-line-full.html",9758,{"_152":360,"_230":361,"_144":232,"_233":238},"assets/example-line.html",7171,{"_152":363,"_230":364,"_144":232,"_233":238},"assets/example-loop-dark.html",6801,{"_152":366,"_230":367,"_144":232,"_233":238},"assets/example-loop-full.html",9945,{"_152":369,"_230":370,"_144":232,"_233":238},"assets/example-loop-terminal.html",9957,{"_152":372,"_230":373,"_144":232,"_233":238},"assets/example-loop.html",6790,{"_152":375,"_230":376,"_144":232,"_233":238},"assets/example-medallion-dark.html",13032,{"_152":378,"_230":379,"_144":232,"_233":238},"assets/example-medallion-full.html",15877,{"_152":381,"_230":382,"_144":232,"_233":238},"assets/example-medallion.html",12864,{"_152":384,"_230":385,"_144":232,"_233":238},"assets/example-nested-dark.html",6410,{"_152":387,"_230":388,"_144":232,"_233":238},"assets/example-nested-full.html",9510,{"_152":390,"_230":391,"_144":232,"_233":238},"assets/example-nested.html",6550,{"_152":393,"_230":394,"_144":232,"_233":238},"assets/example-org-chart-dark.html",11538,{"_152":396,"_230":397,"_144":232,"_233":238},"assets/example-org-chart-full.html",11991,{"_152":399,"_230":400,"_144":232,"_233":238},"assets/example-org-chart.html",11489,{"_152":402,"_230":403,"_144":232,"_233":238},"assets/example-process-dark.html",14720,{"_152":405,"_230":406,"_144":232,"_233":238},"assets/example-process-full.html",17157,{"_152":408,"_230":409,"_144":232,"_233":238},"assets/example-process.html",14707,{"_152":411,"_230":412,"_144":232,"_233":238},"assets/example-pyramid-dark.html",6370,{"_152":414,"_230":415,"_144":232,"_233":238},"assets/example-pyramid-full.html",9417,{"_152":417,"_230":418,"_144":232,"_233":238},"assets/example-pyramid.html",6286,{"_152":420,"_230":421,"_144":232,"_233":238},"assets/example-quadrant-consultant.html",11523,{"_152":423,"_230":424,"_144":232,"_233":238},"assets/example-quadrant-dark.html",6297,{"_152":426,"_230":427,"_144":232,"_233":238},"assets/example-quadrant-full.html",9308,{"_152":429,"_230":430,"_144":232,"_233":238},"assets/example-quadrant.html",6285,{"_152":432,"_230":433,"_144":232,"_233":238},"assets/example-radar-dark.html",7400,{"_152":435,"_230":436,"_144":232,"_233":238},"assets/example-radar-full.html",10140,{"_152":438,"_230":439,"_144":232,"_233":238},"assets/example-radar.html",7598,{"_152":441,"_230":442,"_144":232,"_233":238},"assets/example-scatter-dark.html",9340,{"_152":444,"_230":445,"_144":232,"_233":238},"assets/example-scatter-full.html",11251,{"_152":447,"_230":448,"_144":232,"_233":238},"assets/example-scatter.html",9121,{"_152":450,"_230":451,"_144":232,"_233":238},"assets/example-sequence-dark.html",13464,{"_152":453,"_230":454,"_144":232,"_233":238},"assets/example-sequence-full.html",17883,{"_152":456,"_230":457,"_144":232,"_233":238},"assets/example-sequence-oauth-dark.html",11843,{"_152":459,"_230":460,"_144":232,"_233":238},"assets/example-sequence-oauth-full.html",16310,{"_152":462,"_230":463,"_144":232,"_233":238},"assets/example-sequence-oauth.html",14159,{"_152":465,"_230":466,"_144":232,"_233":238},"assets/example-sequence.html",13417,{"_152":468,"_230":469,"_144":232,"_233":238},"assets/example-state-dark.html",8405,{"_152":471,"_230":472,"_144":232,"_233":238},"assets/example-state-full.html",11328,{"_152":474,"_230":475,"_144":232,"_233":238},"assets/example-state.html",8391,{"_152":477,"_230":478,"_144":232,"_233":238},"assets/example-swimlane-dark.html",10208,{"_152":480,"_230":481,"_144":232,"_233":238},"assets/example-swimlane-full.html",13150,{"_152":483,"_230":484,"_144":232,"_233":238},"assets/example-swimlane.html",10184,{"_152":486,"_230":487,"_144":232,"_233":238},"assets/example-timeline-dark.html",7057,{"_152":489,"_230":490,"_144":232,"_233":238},"assets/example-timeline-full.html",10054,{"_152":492,"_230":493,"_144":232,"_233":238},"assets/example-timeline.html",7025,{"_152":495,"_230":496,"_144":232,"_233":238},"assets/example-tree-dark.html",10743,{"_152":498,"_230":499,"_144":232,"_233":238},"assets/example-tree-full.html",13703,{"_152":501,"_230":502,"_144":232,"_233":238},"assets/example-tree.html",10650,{"_152":504,"_230":505,"_144":232,"_233":238},"assets/example-venn-dark.html",6413,{"_152":507,"_230":508,"_144":232,"_233":238},"assets/example-venn-full.html",9613,{"_152":510,"_230":511,"_144":232,"_233":238},"assets/example-venn.html",4814,{"_152":513,"_230":514,"_144":232,"_233":238},"assets/icons.html",101370,{"_152":516,"_230":517,"_144":232,"_233":238},"assets/index.html",9925,{"_152":519,"_230":520,"_144":232,"_233":238},"assets/template-dark.html",2817,{"_152":522,"_230":523,"_144":232,"_233":238},"assets/template-full.html",22199,{"_152":525,"_230":526,"_144":232,"_233":238},"assets/template-terminal.html",4609,{"_152":528,"_230":529,"_144":232,"_233":238},"assets/template.html",2940,{"_152":531,"_230":532,"_144":232,"_233":234},"references/export.md",5568,{"_152":534,"_230":535,"_144":232,"_233":234},"references/onboarding.md",10086,{"_152":537,"_230":538,"_144":232,"_233":234},"references/primitive-annotation.md",1708,{"_152":540,"_230":541,"_144":232,"_233":234},"references/primitive-icons.md",99271,{"_152":543,"_230":544,"_144":232,"_233":234},"references/primitive-sketchy.md",1700,{"_152":546,"_230":547,"_144":232,"_233":234},"references/primitive-terminal.md",3915,{"_152":549,"_230":550,"_144":232,"_233":234},"references/style-guide.md",8555,{"_152":552,"_230":553,"_144":232,"_233":234},"references/type-architecture.md",5001,{"_152":555,"_230":556,"_144":232,"_233":234},"references/type-bar.md",2790,{"_152":558,"_230":559,"_144":232,"_233":234},"references/type-data-flow.md",21284,{"_152":561,"_230":562,"_144":232,"_233":234},"references/type-dp-integration.md",22247,{"_152":564,"_230":565,"_144":232,"_233":234},"references/type-dp-security-matrix.md",19086,{"_152":567,"_230":568,"_144":232,"_233":234},"references/type-er.md",1119,{"_152":570,"_230":571,"_144":232,"_233":234},"references/type-flowchart.md",1079,{"_152":573,"_230":574,"_144":232,"_233":234},"references/type-gantt.md",2468,{"_152":576,"_230":577,"_144":232,"_233":234},"references/type-high-level.md",26254,{"_152":579,"_230":580,"_144":232,"_233":234},"references/type-it-state.md",29984,{"_152":582,"_230":583,"_144":232,"_233":234},"references/type-layers.md",1535,{"_152":585,"_230":586,"_144":232,"_233":234},"references/type-line.md",2333,{"_152":588,"_230":589,"_144":232,"_233":234},"references/type-loop.md",12609,{"_152":591,"_230":592,"_144":232,"_233":234},"references/type-medallion.md",22226,"codeExamples",[595,598,601],{"_233":238,"_596":597},"snippet","",{"_233":599,"_596":600},"svg","",{"_233":599,"_596":602},"\n \n \n \n\n\n","skillMd","# Diagram Design\n\nCreate visual diagrams as self-contained HTML files with inline SVG and CSS, following an opinionated editorial design system.\n\nTwenty-seven diagram types. One shared design system, complexity budget, and taste gate. Type-specific conventions live in `references/` and are loaded only when you pick a type.\n\n---\n\n## 0. First-time setup — style guide gate\n\n**Before generating your first diagram in a new project, verify the style guide has been customized.**\n\nOpen [`references/style-guide.md`](references/style-guide.md) and check the default tokens. If they're still the shipped defaults (paper `#faf7f2`, ink `#1c1917`, accent `#b5523a` rust), **pause and ask the user**:\n\n> *\"This is your first Schematic in this project. The style guide is still at the default (neutral stone + rust). Do you want to customize it to match your brand first? Options: (a) pull from your website URL, (b) extract from an installed skill, (c) extract from a local folder / design-system directory, (d) paste tokens manually, (e) proceed with the default for now.\"*\n\nThen branch:\n\n- **(a)** → follow [`references/onboarding.md § URL`](references/onboarding.md) to fetch the site, extract palette + fonts, propose a diff, and write `style-guide.md`.\n- **(b)** → follow [`references/onboarding.md § Skill`](references/onboarding.md) — ask which skill, read its SKILL.md / CSS / token files, map to semantic roles, propose diff.\n- **(c)** → follow [`references/onboarding.md § Folder`](references/onboarding.md) — ask for the path, glob for CSS/JSON/MD token files, map to semantic roles, propose diff.\n- **(d)** → accept the user's tokens and write them into `style-guide.md` under a new \"Custom tokens\" section.\n- **(e)** → proceed; optionally remind the user they can run onboarding later.\n\n**Once the style guide has been customized** (or the user explicitly opted for default), skip this gate on subsequent runs. A simple way to detect customization: if the `accent` value in `style-guide.md` differs from `#b5523a`, assume custom.\n\nDon't silently ship default-skinned diagrams into a branded project — that's the failure mode this gate exists to prevent.\n\n---\n\n## 1. Philosophy\n\n**The highest-quality move is usually deletion.**\n\nFrom `.impeccable.md`: *\"Confident restraint. Earn every element. One color accent, two families, a small spacing vocabulary. If removing it wouldn't hurt the page, remove it.\"*\n\nApplied to schematics:\n\n- Every node represents a distinct idea. Two nodes that always travel together are one node.\n- Every connection carries information. If the relationship is obvious from layout, remove the line.\n- Coral is **editorial, not a flag.** 1–2 focal nodes per diagram. Using it on 5 nodes erases the signal.\n- The schematic isn't done when everything is added. It's done when nothing can be removed.\n\n**Target density: 4/10.** Enough to be technically complete. Not so dense it needs a guide. Above 9 nodes, it's probably two diagrams.\n\n---\n\n## 2. When to Use\n\nUse for any of the 27 diagram types (§3) when a reader will learn more from a visual than from prose, a table, or a bulleted list.\n\n**Don't use for:**\n\n- Quick unicode diagrams → use **wiretext**.\n- Lists of things → table or bullets.\n- Simple before/after → table.\n- One-shape \"diagrams\" → just write the sentence.\n\nBefore drawing, ask: *Would the reader learn more from this than from a well-written paragraph?* If no, don't draw.\n\n---\n\n## 3. Diagram Types\n\n### Selection guide\n\n| If you're showing… | Use | Reference |\n|---|---|---|\n| Components + connections in a system | **Architecture** | [type-architecture.md](references/type-architecture.md) |\n| Legacy IT landscape grouped by phase/department; documents the *before* state in modernization proposals | **IT current-state** | [type-it-state.md](references/type-it-state.md) |\n| Decision logic with branches | **Flowchart** | [type-flowchart.md](references/type-flowchart.md) |\n| Time-ordered messages between actors | **Sequence** | [type-sequence.md](references/type-sequence.md) |\n| States + transitions + guards | **State machine** | [type-state.md](references/type-state.md) |\n| Entities + fields + relationships | **ER / data model** | [type-er.md](references/type-er.md) |\n| Events positioned in time | **Timeline** | [type-timeline.md](references/type-timeline.md) |\n| Cross-functional process with handoffs | **Swimlane** | [type-swimlane.md](references/type-swimlane.md) |\n| Two-axis positioning / prioritization | **Quadrant** | [type-quadrant.md](references/type-quadrant.md) |\n| Multiple entities scored across 3–5 quantitative criteria | **Radar / Spider** | [type-radar.md](references/type-radar.md) |\n| Reinforcing cycle / flywheel where the last step feeds the first and a shared hub accumulates state | **Loop** | [type-loop.md](references/type-loop.md) |\n| Hierarchy through containment / scope | **Nested** | [type-nested.md](references/type-nested.md) |\n| Parent → children relationships | **Tree** | [type-tree.md](references/type-tree.md) |\n| Human/agent/team ownership, reporting, routing, escalation | **Org chart** | [type-org-chart.md](references/type-org-chart.md) |\n| Stacked abstraction levels | **Layer stack** | [type-layers.md](references/type-layers.md) |\n| Overlap between sets | **Venn** | [type-venn.md](references/type-venn.md) |\n| Ranked hierarchy or conversion drop-off | **Pyramid / funnel** | [type-pyramid.md](references/type-pyramid.md) |\n| Quantitative comparison across categories | **Bar chart** | [type-bar.md](references/type-bar.md) |\n| Continuous trends over time | **Line chart** | [type-line.md](references/type-line.md) |\n| Tasks and phases on a timeline | **Gantt** | [type-gantt.md](references/type-gantt.md) |\n| Distribution and correlation between two variables | **Scatter plot** | [type-scatter.md](references/type-scatter.md) |\n| End-to-end data stack on a container cluster | **High-Level** | [type-high-level.md](references/type-high-level.md) |\n| Multi-actor sequential process with data handoffs | **Process** | [type-process.md](references/type-process.md) |\n| Multi-tier data storage with quality levels and access policies | **Medallion** | [type-medallion.md](references/type-medallion.md) |\n| Role-scoped data flow: who does what at each pipeline step | **Data flow** | [type-data-flow.md](references/type-data-flow.md) |\n| Integration topology of a data platform — sources → core → consumers | **DP integration** | [type-dp-integration.md](references/type-dp-integration.md) |\n| Per-role / per-component access permissions matrix | **DP security matrix** | [type-dp-security-matrix.md](references/type-dp-security-matrix.md) |\n\nRules of thumb:\n\n- If a 3-column table communicates the same thing, pick the table.\n- If you're combining two types, pick the dominant axis — don't hybridize grammars.\n- If you're past the complexity budget (§7), split into an overview + detail.\n\n**Always load the relevant `references/type-*.md` before drawing** — it contains layout conventions, anti-patterns, and example files for that type.\n\n---\n\n## 4. Universal Anti-patterns\n\nThese mark \"AI slop\" schematics of any type:\n\n| Anti-pattern | Why it fails |\n|---|---|\n| Dark mode + cyan/purple glow | Looks \"technical\" without design decisions |\n| JetBrains Mono as blanket \"dev\" font | Mono is for *technical* content — ports, commands, URLs. Names go in Geist sans. |\n| Identical boxes for every node | Erases hierarchy |\n| Legend floating inside the diagram area | Collides with nodes |\n| Arrow labels with no masking rect | Bleeds through the line |\n| Vertical `writing-mode` text on arrows | Unreadable |\n| 3 equal-width summary cards as default | Generic grid — vary widths |\n| Shadow on any element | Shadows are out. Borders are in. |\n| `rounded-2xl` on boxes | Max radius 6–10px or none |\n| Coral on every \"important\" node | Coral is 1–2 editorial accents, not a signaling system |\n| Diagonal / slanted connectors between off-axis nodes | Rounded right-angle (orthogonal) elbows are mandatory — see §6 Mandatory connector rules |\n| Arrow label sitting on or touching its connector | Label must have a 6–10px gap above the line so the connector stays visible |\n| Two connectors overlapping or running on the same path | Each connection must be independently traceable — bridge crossings, offset parallels |\n| Two connectors sharing a single attach point on a box | Fan attach points along the edge (≥12px apart) so every arrow is clearly distinct — see §6 rule 4 |\n| Connector routed behind a non-endpoint box without need | Reroute around intervening boxes; the dashed-transit exception (§6 rule 5) only applies when an unavoidable intervening box sits on the direct path |\n\nType-specific anti-patterns live in each `references/type-*.md`.\n\n---\n\n## 5. Design System\n\n**The design system is skinnable.** All colors, typography, and tokens live in a single source of truth — [`references/style-guide.md`](references/style-guide.md). This file describes semantic roles (`paper`, `ink`, `muted`, `accent`, `link`, …). The default skin is a cool editorial palette (white-smoke paper, jet-black ink, atomic-tangerine accent, blue-slate muted, silver hairlines); to apply your own brand, either edit `style-guide.md` directly or run the URL-based flow described in [`references/onboarding.md`](references/onboarding.md).\n\n> When specs below or in type references mention \"ink\", \"accent\", \"muted\", etc., look up the current hex value in `style-guide.md`.\n\n### Semantic roles (at a glance)\n\n| Role | Purpose |\n|---|---|\n| `paper`, `paper-2` | Page bg and container bg |\n| `ink` | Primary text / stroke |\n| `muted`, `soft` | Secondary text, default arrows, sublabels |\n| `rule`, `rule-solid` | Hairline borders |\n| `accent`, `accent-tint` | 1–2 focal elements per diagram |\n| `link` | HTTP/API calls, external arrows |\n\n**Focal rule:** `accent` goes on 1–2 elements max. Everything else is `ink` / `muted` / `soft`. If you're tempted to accent 4 things, you haven't decided what's focal yet.\n\n### Node type → treatment\n\n| Type | Fill | Stroke |\n|---|---|---|\n| **Focal** (1–2 max) | `accent-tint` | `accent` |\n| **Backend / API / Step** | white | `ink` |\n| **Store / State** | `ink @ 0.05` | `muted` |\n| **External / Cloud** | `ink @ 0.03` | `ink @ 0.30` |\n| **Input / User** | `muted @ 0.10` | `soft` |\n| **Optional / Async** | `ink @ 0.02` | `ink @ 0.20` dashed `4,3` |\n| **Security / Boundary** | `accent @ 0.05` | `accent @ 0.50` dashed `4,4` |\n\n### Typography (summary — full spec in style-guide.md)\n\n- **Title** — Instrument Serif, 1.75rem, 400 — H1 only\n- **Node name** — Geist (sans), 12px, 600 — human-readable labels\n- **Sublabel** — Geist Mono, 9px — ports, URLs, field types\n- **Eyebrow / tag** — Geist Mono, 7–8px, uppercase, tracked — type tags, axis labels\n- **Arrow label** — Geist Mono, 8px — annotation on arrows\n- **Editorial aside** — Instrument Serif *italic*, 14px — callouts only\n\n**Mono is for technical content.** Names are Geist sans. Page title is Instrument Serif. Italic Instrument Serif is reserved for annotation callouts. Never JetBrains Mono as a blanket \"dev\" font.\n\n```html\n\n```\n\n---\n\n## 6. Core SVG Primitives\n\nUniversal building blocks. Type-specialized primitives (lifeline, activation bar, region) live in the relevant `references/type-*.md`. Optional primitives:\n\n- Editorial callouts → [primitive-annotation.md](references/primitive-annotation.md)\n- Hand-drawn variant → [primitive-sketchy.md](references/primitive-sketchy.md)\n- Icon set (laptop, server, DB, K8s, Docker, AWS, …) → [primitive-icons.md](references/primitive-icons.md). Browse the gallery at [`assets/icons.html`](../assets/icons.html).\n- Terminal / CLI-window variant → [primitive-terminal.md](references/primitive-terminal.md)\n\n### Background\n\n**Default: clean paper, no dot pattern.** Single `` filled with `paper`. Don't wrap the diagram in a secondary container background — the diagram sits directly on the page.\n\n```svg\n\n```\n\n**Optional: dotted paper variant.** When a long-form editorial diagram benefits from textured ground (essays, hero diagrams on a dedicated page), opt in by adding the `dots` pattern and a second rect:\n\n```svg\n\n \n \n \n\n\n\n```\n\nDon't use the dot pattern when the diagram sits inside a product page, slide, or card — the texture compounds with surrounding chrome and reads as noise.\n\n### Arrow markers (define all three, always)\n\n```svg\n\n \n\n\n \n\n\n \n\n```\n\n| Arrow | Stroke | When |\n|---|---|---|\n| Default | muted `#4f5d75` | Internal, generic |\n| Accent | coral `#eb6c36` | Primary / highlighted / headline |\n| Link-blue | `#2e5aa8` | HTTP/API calls, external systems |\n| Dashed | `stroke-dasharray=\"5,4\"` + any color | Optional, passive, return, async |\n\n**Draw arrows before boxes** so z-order puts lines behind nodes.\n\n### Mandatory connector rules\n\nThese five rules are **non-negotiable**. Run the pre-output checklist (§9) to verify before producing any diagram.\n\n1. **Rounded right-angle (orthogonal) connectors are mandatory.** Never use diagonal `` or straight slanted paths between nodes that don't share an x or y axis. Every bend must be a quarter-arc with `r=8` (or `r=6` minimum for tight layouts). See `references/type-architecture.md` for the elbow-path formula. Reserve plain straight `` only for connections whose endpoints share the same x or y coordinate. Diagonal connectors are an automatic fail.\n\n2. **Label-to-connector margin: 6–10px gap, always.** A label must never sit *on* its arrow — the connector must remain visible. Place the label centered above (or beside, for vertical segments) the line with a **minimum 6px gap** between the bottom of the label's mask rect and the connector stroke. The opaque mask rect prevents the arrow from bleeding through, but the *visible* gap between mask edge and line preserves the reader's ability to trace the connection. If the label is large enough that 6px feels cramped, push it to 8–10px. Never let the mask rect touch or overlap the stroke.\n\n3. **No overlapping connectors.** Two connectors must never share the same stroke path, run parallel on top of each other, or be drawn on top of each other for any segment. When two orthogonal arrows must cross at a single point, apply the **bridge / hop** primitive (see `references/type-architecture.md` § Crossing arrows). When two arrows naturally want to overlap, offset their routing by ≥12px so each line is independently traceable. If you find yourself stacking connectors, redesign the layout — it means two nodes are too close, or the diagram is over budget (split into overview + detail).\n\n4. **Shared edge → fan the attach points.** When two or more connectors enter or exit the *same edge* of a box, each must have its own distinct attach point along that edge — **no two connectors may share a single point on a box**. Spread the attach points evenly along the edge with **≥12px** between adjacent points (8px minimum for very small boxes). Routing rules:\n - For N connectors on an edge of length L, attach point `k` (1..N) sits at offset `L * k / (N + 1)` from the edge's leading corner.\n - When the connectors fan out to destinations on different sides, route each one orthogonally from its own attach point — no merging strokes near the box.\n - When two parallel connectors run in the same direction, keep them ≥12px apart along their entire length, not just at the attach point. Each arrow must remain independently traceable end-to-end.\n\n No connector may hide another. If you can't tell two arrows apart at a glance, the layout has failed.\n\n5. **A connector must not pass behind a box that isn't its source or destination — except when the box is geometrically unavoidable on a direct orthogonal path.** Reroute around intervening boxes by default. The only legitimate exception is when a cross-cutting node (e.g., a footer service, a horizontal layer bar) physically sits between the connector's source and destination on the only straight path between them — for example, a `METRICS` arrow exiting an `Observability` footer bar and rising into a zone above must cross the `Active Directory` footer bar that sits between them. In that exception:\n - The stroke must be **dashed** (e.g., `stroke-dasharray=\"4,3\"`) to signal \"transit, not interaction\" — it tells the reader the intervening box is not an endpoint.\n - The label sits at the **visible end** of the connector (typically near the source) so it doesn't fall behind the intervening box.\n - No marker (arrowhead) may land on the intervening box's edge — the marker resolves at the true destination only.\n\n When in doubt, reroute. The exception exists for the narrow case where rerouting is geometrically impossible, not as a shortcut to avoid layout work.\n\n### Node box — full pattern\n\n```svg\n\n\n\n\n\n\nAPI\n\nNode Name\n\ntech:port\n```\n\n### Arrow labels — always mask, always with margin\n\nEvery arrow label needs an opaque rect behind it. Without one it bleeds through the line. **And the label must sit with a visible gap above the connector — never on top of it.**\n\n```svg\n\n\nWRITE\n```\n\nRules:\n\n- ≤14 characters, all-caps, centered on segment midpoint.\n- **Mandatory 6–10px gap** between the bottom of the mask rect and the arrow stroke. The connector must remain visible — a label that hides its own arrow is a hard fail.\n- Never `writing-mode` vertical.\n- For vertical segments, place the label to the side (not on the line) with the same 6–10px horizontal gap.\n\n### Legend — horizontal strip at the bottom\n\n**Never put the legend inside the diagram area.** Place as a horizontal strip after all nodes, with a hairline separator:\n\n```svg\n\nLEGEND\n\n```\n\nExpand SVG `viewBox` height by ~60px.\n\n---\n\n## 7. Layout & Spacing\n\n### 4px grid\n\n**All values — font sizes, padding, node dimensions, gaps, x/y coords — divisible by 4.** Non-negotiable.\n\n| Category | Allowed values |\n|---|---|\n| Font sizes | 8, 12, 16, 20, 24, 28, 32, 40 |\n| Node width / height | 80, 96, 112, 120, 128, 140, 144, 160, 180, 200, 240, 320 |\n| x / y coordinates | multiples of 4 |\n| Gap between nodes | 20, 24, 32, 40, 48 |\n| Padding inside boxes | 8, 12, 16 |\n| Border radius | 4, 6, 8 |\n\nExempt: stroke widths (0.8, 1, 1.2), opacity values, and the 22×22 dot-pattern.\n\nQuick check: if a coordinate ends in 1, 2, 3, 5, 6, 7, 9 — fix it.\n\n### Complexity budget (per diagram)\n\n| Limit | Rule |\n|---|---|\n| Max nodes | 9 |\n| Max arrows / transitions | 12 |\n| Max coral elements | 2 |\n| Max lifelines (sequence) | 5 |\n| Max combined fragments (sequence) | 1 (default); 2 only if each is single-region `opt`/`loop` |\n| Max `alt` regions (sequence) | 2 |\n| Max fragment nesting (sequence) | 1 |\n| Max lanes (swimlane) | 5 |\n| Max items (quadrant) | 12 |\n| Max entities (ER) | 8 |\n| Max nesting levels (nested) | 6 |\n| Max tree depth | 4 |\n| Max org chart depth | 4 |\n| Max org chart nodes | 12 |\n| Max layers (layer stack) | 6 |\n| Max circles (venn) | 3 |\n| Max layers (pyramid) | 6 |\n| Max radar axes | 5 |\n| Max radar series | 5 |\n| Max focal radar series | 1 |\n| Max bars (bar chart) | 8 |\n| Max series (line chart) | 5 |\n| Max tasks (Gantt) | 12 |\n| Max points (scatter plot) | 30 |\n| Max annotation callouts | 2 |\n\nIf you exceed, split into two diagrams (overview + detail).\n\n### Page layout\n\n1. **Header** — eyebrow (Geist Mono), title (Instrument Serif), optional subtitle (Geist muted).\n2. **Diagram container** — default: **clean, borderless**, no background — the SVG sits directly on the page paper. Optional *framed* variant (for card-heavy layouts or hero placements): `paper-2` bg + 1px `rule` border + 8px radius + `1.5rem` padding + `overflow-x: auto`.\n3. **Summary cards** — 2–3 col grid with *varied* widths (e.g., `1.1fr 1fr 0.9fr`).\n4. **Footer** — colophon in Geist Mono, muted, hairline top border.\n\n---\n\n## 8. Summary Card Pattern\n\nDon't use 3 identical generic cards. Vary the treatment:\n\n```html\n

SECTION LABEL

\n \n

Card Title

Item

\n```\n\nRules:\n\n- `background: #ffffff` (not paper — slight lift without shadow)\n- `border: 1px solid rgba(45,49,66,0.12)`\n- `border-radius: 6px`, `padding: 1.25rem`\n- **No `box-shadow`**\n- Card dots: 7px, `border-radius: 50%` — ink / muted / coral / link / soft variants\n\n---\n\n## 9. Pre-Output Checklist (Taste Gate)\n\nRun before producing any diagram.\n\n**Type fit:**\n\n- [ ] Right type for what I'm showing? (§3 selection guide)\n- [ ] Would a table / paragraph do the same job? (If yes — don't draw.)\n- [ ] Loaded the matching `references/type-*.md`?\n\n**Remove test:**\n\n- [ ] Can I remove any node? (Would a reader still understand?)\n- [ ] Can I merge any two nodes? (Do they always travel together?)\n- [ ] Can I remove any arrow? (Is the relationship obvious from layout?)\n- [ ] Can I remove any label? (Does color or shape already signal it?)\n\n**Signal:**\n\n- [ ] Coral used on ≤2 elements? If more, which actually deserve focal status?\n- [ ] Legend covers every type used — and nothing extra?\n- [ ] Within the type's complexity budget (§7)?\n\n**Technical:**\n\n- [ ] Arrows drawn before boxes?\n- [ ] **Every connector between off-axis nodes uses a rounded right-angle elbow (`r=8`)? No diagonal `` slants?**\n- [ ] **Every arrow label has a visible 6–10px gap above its connector? (Mask rect not touching the stroke.)**\n- [ ] **No two connectors overlap, share a stroke path, or run on top of each other? Crossings use the bridge/hop primitive?**\n- [ ] **When several connectors enter or exit the same edge of a box, each has its own attach point (≥12px apart)? No connector hides another?**\n- [ ] **No connector passes behind a non-endpoint box, except the unavoidable-intervening-box case (§6 rule 5) — and in that case, the stroke is dashed and the label sits at the visible end?**\n- [ ] Every arrow label has an opaque `fill=\"#f5f5f5\"` rect behind it?\n- [ ] Legend is a horizontal bottom strip, not floating?\n- [ ] No vertical `writing-mode` text?\n- [ ] `viewBox` expanded for the legend strip (~60px)?\n- [ ] Every font size, coord, width, height, gap divisible by 4?\n\n**Typography:**\n\n- [ ] Human-readable names in Geist sans, not Geist Mono?\n- [ ] Technical sublabels (ports, commands, URLs) in Geist Mono?\n- [ ] Page title in Instrument Serif?\n- [ ] Annotation callouts (if any) in *italic* Instrument Serif? (see [primitive-annotation.md](references/primitive-annotation.md))\n- [ ] No JetBrains Mono anywhere?\n\n---\n\n## 10. Templates & Variants\n\nEvery diagram ships in three variants (see `assets/`):\n\n| Variant | File pattern | When to use |\n|---|---|---|\n| **Minimal light** (default) | `template.html`, `example-.html` | Screenshot-ready. Diagram + title. Warm paper. |\n| **Minimal dark** | `template-dark.html`, `example--dark.html` | Dark mode sites, slides, high-contrast posts. |\n| **Full editorial** | `template-full.html`, `example--full.html` | Long-form posts where the diagram is the hero. |\n| **Consultant special** (quadrant only) | `example-quadrant-consultant.html` | BCG/McKinsey-style 2×2 scenario matrix. Clinical sans-serif, white bg, bold blue double-ended axes, named scenario cells. See [type-quadrant.md](references/type-quadrant.md#consultant-special-2x2-scenario-matrix). |\n\n**Sketchy variant** (optional, applied to any of the above) — see [primitive-sketchy.md](references/primitive-sketchy.md). SVG turbulence filter wobbles strokes for a hand-drawn feel. Good for essays, not for technical docs.\n\n**Terminal variant** (optional, replaces any of the above) — see [primitive-terminal.md](references/primitive-terminal.md). `template-terminal.html`, `example--terminal.html`. Charcoal-black CLI-window chrome, monospace type, one red-orange accent. Good for dev-tool / CLI-product posts and technical social cards; not brand-tokenized, so skip it for onboarded/brand-matched output.\n\n### To create a new diagram\n\n1. Copy the variant closest to what you want (`template.html` for minimal, `template-full.html` for cards).\n2. Load the matching `references/type-.md` for layout conventions.\n3. Replace the eyebrow, h1, and SVG body.\n4. Run the §9 taste gate.\n\n---\n\n## 11. Output\n\nAlways produce a single self-contained `.html` file:\n\n- Embedded CSS (no external except Google Fonts)\n- Inline SVG (no external images)\n- No JavaScript required\n\nRenders correctly in any modern browser.\n\n### Exporting to PNG / SVG\n\nWhen the user asks to export, save, rasterize, or convert a generated diagram to `.png` or `.svg`, load [`references/export.md`](references/export.md) and follow the procedure there. Both formats deliver the diagram only (the `