[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-copilotkit-svg-diagram-generation":3,"mdc-m3zeot-key":50,"related-repo-copilotkit-svg-diagram-generation":1719,"related-org-copilotkit-svg-diagram-generation":1764},{"slug":4,"name":5,"fn":6,"description":7,"org":8,"tags":12,"stars":24,"repoUrl":25,"updatedAt":26,"license":27,"forks":28,"topics":29,"repo":45,"sourceUrl":48,"mdContent":49},"svg-diagram-generation","SVG Diagram Generation","generate SVG diagrams for system visualization","Generating rich inline SVG diagrams to visually explain systems, processes, architectures, and abstract concepts.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":10},"copilotkit","CopilotKit","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fcopilotkit.png",[13,15,18,21],{"name":10,"slug":9,"type":14},"tag",{"name":16,"slug":17,"type":14},"Diagrams","diagrams",{"name":19,"slug":20,"type":14},"SVG","svg",{"name":22,"slug":23,"type":14},"Design","design",1440,"https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FOpenGenerativeUI","2026-07-12T08:06:38.154791",null,192,[30,31,32,33,34,35,36,37,38,39,40,41,42,43,44],"agent-native","agentic-ai","agentic-visualization","agents","ai-agents","ai-copilot","ai-visualization","assistant-chat-bots","copilot","generative-ui","javascript","llm","open-source","typescript","visualization",{"repoUrl":25,"stars":24,"forks":28,"topics":46,"description":47},[30,31,32,33,34,35,36,37,38,39,40,41,42,43,44],"Open-Source Generative UI Framework","https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FOpenGenerativeUI\u002Ftree\u002FHEAD\u002Fapps\u002Fagent\u002Fskills\u002Fsvg-diagrams","---\nname: \"SVG Diagram Generation\"\ndescription: \"Generating rich inline SVG diagrams to visually explain systems, processes, architectures, and abstract concepts.\"\nallowed-tools: []\n---\n\n# SVG Diagram Generation Skill\n\nYou can generate rich, inline SVG diagrams to visually explain concepts. Use this skill whenever a visual would help the user understand a system, process, architecture, or mechanism better than text alone.\n\n---\n\n## Delivery\n\nDiagrams ship through the `generateSandboxedUi` tool: the SVG markup goes in the `html` parameter, where it streams to the user element by element. SVG presentation attributes (`fill`, `stroke`, `font-size`) carry all styling here — if a diagram needs CSS animation classes, declare them in the `css` parameter, never in a `\u003Cstyle>` block inside `html`. Static diagrams need no `jsFunctions` or `jsExpressions`.\n\n---\n\n## When to Use\n\n- Explaining how something works (load paths, circuits, pipelines, algorithms)\n- Showing architecture or structure (system diagrams, component layouts)\n- Illustrating processes or flows (flowcharts, data flow, decision trees)\n- Building intuition for abstract concepts (attention mechanisms, gradient descent, recursion)\n\n## SVG Setup\n\nAlways use this template:\n\n```svg\n\u003Csvg width=\"100%\" viewBox=\"0 0 680 H\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\n  \u003Cdefs>\n    \u003Cmarker id=\"arrow\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\"\n            markerWidth=\"6\" markerHeight=\"6\" orient=\"auto-start-reverse\">\n      \u003Cpath d=\"M2 1L8 5L2 9\" fill=\"none\" stroke=\"context-stroke\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u002F>\n    \u003C\u002Fmarker>\n  \u003C\u002Fdefs>\n  \u003C!-- Content here -->\n\u003C\u002Fsvg>\n```\n\n- **Width is always 680px** via viewBox. Set `width=\"100%\"` so it scales responsively.\n- **H (height)** = bottom-most element's y + height + 40px padding. Don't guess — compute it.\n- **Safe content area**: x=40 to x=640, y=40 to y=(H-40).\n- **No wrapping divs**, no `\u003Chtml>`, `\u003Chead>`, `\u003Cbody>`, or DOCTYPE.\n- **Background is transparent** — the host provides the background.\n\n---\n\n## Core Design Rules\n\n### Typography\n- **Two sizes only**: 14px for titles\u002Flabels, 12px for subtitles\u002Fdescriptions.\n- **Two weights only**: 400 (regular), 500 (medium\u002Fbold). Never use 600 or 700.\n- **Font**: Use `font-family=\"system-ui, -apple-system, sans-serif\"` or inherit from host.\n- **Always set** `text-anchor=\"middle\"` and `dominant-baseline=\"central\"` for centered text in boxes.\n- **Sentence case always**. Never Title Case or ALL CAPS.\n\n### Text Width Estimation\nAt 14px, each character ~ 8px wide. At 12px, each character ~ 7px wide.\n- \"Load Balancer\" (13 chars) at 14px ~ 104px -> needs rect ~ 140px wide (with padding).\n- Always compute: `rect_width = max(title_chars x 8, subtitle_chars x 7) + 48px padding`.\n\n### Colors (Light\u002FDark Mode Safe)\nUse these semantic color sets that work in both modes:\n\n```\nTeal:    fill=\"#E1F5EE\" stroke=\"#0F6E56\" text=\"#085041\"  (dark: fill=\"#085041\" stroke=\"#5DCAA5\" text=\"#9FE1CB\")\nPurple:  fill=\"#EEEDFE\" stroke=\"#534AB7\" text=\"#3C3489\"  (dark: fill=\"#3C3489\" stroke=\"#AFA9EC\" text=\"#CECBF6\")\nCoral:   fill=\"#FAECE7\" stroke=\"#993C1D\" text=\"#712B13\"  (dark: fill=\"#712B13\" stroke=\"#F0997B\" text=\"#F5C4B3\")\nAmber:   fill=\"#FAEEDA\" stroke=\"#854F0B\" text=\"#633806\"  (dark: fill=\"#633806\" stroke=\"#EF9F27\" text=\"#FAC775\")\nBlue:    fill=\"#E6F1FB\" stroke=\"#185FA5\" text=\"#0C447C\"  (dark: fill=\"#0C447C\" stroke=\"#85B7EB\" text=\"#B5D4F4\")\nGray:    fill=\"#F1EFE8\" stroke=\"#5F5E5A\" text=\"#444441\"  (dark: fill=\"#444441\" stroke=\"#B4B2A9\" text=\"#D3D1C7\")\nRed:     fill=\"#FCEBEB\" stroke=\"#A32D2D\" text=\"#791F1F\"  (dark: fill=\"#791F1F\" stroke=\"#F09595\" text=\"#F7C1C1\")\nGreen:   fill=\"#EAF3DE\" stroke=\"#3B6D11\" text=\"#27500A\"  (dark: fill=\"#27500A\" stroke=\"#97C459\" text=\"#C0DD97\")\nPink:    fill=\"#FBEAF0\" stroke=\"#993556\" text=\"#72243E\"  (dark: fill=\"#72243E\" stroke=\"#ED93B1\" text=\"#F4C0D1\")\n```\n\n**Color meaning, not sequence**: Don't rainbow-cycle. Use 2-3 colors per diagram. Map colors to categories or physical properties (warm = heat\u002Fenergy, cool = calm\u002Fcold, gray = structural\u002Fneutral).\n\nIf you're rendering inside a system that supports CSS variables, prefer:\n- `var(--color-text-primary)` for primary text\n- `var(--color-text-secondary)` for muted text\n- `var(--color-border-tertiary)` for light borders\n\n### Shapes & Layout\n- **Stroke width**: 0.5px for borders, 1.5px for arrows\u002Fconnectors.\n- **Corner radius**: `rx=\"4\"` for subtle rounding, `rx=\"8\"` for emphasized. `rx=\"20\"` for large containers.\n- **Spacing**: 60px minimum between boxes, 24px padding inside boxes, 12px text-to-edge clearance.\n- **Single-line box**: 44px tall. **Two-line box**: 56px tall.\n- **Max 4-5 nodes per row** at 680px width. If more, split into multiple diagrams.\n- **All connectors need `fill=\"none\"`** — SVG defaults fill to black, which turns paths into black blobs.\n\n---\n\n## Component Patterns\n\n### Single-Line Node\n```svg\n\u003Cg>\n  \u003Crect x=\"100\" y=\"20\" width=\"180\" height=\"44\" rx=\"8\"\n        fill=\"#EEEDFE\" stroke=\"#534AB7\" stroke-width=\"0.5\"\u002F>\n  \u003Ctext x=\"190\" y=\"42\" text-anchor=\"middle\" dominant-baseline=\"central\"\n        font-size=\"14\" font-weight=\"500\" fill=\"#3C3489\">Node title\u003C\u002Ftext>\n\u003C\u002Fg>\n```\n\n### Two-Line Node\n```svg\n\u003Cg>\n  \u003Crect x=\"100\" y=\"20\" width=\"200\" height=\"56\" rx=\"8\"\n        fill=\"#E6F1FB\" stroke=\"#185FA5\" stroke-width=\"0.5\"\u002F>\n  \u003Ctext x=\"200\" y=\"38\" text-anchor=\"middle\" dominant-baseline=\"central\"\n        font-size=\"14\" font-weight=\"500\" fill=\"#0C447C\">Title\u003C\u002Ftext>\n  \u003Ctext x=\"200\" y=\"56\" text-anchor=\"middle\" dominant-baseline=\"central\"\n        font-size=\"12\" fill=\"#185FA5\">Short subtitle\u003C\u002Ftext>\n\u003C\u002Fg>\n```\n\n### Arrow Connector\n```svg\n\u003Cline x1=\"200\" y1=\"76\" x2=\"200\" y2=\"120\"\n      stroke=\"#534AB7\" stroke-width=\"1.5\" marker-end=\"url(#arrow)\"\u002F>\n```\n\n### Dashed Flow Indicator\n```svg\n\u003Cline x1=\"200\" y1=\"76\" x2=\"200\" y2=\"120\"\n      stroke=\"#534AB7\" stroke-width=\"1.5\" stroke-dasharray=\"4 3\"\u002F>\n```\n\n### Leader Line with Label (for annotations)\n```svg\n\u003Cline x1=\"440\" y1=\"100\" x2=\"500\" y2=\"130\"\n      stroke=\"currentColor\" stroke-width=\"0.5\" stroke-dasharray=\"4 4\" opacity=\"0.5\"\u002F>\n\u003Ccircle cx=\"440\" cy=\"100\" r=\"2\" fill=\"currentColor\" opacity=\"0.5\"\u002F>\n\u003Ctext x=\"506\" y=\"134\" font-size=\"12\" fill=\"currentColor\" opacity=\"0.7\">Annotation text\u003C\u002Ftext>\n```\n\n### Large Container (for structural diagrams)\n```svg\n\u003Crect x=\"80\" y=\"40\" width=\"520\" height=\"300\" rx=\"20\"\n      fill=\"#E1F5EE\" stroke=\"#0F6E56\" stroke-width=\"0.5\"\u002F>\n\u003Ctext x=\"340\" y=\"68\" text-anchor=\"middle\"\n      font-size=\"14\" font-weight=\"500\" fill=\"#085041\">Container name\u003C\u002Ftext>\n```\n\n---\n\n## Diagram Types & When to Use Each\n\n### 1. Flowchart\n**When**: Sequential processes, decision trees, pipelines.\n**Layout**: Top-to-bottom or left-to-right. Single direction only.\n**Rules**:\n- Arrows must never cross unrelated boxes. Route around with L-bends if needed.\n- Keep all same-type boxes the same height.\n- Max 4-5 nodes per diagram. Break complex flows into multiple diagrams.\n\n### 2. Structural Diagram\n**When**: Containment matters — things inside other things (architecture, org charts, system components).\n**Layout**: Nested rectangles. Outer = container, inner = regions.\n**Rules**:\n- Max 2-3 nesting levels.\n- 20px minimum padding inside every container.\n- Use different color ramps for parent vs child to show hierarchy.\n\n### 3. Illustrative Diagram\n**When**: Building intuition. \"How does X actually work?\"\n**Layout**: Freeform — follows the subject's natural geometry.\n**Rules**:\n- Shapes can be freeform (paths, ellipses, polygons), not just rects.\n- Color encodes intensity, not category (warm = active, cool = dormant).\n- Overlap shapes for depth, but never let strokes cross text.\n- Labels go in margins with leader lines pointing to the relevant part.\n\n---\n\n## Critical Checks Before Finalizing\n\n1. **ViewBox height**: Find your lowest element (max y + height). Set H = that + 40px.\n2. **No content past x=640 or below y=(H-40)**.\n3. **Text fits in boxes**: `(char_count x 8) + 48 \u003C rect_width` for 14px text.\n4. **No arrows through boxes**: Trace every line's path — if it crosses a rect, reroute.\n5. **All `\u003Cpath>` connectors have `fill=\"none\"`**.\n6. **All text has appropriate fill color** — never rely on inheritance (SVG defaults to black).\n7. **Colors work in dark mode**: If using hardcoded colors, provide both light and dark variants. If using CSS variables, you're fine.\n\n---\n\n## Multi-Diagram Approach\n\nFor complex topics, use multiple smaller SVGs instead of one dense one:\n- Each SVG should have 3-5 nodes max.\n- Write explanatory text between diagrams.\n- First diagram = overview, subsequent = zoom into subsections.\n- Never promise diagrams you don't deliver.\n\n---\n\n## Example: Simple 3-Step Flow\n\n```svg\n\u003Csvg width=\"100%\" viewBox=\"0 0 680 260\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\n  \u003Cdefs>\n    \u003Cmarker id=\"arrow\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\"\n            markerWidth=\"6\" markerHeight=\"6\" orient=\"auto-start-reverse\">\n      \u003Cpath d=\"M2 1L8 5L2 9\" fill=\"none\" stroke=\"context-stroke\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u002F>\n    \u003C\u002Fmarker>\n  \u003C\u002Fdefs>\n\n  \u003C!-- Step 1 -->\n  \u003Crect x=\"230\" y=\"20\" width=\"220\" height=\"56\" rx=\"8\"\n        fill=\"#E1F5EE\" stroke=\"#0F6E56\" stroke-width=\"0.5\"\u002F>\n  \u003Ctext x=\"340\" y=\"38\" text-anchor=\"middle\" dominant-baseline=\"central\"\n        font-size=\"14\" font-weight=\"500\" fill=\"#085041\">User request\u003C\u002Ftext>\n  \u003Ctext x=\"340\" y=\"56\" text-anchor=\"middle\" dominant-baseline=\"central\"\n        font-size=\"12\" fill=\"#0F6E56\">HTTP POST \u002Fapi\u002Fdata\u003C\u002Ftext>\n\n  \u003C!-- Arrow 1->2 -->\n  \u003Cline x1=\"340\" y1=\"76\" x2=\"340\" y2=\"100\" stroke=\"#534AB7\"\n        stroke-width=\"1.5\" marker-end=\"url(#arrow)\"\u002F>\n\n  \u003C!-- Step 2 -->\n  \u003Crect x=\"230\" y=\"106\" width=\"220\" height=\"56\" rx=\"8\"\n        fill=\"#EEEDFE\" stroke=\"#534AB7\" stroke-width=\"0.5\"\u002F>\n  \u003Ctext x=\"340\" y=\"124\" text-anchor=\"middle\" dominant-baseline=\"central\"\n        font-size=\"14\" font-weight=\"500\" fill=\"#3C3489\">Server processing\u003C\u002Ftext>\n  \u003Ctext x=\"340\" y=\"142\" text-anchor=\"middle\" dominant-baseline=\"central\"\n        font-size=\"12\" fill=\"#534AB7\">Validate and transform\u003C\u002Ftext>\n\n  \u003C!-- Arrow 2->3 -->\n  \u003Cline x1=\"340\" y1=\"162\" x2=\"340\" y2=\"186\" stroke=\"#854F0B\"\n        stroke-width=\"1.5\" marker-end=\"url(#arrow)\"\u002F>\n\n  \u003C!-- Step 3 -->\n  \u003Crect x=\"230\" y=\"192\" width=\"220\" height=\"56\" rx=\"8\"\n        fill=\"#FAEEDA\" stroke=\"#854F0B\" stroke-width=\"0.5\"\u002F>\n  \u003Ctext x=\"340\" y=\"210\" text-anchor=\"middle\" dominant-baseline=\"central\"\n        font-size=\"14\" font-weight=\"500\" fill=\"#633806\">Database write\u003C\u002Ftext>\n  \u003Ctext x=\"340\" y=\"228\" text-anchor=\"middle\" dominant-baseline=\"central\"\n        font-size=\"12\" fill=\"#854F0B\">INSERT into table\u003C\u002Ftext>\n\u003C\u002Fsvg>\n```\n\n---\n\n## Tips for Great Diagrams\n\n- **Less is more**: A clean 4-node diagram teaches better than a cramped 12-node one.\n- **Color = meaning**: Warm colors for active\u002Fhot\u002Fimportant, cool for passive\u002Fcold\u002Fsecondary, gray for structural.\n- **Streaming effect**: Since SVGs render top-to-bottom as tokens arrive, structure your elements top-down for a natural build-up animation.\n- **Annotations on the side**: Put explanatory labels in the right margin (x > 560) with leader lines pointing to the relevant element.\n- **Consistent heights**: All boxes of the same type should be the same height.\n- **Whitespace is your friend**: Don't fill every pixel. Breathing room makes diagrams readable.\n",{"data":51,"body":53},{"name":5,"description":7,"allowed-tools":52},[],{"type":54,"children":55},"root",[56,65,71,75,82,166,169,175,200,206,211,313,397,400,406,413,490,496,501,521,527,532,542,552,557,593,599,699,702,708,714,769,775,844,850,873,879,901,907,946,952,991,994,1000,1006,1030,1048,1054,1074,1092,1098,1118,1141,1144,1150,1242,1245,1251,1256,1279,1282,1288,1641,1644,1650,1713],{"type":57,"tag":58,"props":59,"children":61},"element","h1",{"id":60},"svg-diagram-generation-skill",[62],{"type":63,"value":64},"text","SVG Diagram Generation Skill",{"type":57,"tag":66,"props":67,"children":68},"p",{},[69],{"type":63,"value":70},"You can generate rich, inline SVG diagrams to visually explain concepts. Use this skill whenever a visual would help the user understand a system, process, architecture, or mechanism better than text alone.",{"type":57,"tag":72,"props":73,"children":74},"hr",{},[],{"type":57,"tag":76,"props":77,"children":79},"h2",{"id":78},"delivery",[80],{"type":63,"value":81},"Delivery",{"type":57,"tag":66,"props":83,"children":84},{},[85,87,94,96,102,104,110,112,118,119,125,127,133,135,141,143,148,150,156,158,164],{"type":63,"value":86},"Diagrams ship through the ",{"type":57,"tag":88,"props":89,"children":91},"code",{"className":90},[],[92],{"type":63,"value":93},"generateSandboxedUi",{"type":63,"value":95}," tool: the SVG markup goes in the ",{"type":57,"tag":88,"props":97,"children":99},{"className":98},[],[100],{"type":63,"value":101},"html",{"type":63,"value":103}," parameter, where it streams to the user element by element. SVG presentation attributes (",{"type":57,"tag":88,"props":105,"children":107},{"className":106},[],[108],{"type":63,"value":109},"fill",{"type":63,"value":111},", ",{"type":57,"tag":88,"props":113,"children":115},{"className":114},[],[116],{"type":63,"value":117},"stroke",{"type":63,"value":111},{"type":57,"tag":88,"props":120,"children":122},{"className":121},[],[123],{"type":63,"value":124},"font-size",{"type":63,"value":126},") carry all styling here — if a diagram needs CSS animation classes, declare them in the ",{"type":57,"tag":88,"props":128,"children":130},{"className":129},[],[131],{"type":63,"value":132},"css",{"type":63,"value":134}," parameter, never in a ",{"type":57,"tag":88,"props":136,"children":138},{"className":137},[],[139],{"type":63,"value":140},"\u003Cstyle>",{"type":63,"value":142}," block inside ",{"type":57,"tag":88,"props":144,"children":146},{"className":145},[],[147],{"type":63,"value":101},{"type":63,"value":149},". Static diagrams need no ",{"type":57,"tag":88,"props":151,"children":153},{"className":152},[],[154],{"type":63,"value":155},"jsFunctions",{"type":63,"value":157}," or ",{"type":57,"tag":88,"props":159,"children":161},{"className":160},[],[162],{"type":63,"value":163},"jsExpressions",{"type":63,"value":165},".",{"type":57,"tag":72,"props":167,"children":168},{},[],{"type":57,"tag":76,"props":170,"children":172},{"id":171},"when-to-use",[173],{"type":63,"value":174},"When to Use",{"type":57,"tag":176,"props":177,"children":178},"ul",{},[179,185,190,195],{"type":57,"tag":180,"props":181,"children":182},"li",{},[183],{"type":63,"value":184},"Explaining how something works (load paths, circuits, pipelines, algorithms)",{"type":57,"tag":180,"props":186,"children":187},{},[188],{"type":63,"value":189},"Showing architecture or structure (system diagrams, component layouts)",{"type":57,"tag":180,"props":191,"children":192},{},[193],{"type":63,"value":194},"Illustrating processes or flows (flowcharts, data flow, decision trees)",{"type":57,"tag":180,"props":196,"children":197},{},[198],{"type":63,"value":199},"Building intuition for abstract concepts (attention mechanisms, gradient descent, recursion)",{"type":57,"tag":76,"props":201,"children":203},{"id":202},"svg-setup",[204],{"type":63,"value":205},"SVG Setup",{"type":57,"tag":66,"props":207,"children":208},{},[209],{"type":63,"value":210},"Always use this template:",{"type":57,"tag":212,"props":213,"children":217},"pre",{"className":214,"code":215,"language":20,"meta":216,"style":216},"language-svg shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Csvg width=\"100%\" viewBox=\"0 0 680 H\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\n  \u003Cdefs>\n    \u003Cmarker id=\"arrow\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\"\n            markerWidth=\"6\" markerHeight=\"6\" orient=\"auto-start-reverse\">\n      \u003Cpath d=\"M2 1L8 5L2 9\" fill=\"none\" stroke=\"context-stroke\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u002F>\n    \u003C\u002Fmarker>\n  \u003C\u002Fdefs>\n  \u003C!-- Content here -->\n\u003C\u002Fsvg>\n","",[218],{"type":57,"tag":88,"props":219,"children":220},{"__ignoreMap":216},[221,232,241,250,259,268,277,286,295,304],{"type":57,"tag":222,"props":223,"children":226},"span",{"class":224,"line":225},"line",1,[227],{"type":57,"tag":222,"props":228,"children":229},{},[230],{"type":63,"value":231},"\u003Csvg width=\"100%\" viewBox=\"0 0 680 H\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\n",{"type":57,"tag":222,"props":233,"children":235},{"class":224,"line":234},2,[236],{"type":57,"tag":222,"props":237,"children":238},{},[239],{"type":63,"value":240},"  \u003Cdefs>\n",{"type":57,"tag":222,"props":242,"children":244},{"class":224,"line":243},3,[245],{"type":57,"tag":222,"props":246,"children":247},{},[248],{"type":63,"value":249},"    \u003Cmarker id=\"arrow\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\"\n",{"type":57,"tag":222,"props":251,"children":253},{"class":224,"line":252},4,[254],{"type":57,"tag":222,"props":255,"children":256},{},[257],{"type":63,"value":258},"            markerWidth=\"6\" markerHeight=\"6\" orient=\"auto-start-reverse\">\n",{"type":57,"tag":222,"props":260,"children":262},{"class":224,"line":261},5,[263],{"type":57,"tag":222,"props":264,"children":265},{},[266],{"type":63,"value":267},"      \u003Cpath d=\"M2 1L8 5L2 9\" fill=\"none\" stroke=\"context-stroke\"\n",{"type":57,"tag":222,"props":269,"children":271},{"class":224,"line":270},6,[272],{"type":57,"tag":222,"props":273,"children":274},{},[275],{"type":63,"value":276},"            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u002F>\n",{"type":57,"tag":222,"props":278,"children":280},{"class":224,"line":279},7,[281],{"type":57,"tag":222,"props":282,"children":283},{},[284],{"type":63,"value":285},"    \u003C\u002Fmarker>\n",{"type":57,"tag":222,"props":287,"children":289},{"class":224,"line":288},8,[290],{"type":57,"tag":222,"props":291,"children":292},{},[293],{"type":63,"value":294},"  \u003C\u002Fdefs>\n",{"type":57,"tag":222,"props":296,"children":298},{"class":224,"line":297},9,[299],{"type":57,"tag":222,"props":300,"children":301},{},[302],{"type":63,"value":303},"  \u003C!-- Content here -->\n",{"type":57,"tag":222,"props":305,"children":307},{"class":224,"line":306},10,[308],{"type":57,"tag":222,"props":309,"children":310},{},[311],{"type":63,"value":312},"\u003C\u002Fsvg>\n",{"type":57,"tag":176,"props":314,"children":315},{},[316,335,345,355,387],{"type":57,"tag":180,"props":317,"children":318},{},[319,325,327,333],{"type":57,"tag":320,"props":321,"children":322},"strong",{},[323],{"type":63,"value":324},"Width is always 680px",{"type":63,"value":326}," via viewBox. Set ",{"type":57,"tag":88,"props":328,"children":330},{"className":329},[],[331],{"type":63,"value":332},"width=\"100%\"",{"type":63,"value":334}," so it scales responsively.",{"type":57,"tag":180,"props":336,"children":337},{},[338,343],{"type":57,"tag":320,"props":339,"children":340},{},[341],{"type":63,"value":342},"H (height)",{"type":63,"value":344}," = bottom-most element's y + height + 40px padding. Don't guess — compute it.",{"type":57,"tag":180,"props":346,"children":347},{},[348,353],{"type":57,"tag":320,"props":349,"children":350},{},[351],{"type":63,"value":352},"Safe content area",{"type":63,"value":354},": x=40 to x=640, y=40 to y=(H-40).",{"type":57,"tag":180,"props":356,"children":357},{},[358,363,365,371,372,378,379,385],{"type":57,"tag":320,"props":359,"children":360},{},[361],{"type":63,"value":362},"No wrapping divs",{"type":63,"value":364},", no ",{"type":57,"tag":88,"props":366,"children":368},{"className":367},[],[369],{"type":63,"value":370},"\u003Chtml>",{"type":63,"value":111},{"type":57,"tag":88,"props":373,"children":375},{"className":374},[],[376],{"type":63,"value":377},"\u003Chead>",{"type":63,"value":111},{"type":57,"tag":88,"props":380,"children":382},{"className":381},[],[383],{"type":63,"value":384},"\u003Cbody>",{"type":63,"value":386},", or DOCTYPE.",{"type":57,"tag":180,"props":388,"children":389},{},[390,395],{"type":57,"tag":320,"props":391,"children":392},{},[393],{"type":63,"value":394},"Background is transparent",{"type":63,"value":396}," — the host provides the background.",{"type":57,"tag":72,"props":398,"children":399},{},[],{"type":57,"tag":76,"props":401,"children":403},{"id":402},"core-design-rules",[404],{"type":63,"value":405},"Core Design Rules",{"type":57,"tag":407,"props":408,"children":410},"h3",{"id":409},"typography",[411],{"type":63,"value":412},"Typography",{"type":57,"tag":176,"props":414,"children":415},{},[416,426,436,454,480],{"type":57,"tag":180,"props":417,"children":418},{},[419,424],{"type":57,"tag":320,"props":420,"children":421},{},[422],{"type":63,"value":423},"Two sizes only",{"type":63,"value":425},": 14px for titles\u002Flabels, 12px for subtitles\u002Fdescriptions.",{"type":57,"tag":180,"props":427,"children":428},{},[429,434],{"type":57,"tag":320,"props":430,"children":431},{},[432],{"type":63,"value":433},"Two weights only",{"type":63,"value":435},": 400 (regular), 500 (medium\u002Fbold). Never use 600 or 700.",{"type":57,"tag":180,"props":437,"children":438},{},[439,444,446,452],{"type":57,"tag":320,"props":440,"children":441},{},[442],{"type":63,"value":443},"Font",{"type":63,"value":445},": Use ",{"type":57,"tag":88,"props":447,"children":449},{"className":448},[],[450],{"type":63,"value":451},"font-family=\"system-ui, -apple-system, sans-serif\"",{"type":63,"value":453}," or inherit from host.",{"type":57,"tag":180,"props":455,"children":456},{},[457,462,464,470,472,478],{"type":57,"tag":320,"props":458,"children":459},{},[460],{"type":63,"value":461},"Always set",{"type":63,"value":463}," ",{"type":57,"tag":88,"props":465,"children":467},{"className":466},[],[468],{"type":63,"value":469},"text-anchor=\"middle\"",{"type":63,"value":471}," and ",{"type":57,"tag":88,"props":473,"children":475},{"className":474},[],[476],{"type":63,"value":477},"dominant-baseline=\"central\"",{"type":63,"value":479}," for centered text in boxes.",{"type":57,"tag":180,"props":481,"children":482},{},[483,488],{"type":57,"tag":320,"props":484,"children":485},{},[486],{"type":63,"value":487},"Sentence case always",{"type":63,"value":489},". Never Title Case or ALL CAPS.",{"type":57,"tag":407,"props":491,"children":493},{"id":492},"text-width-estimation",[494],{"type":63,"value":495},"Text Width Estimation",{"type":57,"tag":66,"props":497,"children":498},{},[499],{"type":63,"value":500},"At 14px, each character ~ 8px wide. At 12px, each character ~ 7px wide.",{"type":57,"tag":176,"props":502,"children":503},{},[504,509],{"type":57,"tag":180,"props":505,"children":506},{},[507],{"type":63,"value":508},"\"Load Balancer\" (13 chars) at 14px ~ 104px -> needs rect ~ 140px wide (with padding).",{"type":57,"tag":180,"props":510,"children":511},{},[512,514,520],{"type":63,"value":513},"Always compute: ",{"type":57,"tag":88,"props":515,"children":517},{"className":516},[],[518],{"type":63,"value":519},"rect_width = max(title_chars x 8, subtitle_chars x 7) + 48px padding",{"type":63,"value":165},{"type":57,"tag":407,"props":522,"children":524},{"id":523},"colors-lightdark-mode-safe",[525],{"type":63,"value":526},"Colors (Light\u002FDark Mode Safe)",{"type":57,"tag":66,"props":528,"children":529},{},[530],{"type":63,"value":531},"Use these semantic color sets that work in both modes:",{"type":57,"tag":212,"props":533,"children":537},{"className":534,"code":536,"language":63},[535],"language-text","Teal:    fill=\"#E1F5EE\" stroke=\"#0F6E56\" text=\"#085041\"  (dark: fill=\"#085041\" stroke=\"#5DCAA5\" text=\"#9FE1CB\")\nPurple:  fill=\"#EEEDFE\" stroke=\"#534AB7\" text=\"#3C3489\"  (dark: fill=\"#3C3489\" stroke=\"#AFA9EC\" text=\"#CECBF6\")\nCoral:   fill=\"#FAECE7\" stroke=\"#993C1D\" text=\"#712B13\"  (dark: fill=\"#712B13\" stroke=\"#F0997B\" text=\"#F5C4B3\")\nAmber:   fill=\"#FAEEDA\" stroke=\"#854F0B\" text=\"#633806\"  (dark: fill=\"#633806\" stroke=\"#EF9F27\" text=\"#FAC775\")\nBlue:    fill=\"#E6F1FB\" stroke=\"#185FA5\" text=\"#0C447C\"  (dark: fill=\"#0C447C\" stroke=\"#85B7EB\" text=\"#B5D4F4\")\nGray:    fill=\"#F1EFE8\" stroke=\"#5F5E5A\" text=\"#444441\"  (dark: fill=\"#444441\" stroke=\"#B4B2A9\" text=\"#D3D1C7\")\nRed:     fill=\"#FCEBEB\" stroke=\"#A32D2D\" text=\"#791F1F\"  (dark: fill=\"#791F1F\" stroke=\"#F09595\" text=\"#F7C1C1\")\nGreen:   fill=\"#EAF3DE\" stroke=\"#3B6D11\" text=\"#27500A\"  (dark: fill=\"#27500A\" stroke=\"#97C459\" text=\"#C0DD97\")\nPink:    fill=\"#FBEAF0\" stroke=\"#993556\" text=\"#72243E\"  (dark: fill=\"#72243E\" stroke=\"#ED93B1\" text=\"#F4C0D1\")\n",[538],{"type":57,"tag":88,"props":539,"children":540},{"__ignoreMap":216},[541],{"type":63,"value":536},{"type":57,"tag":66,"props":543,"children":544},{},[545,550],{"type":57,"tag":320,"props":546,"children":547},{},[548],{"type":63,"value":549},"Color meaning, not sequence",{"type":63,"value":551},": Don't rainbow-cycle. Use 2-3 colors per diagram. Map colors to categories or physical properties (warm = heat\u002Fenergy, cool = calm\u002Fcold, gray = structural\u002Fneutral).",{"type":57,"tag":66,"props":553,"children":554},{},[555],{"type":63,"value":556},"If you're rendering inside a system that supports CSS variables, prefer:",{"type":57,"tag":176,"props":558,"children":559},{},[560,571,582],{"type":57,"tag":180,"props":561,"children":562},{},[563,569],{"type":57,"tag":88,"props":564,"children":566},{"className":565},[],[567],{"type":63,"value":568},"var(--color-text-primary)",{"type":63,"value":570}," for primary text",{"type":57,"tag":180,"props":572,"children":573},{},[574,580],{"type":57,"tag":88,"props":575,"children":577},{"className":576},[],[578],{"type":63,"value":579},"var(--color-text-secondary)",{"type":63,"value":581}," for muted text",{"type":57,"tag":180,"props":583,"children":584},{},[585,591],{"type":57,"tag":88,"props":586,"children":588},{"className":587},[],[589],{"type":63,"value":590},"var(--color-border-tertiary)",{"type":63,"value":592}," for light borders",{"type":57,"tag":407,"props":594,"children":596},{"id":595},"shapes-layout",[597],{"type":63,"value":598},"Shapes & Layout",{"type":57,"tag":176,"props":600,"children":601},{},[602,612,646,656,673,683],{"type":57,"tag":180,"props":603,"children":604},{},[605,610],{"type":57,"tag":320,"props":606,"children":607},{},[608],{"type":63,"value":609},"Stroke width",{"type":63,"value":611},": 0.5px for borders, 1.5px for arrows\u002Fconnectors.",{"type":57,"tag":180,"props":613,"children":614},{},[615,620,622,628,630,636,638,644],{"type":57,"tag":320,"props":616,"children":617},{},[618],{"type":63,"value":619},"Corner radius",{"type":63,"value":621},": ",{"type":57,"tag":88,"props":623,"children":625},{"className":624},[],[626],{"type":63,"value":627},"rx=\"4\"",{"type":63,"value":629}," for subtle rounding, ",{"type":57,"tag":88,"props":631,"children":633},{"className":632},[],[634],{"type":63,"value":635},"rx=\"8\"",{"type":63,"value":637}," for emphasized. ",{"type":57,"tag":88,"props":639,"children":641},{"className":640},[],[642],{"type":63,"value":643},"rx=\"20\"",{"type":63,"value":645}," for large containers.",{"type":57,"tag":180,"props":647,"children":648},{},[649,654],{"type":57,"tag":320,"props":650,"children":651},{},[652],{"type":63,"value":653},"Spacing",{"type":63,"value":655},": 60px minimum between boxes, 24px padding inside boxes, 12px text-to-edge clearance.",{"type":57,"tag":180,"props":657,"children":658},{},[659,664,666,671],{"type":57,"tag":320,"props":660,"children":661},{},[662],{"type":63,"value":663},"Single-line box",{"type":63,"value":665},": 44px tall. ",{"type":57,"tag":320,"props":667,"children":668},{},[669],{"type":63,"value":670},"Two-line box",{"type":63,"value":672},": 56px tall.",{"type":57,"tag":180,"props":674,"children":675},{},[676,681],{"type":57,"tag":320,"props":677,"children":678},{},[679],{"type":63,"value":680},"Max 4-5 nodes per row",{"type":63,"value":682}," at 680px width. If more, split into multiple diagrams.",{"type":57,"tag":180,"props":684,"children":685},{},[686,697],{"type":57,"tag":320,"props":687,"children":688},{},[689,691],{"type":63,"value":690},"All connectors need ",{"type":57,"tag":88,"props":692,"children":694},{"className":693},[],[695],{"type":63,"value":696},"fill=\"none\"",{"type":63,"value":698}," — SVG defaults fill to black, which turns paths into black blobs.",{"type":57,"tag":72,"props":700,"children":701},{},[],{"type":57,"tag":76,"props":703,"children":705},{"id":704},"component-patterns",[706],{"type":63,"value":707},"Component Patterns",{"type":57,"tag":407,"props":709,"children":711},{"id":710},"single-line-node",[712],{"type":63,"value":713},"Single-Line Node",{"type":57,"tag":212,"props":715,"children":717},{"className":214,"code":716,"language":20,"meta":216,"style":216},"\u003Cg>\n  \u003Crect x=\"100\" y=\"20\" width=\"180\" height=\"44\" rx=\"8\"\n        fill=\"#EEEDFE\" stroke=\"#534AB7\" stroke-width=\"0.5\"\u002F>\n  \u003Ctext x=\"190\" y=\"42\" text-anchor=\"middle\" dominant-baseline=\"central\"\n        font-size=\"14\" font-weight=\"500\" fill=\"#3C3489\">Node title\u003C\u002Ftext>\n\u003C\u002Fg>\n",[718],{"type":57,"tag":88,"props":719,"children":720},{"__ignoreMap":216},[721,729,737,745,753,761],{"type":57,"tag":222,"props":722,"children":723},{"class":224,"line":225},[724],{"type":57,"tag":222,"props":725,"children":726},{},[727],{"type":63,"value":728},"\u003Cg>\n",{"type":57,"tag":222,"props":730,"children":731},{"class":224,"line":234},[732],{"type":57,"tag":222,"props":733,"children":734},{},[735],{"type":63,"value":736},"  \u003Crect x=\"100\" y=\"20\" width=\"180\" height=\"44\" rx=\"8\"\n",{"type":57,"tag":222,"props":738,"children":739},{"class":224,"line":243},[740],{"type":57,"tag":222,"props":741,"children":742},{},[743],{"type":63,"value":744},"        fill=\"#EEEDFE\" stroke=\"#534AB7\" stroke-width=\"0.5\"\u002F>\n",{"type":57,"tag":222,"props":746,"children":747},{"class":224,"line":252},[748],{"type":57,"tag":222,"props":749,"children":750},{},[751],{"type":63,"value":752},"  \u003Ctext x=\"190\" y=\"42\" text-anchor=\"middle\" dominant-baseline=\"central\"\n",{"type":57,"tag":222,"props":754,"children":755},{"class":224,"line":261},[756],{"type":57,"tag":222,"props":757,"children":758},{},[759],{"type":63,"value":760},"        font-size=\"14\" font-weight=\"500\" fill=\"#3C3489\">Node title\u003C\u002Ftext>\n",{"type":57,"tag":222,"props":762,"children":763},{"class":224,"line":270},[764],{"type":57,"tag":222,"props":765,"children":766},{},[767],{"type":63,"value":768},"\u003C\u002Fg>\n",{"type":57,"tag":407,"props":770,"children":772},{"id":771},"two-line-node",[773],{"type":63,"value":774},"Two-Line Node",{"type":57,"tag":212,"props":776,"children":778},{"className":214,"code":777,"language":20,"meta":216,"style":216},"\u003Cg>\n  \u003Crect x=\"100\" y=\"20\" width=\"200\" height=\"56\" rx=\"8\"\n        fill=\"#E6F1FB\" stroke=\"#185FA5\" stroke-width=\"0.5\"\u002F>\n  \u003Ctext x=\"200\" y=\"38\" text-anchor=\"middle\" dominant-baseline=\"central\"\n        font-size=\"14\" font-weight=\"500\" fill=\"#0C447C\">Title\u003C\u002Ftext>\n  \u003Ctext x=\"200\" y=\"56\" text-anchor=\"middle\" dominant-baseline=\"central\"\n        font-size=\"12\" fill=\"#185FA5\">Short subtitle\u003C\u002Ftext>\n\u003C\u002Fg>\n",[779],{"type":57,"tag":88,"props":780,"children":781},{"__ignoreMap":216},[782,789,797,805,813,821,829,837],{"type":57,"tag":222,"props":783,"children":784},{"class":224,"line":225},[785],{"type":57,"tag":222,"props":786,"children":787},{},[788],{"type":63,"value":728},{"type":57,"tag":222,"props":790,"children":791},{"class":224,"line":234},[792],{"type":57,"tag":222,"props":793,"children":794},{},[795],{"type":63,"value":796},"  \u003Crect x=\"100\" y=\"20\" width=\"200\" height=\"56\" rx=\"8\"\n",{"type":57,"tag":222,"props":798,"children":799},{"class":224,"line":243},[800],{"type":57,"tag":222,"props":801,"children":802},{},[803],{"type":63,"value":804},"        fill=\"#E6F1FB\" stroke=\"#185FA5\" stroke-width=\"0.5\"\u002F>\n",{"type":57,"tag":222,"props":806,"children":807},{"class":224,"line":252},[808],{"type":57,"tag":222,"props":809,"children":810},{},[811],{"type":63,"value":812},"  \u003Ctext x=\"200\" y=\"38\" text-anchor=\"middle\" dominant-baseline=\"central\"\n",{"type":57,"tag":222,"props":814,"children":815},{"class":224,"line":261},[816],{"type":57,"tag":222,"props":817,"children":818},{},[819],{"type":63,"value":820},"        font-size=\"14\" font-weight=\"500\" fill=\"#0C447C\">Title\u003C\u002Ftext>\n",{"type":57,"tag":222,"props":822,"children":823},{"class":224,"line":270},[824],{"type":57,"tag":222,"props":825,"children":826},{},[827],{"type":63,"value":828},"  \u003Ctext x=\"200\" y=\"56\" text-anchor=\"middle\" dominant-baseline=\"central\"\n",{"type":57,"tag":222,"props":830,"children":831},{"class":224,"line":279},[832],{"type":57,"tag":222,"props":833,"children":834},{},[835],{"type":63,"value":836},"        font-size=\"12\" fill=\"#185FA5\">Short subtitle\u003C\u002Ftext>\n",{"type":57,"tag":222,"props":838,"children":839},{"class":224,"line":288},[840],{"type":57,"tag":222,"props":841,"children":842},{},[843],{"type":63,"value":768},{"type":57,"tag":407,"props":845,"children":847},{"id":846},"arrow-connector",[848],{"type":63,"value":849},"Arrow Connector",{"type":57,"tag":212,"props":851,"children":853},{"className":214,"code":852,"language":20,"meta":216,"style":216},"\u003Cline x1=\"200\" y1=\"76\" x2=\"200\" y2=\"120\"\n      stroke=\"#534AB7\" stroke-width=\"1.5\" marker-end=\"url(#arrow)\"\u002F>\n",[854],{"type":57,"tag":88,"props":855,"children":856},{"__ignoreMap":216},[857,865],{"type":57,"tag":222,"props":858,"children":859},{"class":224,"line":225},[860],{"type":57,"tag":222,"props":861,"children":862},{},[863],{"type":63,"value":864},"\u003Cline x1=\"200\" y1=\"76\" x2=\"200\" y2=\"120\"\n",{"type":57,"tag":222,"props":866,"children":867},{"class":224,"line":234},[868],{"type":57,"tag":222,"props":869,"children":870},{},[871],{"type":63,"value":872},"      stroke=\"#534AB7\" stroke-width=\"1.5\" marker-end=\"url(#arrow)\"\u002F>\n",{"type":57,"tag":407,"props":874,"children":876},{"id":875},"dashed-flow-indicator",[877],{"type":63,"value":878},"Dashed Flow Indicator",{"type":57,"tag":212,"props":880,"children":882},{"className":214,"code":881,"language":20,"meta":216,"style":216},"\u003Cline x1=\"200\" y1=\"76\" x2=\"200\" y2=\"120\"\n      stroke=\"#534AB7\" stroke-width=\"1.5\" stroke-dasharray=\"4 3\"\u002F>\n",[883],{"type":57,"tag":88,"props":884,"children":885},{"__ignoreMap":216},[886,893],{"type":57,"tag":222,"props":887,"children":888},{"class":224,"line":225},[889],{"type":57,"tag":222,"props":890,"children":891},{},[892],{"type":63,"value":864},{"type":57,"tag":222,"props":894,"children":895},{"class":224,"line":234},[896],{"type":57,"tag":222,"props":897,"children":898},{},[899],{"type":63,"value":900},"      stroke=\"#534AB7\" stroke-width=\"1.5\" stroke-dasharray=\"4 3\"\u002F>\n",{"type":57,"tag":407,"props":902,"children":904},{"id":903},"leader-line-with-label-for-annotations",[905],{"type":63,"value":906},"Leader Line with Label (for annotations)",{"type":57,"tag":212,"props":908,"children":910},{"className":214,"code":909,"language":20,"meta":216,"style":216},"\u003Cline x1=\"440\" y1=\"100\" x2=\"500\" y2=\"130\"\n      stroke=\"currentColor\" stroke-width=\"0.5\" stroke-dasharray=\"4 4\" opacity=\"0.5\"\u002F>\n\u003Ccircle cx=\"440\" cy=\"100\" r=\"2\" fill=\"currentColor\" opacity=\"0.5\"\u002F>\n\u003Ctext x=\"506\" y=\"134\" font-size=\"12\" fill=\"currentColor\" opacity=\"0.7\">Annotation text\u003C\u002Ftext>\n",[911],{"type":57,"tag":88,"props":912,"children":913},{"__ignoreMap":216},[914,922,930,938],{"type":57,"tag":222,"props":915,"children":916},{"class":224,"line":225},[917],{"type":57,"tag":222,"props":918,"children":919},{},[920],{"type":63,"value":921},"\u003Cline x1=\"440\" y1=\"100\" x2=\"500\" y2=\"130\"\n",{"type":57,"tag":222,"props":923,"children":924},{"class":224,"line":234},[925],{"type":57,"tag":222,"props":926,"children":927},{},[928],{"type":63,"value":929},"      stroke=\"currentColor\" stroke-width=\"0.5\" stroke-dasharray=\"4 4\" opacity=\"0.5\"\u002F>\n",{"type":57,"tag":222,"props":931,"children":932},{"class":224,"line":243},[933],{"type":57,"tag":222,"props":934,"children":935},{},[936],{"type":63,"value":937},"\u003Ccircle cx=\"440\" cy=\"100\" r=\"2\" fill=\"currentColor\" opacity=\"0.5\"\u002F>\n",{"type":57,"tag":222,"props":939,"children":940},{"class":224,"line":252},[941],{"type":57,"tag":222,"props":942,"children":943},{},[944],{"type":63,"value":945},"\u003Ctext x=\"506\" y=\"134\" font-size=\"12\" fill=\"currentColor\" opacity=\"0.7\">Annotation text\u003C\u002Ftext>\n",{"type":57,"tag":407,"props":947,"children":949},{"id":948},"large-container-for-structural-diagrams",[950],{"type":63,"value":951},"Large Container (for structural diagrams)",{"type":57,"tag":212,"props":953,"children":955},{"className":214,"code":954,"language":20,"meta":216,"style":216},"\u003Crect x=\"80\" y=\"40\" width=\"520\" height=\"300\" rx=\"20\"\n      fill=\"#E1F5EE\" stroke=\"#0F6E56\" stroke-width=\"0.5\"\u002F>\n\u003Ctext x=\"340\" y=\"68\" text-anchor=\"middle\"\n      font-size=\"14\" font-weight=\"500\" fill=\"#085041\">Container name\u003C\u002Ftext>\n",[956],{"type":57,"tag":88,"props":957,"children":958},{"__ignoreMap":216},[959,967,975,983],{"type":57,"tag":222,"props":960,"children":961},{"class":224,"line":225},[962],{"type":57,"tag":222,"props":963,"children":964},{},[965],{"type":63,"value":966},"\u003Crect x=\"80\" y=\"40\" width=\"520\" height=\"300\" rx=\"20\"\n",{"type":57,"tag":222,"props":968,"children":969},{"class":224,"line":234},[970],{"type":57,"tag":222,"props":971,"children":972},{},[973],{"type":63,"value":974},"      fill=\"#E1F5EE\" stroke=\"#0F6E56\" stroke-width=\"0.5\"\u002F>\n",{"type":57,"tag":222,"props":976,"children":977},{"class":224,"line":243},[978],{"type":57,"tag":222,"props":979,"children":980},{},[981],{"type":63,"value":982},"\u003Ctext x=\"340\" y=\"68\" text-anchor=\"middle\"\n",{"type":57,"tag":222,"props":984,"children":985},{"class":224,"line":252},[986],{"type":57,"tag":222,"props":987,"children":988},{},[989],{"type":63,"value":990},"      font-size=\"14\" font-weight=\"500\" fill=\"#085041\">Container name\u003C\u002Ftext>\n",{"type":57,"tag":72,"props":992,"children":993},{},[],{"type":57,"tag":76,"props":995,"children":997},{"id":996},"diagram-types-when-to-use-each",[998],{"type":63,"value":999},"Diagram Types & When to Use Each",{"type":57,"tag":407,"props":1001,"children":1003},{"id":1002},"_1-flowchart",[1004],{"type":63,"value":1005},"1. Flowchart",{"type":57,"tag":66,"props":1007,"children":1008},{},[1009,1014,1016,1021,1023,1028],{"type":57,"tag":320,"props":1010,"children":1011},{},[1012],{"type":63,"value":1013},"When",{"type":63,"value":1015},": Sequential processes, decision trees, pipelines.\n",{"type":57,"tag":320,"props":1017,"children":1018},{},[1019],{"type":63,"value":1020},"Layout",{"type":63,"value":1022},": Top-to-bottom or left-to-right. Single direction only.\n",{"type":57,"tag":320,"props":1024,"children":1025},{},[1026],{"type":63,"value":1027},"Rules",{"type":63,"value":1029},":",{"type":57,"tag":176,"props":1031,"children":1032},{},[1033,1038,1043],{"type":57,"tag":180,"props":1034,"children":1035},{},[1036],{"type":63,"value":1037},"Arrows must never cross unrelated boxes. Route around with L-bends if needed.",{"type":57,"tag":180,"props":1039,"children":1040},{},[1041],{"type":63,"value":1042},"Keep all same-type boxes the same height.",{"type":57,"tag":180,"props":1044,"children":1045},{},[1046],{"type":63,"value":1047},"Max 4-5 nodes per diagram. Break complex flows into multiple diagrams.",{"type":57,"tag":407,"props":1049,"children":1051},{"id":1050},"_2-structural-diagram",[1052],{"type":63,"value":1053},"2. Structural Diagram",{"type":57,"tag":66,"props":1055,"children":1056},{},[1057,1061,1063,1067,1069,1073],{"type":57,"tag":320,"props":1058,"children":1059},{},[1060],{"type":63,"value":1013},{"type":63,"value":1062},": Containment matters — things inside other things (architecture, org charts, system components).\n",{"type":57,"tag":320,"props":1064,"children":1065},{},[1066],{"type":63,"value":1020},{"type":63,"value":1068},": Nested rectangles. Outer = container, inner = regions.\n",{"type":57,"tag":320,"props":1070,"children":1071},{},[1072],{"type":63,"value":1027},{"type":63,"value":1029},{"type":57,"tag":176,"props":1075,"children":1076},{},[1077,1082,1087],{"type":57,"tag":180,"props":1078,"children":1079},{},[1080],{"type":63,"value":1081},"Max 2-3 nesting levels.",{"type":57,"tag":180,"props":1083,"children":1084},{},[1085],{"type":63,"value":1086},"20px minimum padding inside every container.",{"type":57,"tag":180,"props":1088,"children":1089},{},[1090],{"type":63,"value":1091},"Use different color ramps for parent vs child to show hierarchy.",{"type":57,"tag":407,"props":1093,"children":1095},{"id":1094},"_3-illustrative-diagram",[1096],{"type":63,"value":1097},"3. Illustrative Diagram",{"type":57,"tag":66,"props":1099,"children":1100},{},[1101,1105,1107,1111,1113,1117],{"type":57,"tag":320,"props":1102,"children":1103},{},[1104],{"type":63,"value":1013},{"type":63,"value":1106},": Building intuition. \"How does X actually work?\"\n",{"type":57,"tag":320,"props":1108,"children":1109},{},[1110],{"type":63,"value":1020},{"type":63,"value":1112},": Freeform — follows the subject's natural geometry.\n",{"type":57,"tag":320,"props":1114,"children":1115},{},[1116],{"type":63,"value":1027},{"type":63,"value":1029},{"type":57,"tag":176,"props":1119,"children":1120},{},[1121,1126,1131,1136],{"type":57,"tag":180,"props":1122,"children":1123},{},[1124],{"type":63,"value":1125},"Shapes can be freeform (paths, ellipses, polygons), not just rects.",{"type":57,"tag":180,"props":1127,"children":1128},{},[1129],{"type":63,"value":1130},"Color encodes intensity, not category (warm = active, cool = dormant).",{"type":57,"tag":180,"props":1132,"children":1133},{},[1134],{"type":63,"value":1135},"Overlap shapes for depth, but never let strokes cross text.",{"type":57,"tag":180,"props":1137,"children":1138},{},[1139],{"type":63,"value":1140},"Labels go in margins with leader lines pointing to the relevant part.",{"type":57,"tag":72,"props":1142,"children":1143},{},[],{"type":57,"tag":76,"props":1145,"children":1147},{"id":1146},"critical-checks-before-finalizing",[1148],{"type":63,"value":1149},"Critical Checks Before Finalizing",{"type":57,"tag":1151,"props":1152,"children":1153},"ol",{},[1154,1164,1173,1190,1200,1222,1232],{"type":57,"tag":180,"props":1155,"children":1156},{},[1157,1162],{"type":57,"tag":320,"props":1158,"children":1159},{},[1160],{"type":63,"value":1161},"ViewBox height",{"type":63,"value":1163},": Find your lowest element (max y + height). Set H = that + 40px.",{"type":57,"tag":180,"props":1165,"children":1166},{},[1167,1172],{"type":57,"tag":320,"props":1168,"children":1169},{},[1170],{"type":63,"value":1171},"No content past x=640 or below y=(H-40)",{"type":63,"value":165},{"type":57,"tag":180,"props":1174,"children":1175},{},[1176,1181,1182,1188],{"type":57,"tag":320,"props":1177,"children":1178},{},[1179],{"type":63,"value":1180},"Text fits in boxes",{"type":63,"value":621},{"type":57,"tag":88,"props":1183,"children":1185},{"className":1184},[],[1186],{"type":63,"value":1187},"(char_count x 8) + 48 \u003C rect_width",{"type":63,"value":1189}," for 14px text.",{"type":57,"tag":180,"props":1191,"children":1192},{},[1193,1198],{"type":57,"tag":320,"props":1194,"children":1195},{},[1196],{"type":63,"value":1197},"No arrows through boxes",{"type":63,"value":1199},": Trace every line's path — if it crosses a rect, reroute.",{"type":57,"tag":180,"props":1201,"children":1202},{},[1203,1221],{"type":57,"tag":320,"props":1204,"children":1205},{},[1206,1208,1214,1216],{"type":63,"value":1207},"All ",{"type":57,"tag":88,"props":1209,"children":1211},{"className":1210},[],[1212],{"type":63,"value":1213},"\u003Cpath>",{"type":63,"value":1215}," connectors have ",{"type":57,"tag":88,"props":1217,"children":1219},{"className":1218},[],[1220],{"type":63,"value":696},{"type":63,"value":165},{"type":57,"tag":180,"props":1223,"children":1224},{},[1225,1230],{"type":57,"tag":320,"props":1226,"children":1227},{},[1228],{"type":63,"value":1229},"All text has appropriate fill color",{"type":63,"value":1231}," — never rely on inheritance (SVG defaults to black).",{"type":57,"tag":180,"props":1233,"children":1234},{},[1235,1240],{"type":57,"tag":320,"props":1236,"children":1237},{},[1238],{"type":63,"value":1239},"Colors work in dark mode",{"type":63,"value":1241},": If using hardcoded colors, provide both light and dark variants. If using CSS variables, you're fine.",{"type":57,"tag":72,"props":1243,"children":1244},{},[],{"type":57,"tag":76,"props":1246,"children":1248},{"id":1247},"multi-diagram-approach",[1249],{"type":63,"value":1250},"Multi-Diagram Approach",{"type":57,"tag":66,"props":1252,"children":1253},{},[1254],{"type":63,"value":1255},"For complex topics, use multiple smaller SVGs instead of one dense one:",{"type":57,"tag":176,"props":1257,"children":1258},{},[1259,1264,1269,1274],{"type":57,"tag":180,"props":1260,"children":1261},{},[1262],{"type":63,"value":1263},"Each SVG should have 3-5 nodes max.",{"type":57,"tag":180,"props":1265,"children":1266},{},[1267],{"type":63,"value":1268},"Write explanatory text between diagrams.",{"type":57,"tag":180,"props":1270,"children":1271},{},[1272],{"type":63,"value":1273},"First diagram = overview, subsequent = zoom into subsections.",{"type":57,"tag":180,"props":1275,"children":1276},{},[1277],{"type":63,"value":1278},"Never promise diagrams you don't deliver.",{"type":57,"tag":72,"props":1280,"children":1281},{},[],{"type":57,"tag":76,"props":1283,"children":1285},{"id":1284},"example-simple-3-step-flow",[1286],{"type":63,"value":1287},"Example: Simple 3-Step Flow",{"type":57,"tag":212,"props":1289,"children":1291},{"className":214,"code":1290,"language":20,"meta":216,"style":216},"\u003Csvg width=\"100%\" viewBox=\"0 0 680 260\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\n  \u003Cdefs>\n    \u003Cmarker id=\"arrow\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\"\n            markerWidth=\"6\" markerHeight=\"6\" orient=\"auto-start-reverse\">\n      \u003Cpath d=\"M2 1L8 5L2 9\" fill=\"none\" stroke=\"context-stroke\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u002F>\n    \u003C\u002Fmarker>\n  \u003C\u002Fdefs>\n\n  \u003C!-- Step 1 -->\n  \u003Crect x=\"230\" y=\"20\" width=\"220\" height=\"56\" rx=\"8\"\n        fill=\"#E1F5EE\" stroke=\"#0F6E56\" stroke-width=\"0.5\"\u002F>\n  \u003Ctext x=\"340\" y=\"38\" text-anchor=\"middle\" dominant-baseline=\"central\"\n        font-size=\"14\" font-weight=\"500\" fill=\"#085041\">User request\u003C\u002Ftext>\n  \u003Ctext x=\"340\" y=\"56\" text-anchor=\"middle\" dominant-baseline=\"central\"\n        font-size=\"12\" fill=\"#0F6E56\">HTTP POST \u002Fapi\u002Fdata\u003C\u002Ftext>\n\n  \u003C!-- Arrow 1->2 -->\n  \u003Cline x1=\"340\" y1=\"76\" x2=\"340\" y2=\"100\" stroke=\"#534AB7\"\n        stroke-width=\"1.5\" marker-end=\"url(#arrow)\"\u002F>\n\n  \u003C!-- Step 2 -->\n  \u003Crect x=\"230\" y=\"106\" width=\"220\" height=\"56\" rx=\"8\"\n        fill=\"#EEEDFE\" stroke=\"#534AB7\" stroke-width=\"0.5\"\u002F>\n  \u003Ctext x=\"340\" y=\"124\" text-anchor=\"middle\" dominant-baseline=\"central\"\n        font-size=\"14\" font-weight=\"500\" fill=\"#3C3489\">Server processing\u003C\u002Ftext>\n  \u003Ctext x=\"340\" y=\"142\" text-anchor=\"middle\" dominant-baseline=\"central\"\n        font-size=\"12\" fill=\"#534AB7\">Validate and transform\u003C\u002Ftext>\n\n  \u003C!-- Arrow 2->3 -->\n  \u003Cline x1=\"340\" y1=\"162\" x2=\"340\" y2=\"186\" stroke=\"#854F0B\"\n        stroke-width=\"1.5\" marker-end=\"url(#arrow)\"\u002F>\n\n  \u003C!-- Step 3 -->\n  \u003Crect x=\"230\" y=\"192\" width=\"220\" height=\"56\" rx=\"8\"\n        fill=\"#FAEEDA\" stroke=\"#854F0B\" stroke-width=\"0.5\"\u002F>\n  \u003Ctext x=\"340\" y=\"210\" text-anchor=\"middle\" dominant-baseline=\"central\"\n        font-size=\"14\" font-weight=\"500\" fill=\"#633806\">Database write\u003C\u002Ftext>\n  \u003Ctext x=\"340\" y=\"228\" text-anchor=\"middle\" dominant-baseline=\"central\"\n        font-size=\"12\" fill=\"#854F0B\">INSERT into table\u003C\u002Ftext>\n\u003C\u002Fsvg>\n",[1292],{"type":57,"tag":88,"props":1293,"children":1294},{"__ignoreMap":216},[1295,1303,1310,1317,1324,1331,1338,1345,1352,1361,1369,1378,1387,1396,1405,1414,1423,1431,1440,1449,1458,1466,1475,1484,1492,1501,1510,1519,1528,1536,1545,1554,1562,1570,1579,1588,1597,1606,1615,1624,1633],{"type":57,"tag":222,"props":1296,"children":1297},{"class":224,"line":225},[1298],{"type":57,"tag":222,"props":1299,"children":1300},{},[1301],{"type":63,"value":1302},"\u003Csvg width=\"100%\" viewBox=\"0 0 680 260\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\n",{"type":57,"tag":222,"props":1304,"children":1305},{"class":224,"line":234},[1306],{"type":57,"tag":222,"props":1307,"children":1308},{},[1309],{"type":63,"value":240},{"type":57,"tag":222,"props":1311,"children":1312},{"class":224,"line":243},[1313],{"type":57,"tag":222,"props":1314,"children":1315},{},[1316],{"type":63,"value":249},{"type":57,"tag":222,"props":1318,"children":1319},{"class":224,"line":252},[1320],{"type":57,"tag":222,"props":1321,"children":1322},{},[1323],{"type":63,"value":258},{"type":57,"tag":222,"props":1325,"children":1326},{"class":224,"line":261},[1327],{"type":57,"tag":222,"props":1328,"children":1329},{},[1330],{"type":63,"value":267},{"type":57,"tag":222,"props":1332,"children":1333},{"class":224,"line":270},[1334],{"type":57,"tag":222,"props":1335,"children":1336},{},[1337],{"type":63,"value":276},{"type":57,"tag":222,"props":1339,"children":1340},{"class":224,"line":279},[1341],{"type":57,"tag":222,"props":1342,"children":1343},{},[1344],{"type":63,"value":285},{"type":57,"tag":222,"props":1346,"children":1347},{"class":224,"line":288},[1348],{"type":57,"tag":222,"props":1349,"children":1350},{},[1351],{"type":63,"value":294},{"type":57,"tag":222,"props":1353,"children":1354},{"class":224,"line":297},[1355],{"type":57,"tag":222,"props":1356,"children":1358},{"emptyLinePlaceholder":1357},true,[1359],{"type":63,"value":1360},"\n",{"type":57,"tag":222,"props":1362,"children":1363},{"class":224,"line":306},[1364],{"type":57,"tag":222,"props":1365,"children":1366},{},[1367],{"type":63,"value":1368},"  \u003C!-- Step 1 -->\n",{"type":57,"tag":222,"props":1370,"children":1372},{"class":224,"line":1371},11,[1373],{"type":57,"tag":222,"props":1374,"children":1375},{},[1376],{"type":63,"value":1377},"  \u003Crect x=\"230\" y=\"20\" width=\"220\" height=\"56\" rx=\"8\"\n",{"type":57,"tag":222,"props":1379,"children":1381},{"class":224,"line":1380},12,[1382],{"type":57,"tag":222,"props":1383,"children":1384},{},[1385],{"type":63,"value":1386},"        fill=\"#E1F5EE\" stroke=\"#0F6E56\" stroke-width=\"0.5\"\u002F>\n",{"type":57,"tag":222,"props":1388,"children":1390},{"class":224,"line":1389},13,[1391],{"type":57,"tag":222,"props":1392,"children":1393},{},[1394],{"type":63,"value":1395},"  \u003Ctext x=\"340\" y=\"38\" text-anchor=\"middle\" dominant-baseline=\"central\"\n",{"type":57,"tag":222,"props":1397,"children":1399},{"class":224,"line":1398},14,[1400],{"type":57,"tag":222,"props":1401,"children":1402},{},[1403],{"type":63,"value":1404},"        font-size=\"14\" font-weight=\"500\" fill=\"#085041\">User request\u003C\u002Ftext>\n",{"type":57,"tag":222,"props":1406,"children":1408},{"class":224,"line":1407},15,[1409],{"type":57,"tag":222,"props":1410,"children":1411},{},[1412],{"type":63,"value":1413},"  \u003Ctext x=\"340\" y=\"56\" text-anchor=\"middle\" dominant-baseline=\"central\"\n",{"type":57,"tag":222,"props":1415,"children":1417},{"class":224,"line":1416},16,[1418],{"type":57,"tag":222,"props":1419,"children":1420},{},[1421],{"type":63,"value":1422},"        font-size=\"12\" fill=\"#0F6E56\">HTTP POST \u002Fapi\u002Fdata\u003C\u002Ftext>\n",{"type":57,"tag":222,"props":1424,"children":1426},{"class":224,"line":1425},17,[1427],{"type":57,"tag":222,"props":1428,"children":1429},{"emptyLinePlaceholder":1357},[1430],{"type":63,"value":1360},{"type":57,"tag":222,"props":1432,"children":1434},{"class":224,"line":1433},18,[1435],{"type":57,"tag":222,"props":1436,"children":1437},{},[1438],{"type":63,"value":1439},"  \u003C!-- Arrow 1->2 -->\n",{"type":57,"tag":222,"props":1441,"children":1443},{"class":224,"line":1442},19,[1444],{"type":57,"tag":222,"props":1445,"children":1446},{},[1447],{"type":63,"value":1448},"  \u003Cline x1=\"340\" y1=\"76\" x2=\"340\" y2=\"100\" stroke=\"#534AB7\"\n",{"type":57,"tag":222,"props":1450,"children":1452},{"class":224,"line":1451},20,[1453],{"type":57,"tag":222,"props":1454,"children":1455},{},[1456],{"type":63,"value":1457},"        stroke-width=\"1.5\" marker-end=\"url(#arrow)\"\u002F>\n",{"type":57,"tag":222,"props":1459,"children":1461},{"class":224,"line":1460},21,[1462],{"type":57,"tag":222,"props":1463,"children":1464},{"emptyLinePlaceholder":1357},[1465],{"type":63,"value":1360},{"type":57,"tag":222,"props":1467,"children":1469},{"class":224,"line":1468},22,[1470],{"type":57,"tag":222,"props":1471,"children":1472},{},[1473],{"type":63,"value":1474},"  \u003C!-- Step 2 -->\n",{"type":57,"tag":222,"props":1476,"children":1478},{"class":224,"line":1477},23,[1479],{"type":57,"tag":222,"props":1480,"children":1481},{},[1482],{"type":63,"value":1483},"  \u003Crect x=\"230\" y=\"106\" width=\"220\" height=\"56\" rx=\"8\"\n",{"type":57,"tag":222,"props":1485,"children":1487},{"class":224,"line":1486},24,[1488],{"type":57,"tag":222,"props":1489,"children":1490},{},[1491],{"type":63,"value":744},{"type":57,"tag":222,"props":1493,"children":1495},{"class":224,"line":1494},25,[1496],{"type":57,"tag":222,"props":1497,"children":1498},{},[1499],{"type":63,"value":1500},"  \u003Ctext x=\"340\" y=\"124\" text-anchor=\"middle\" dominant-baseline=\"central\"\n",{"type":57,"tag":222,"props":1502,"children":1504},{"class":224,"line":1503},26,[1505],{"type":57,"tag":222,"props":1506,"children":1507},{},[1508],{"type":63,"value":1509},"        font-size=\"14\" font-weight=\"500\" fill=\"#3C3489\">Server processing\u003C\u002Ftext>\n",{"type":57,"tag":222,"props":1511,"children":1513},{"class":224,"line":1512},27,[1514],{"type":57,"tag":222,"props":1515,"children":1516},{},[1517],{"type":63,"value":1518},"  \u003Ctext x=\"340\" y=\"142\" text-anchor=\"middle\" dominant-baseline=\"central\"\n",{"type":57,"tag":222,"props":1520,"children":1522},{"class":224,"line":1521},28,[1523],{"type":57,"tag":222,"props":1524,"children":1525},{},[1526],{"type":63,"value":1527},"        font-size=\"12\" fill=\"#534AB7\">Validate and transform\u003C\u002Ftext>\n",{"type":57,"tag":222,"props":1529,"children":1531},{"class":224,"line":1530},29,[1532],{"type":57,"tag":222,"props":1533,"children":1534},{"emptyLinePlaceholder":1357},[1535],{"type":63,"value":1360},{"type":57,"tag":222,"props":1537,"children":1539},{"class":224,"line":1538},30,[1540],{"type":57,"tag":222,"props":1541,"children":1542},{},[1543],{"type":63,"value":1544},"  \u003C!-- Arrow 2->3 -->\n",{"type":57,"tag":222,"props":1546,"children":1548},{"class":224,"line":1547},31,[1549],{"type":57,"tag":222,"props":1550,"children":1551},{},[1552],{"type":63,"value":1553},"  \u003Cline x1=\"340\" y1=\"162\" x2=\"340\" y2=\"186\" stroke=\"#854F0B\"\n",{"type":57,"tag":222,"props":1555,"children":1557},{"class":224,"line":1556},32,[1558],{"type":57,"tag":222,"props":1559,"children":1560},{},[1561],{"type":63,"value":1457},{"type":57,"tag":222,"props":1563,"children":1565},{"class":224,"line":1564},33,[1566],{"type":57,"tag":222,"props":1567,"children":1568},{"emptyLinePlaceholder":1357},[1569],{"type":63,"value":1360},{"type":57,"tag":222,"props":1571,"children":1573},{"class":224,"line":1572},34,[1574],{"type":57,"tag":222,"props":1575,"children":1576},{},[1577],{"type":63,"value":1578},"  \u003C!-- Step 3 -->\n",{"type":57,"tag":222,"props":1580,"children":1582},{"class":224,"line":1581},35,[1583],{"type":57,"tag":222,"props":1584,"children":1585},{},[1586],{"type":63,"value":1587},"  \u003Crect x=\"230\" y=\"192\" width=\"220\" height=\"56\" rx=\"8\"\n",{"type":57,"tag":222,"props":1589,"children":1591},{"class":224,"line":1590},36,[1592],{"type":57,"tag":222,"props":1593,"children":1594},{},[1595],{"type":63,"value":1596},"        fill=\"#FAEEDA\" stroke=\"#854F0B\" stroke-width=\"0.5\"\u002F>\n",{"type":57,"tag":222,"props":1598,"children":1600},{"class":224,"line":1599},37,[1601],{"type":57,"tag":222,"props":1602,"children":1603},{},[1604],{"type":63,"value":1605},"  \u003Ctext x=\"340\" y=\"210\" text-anchor=\"middle\" dominant-baseline=\"central\"\n",{"type":57,"tag":222,"props":1607,"children":1609},{"class":224,"line":1608},38,[1610],{"type":57,"tag":222,"props":1611,"children":1612},{},[1613],{"type":63,"value":1614},"        font-size=\"14\" font-weight=\"500\" fill=\"#633806\">Database write\u003C\u002Ftext>\n",{"type":57,"tag":222,"props":1616,"children":1618},{"class":224,"line":1617},39,[1619],{"type":57,"tag":222,"props":1620,"children":1621},{},[1622],{"type":63,"value":1623},"  \u003Ctext x=\"340\" y=\"228\" text-anchor=\"middle\" dominant-baseline=\"central\"\n",{"type":57,"tag":222,"props":1625,"children":1627},{"class":224,"line":1626},40,[1628],{"type":57,"tag":222,"props":1629,"children":1630},{},[1631],{"type":63,"value":1632},"        font-size=\"12\" fill=\"#854F0B\">INSERT into table\u003C\u002Ftext>\n",{"type":57,"tag":222,"props":1634,"children":1636},{"class":224,"line":1635},41,[1637],{"type":57,"tag":222,"props":1638,"children":1639},{},[1640],{"type":63,"value":312},{"type":57,"tag":72,"props":1642,"children":1643},{},[],{"type":57,"tag":76,"props":1645,"children":1647},{"id":1646},"tips-for-great-diagrams",[1648],{"type":63,"value":1649},"Tips for Great Diagrams",{"type":57,"tag":176,"props":1651,"children":1652},{},[1653,1663,1673,1683,1693,1703],{"type":57,"tag":180,"props":1654,"children":1655},{},[1656,1661],{"type":57,"tag":320,"props":1657,"children":1658},{},[1659],{"type":63,"value":1660},"Less is more",{"type":63,"value":1662},": A clean 4-node diagram teaches better than a cramped 12-node one.",{"type":57,"tag":180,"props":1664,"children":1665},{},[1666,1671],{"type":57,"tag":320,"props":1667,"children":1668},{},[1669],{"type":63,"value":1670},"Color = meaning",{"type":63,"value":1672},": Warm colors for active\u002Fhot\u002Fimportant, cool for passive\u002Fcold\u002Fsecondary, gray for structural.",{"type":57,"tag":180,"props":1674,"children":1675},{},[1676,1681],{"type":57,"tag":320,"props":1677,"children":1678},{},[1679],{"type":63,"value":1680},"Streaming effect",{"type":63,"value":1682},": Since SVGs render top-to-bottom as tokens arrive, structure your elements top-down for a natural build-up animation.",{"type":57,"tag":180,"props":1684,"children":1685},{},[1686,1691],{"type":57,"tag":320,"props":1687,"children":1688},{},[1689],{"type":63,"value":1690},"Annotations on the side",{"type":63,"value":1692},": Put explanatory labels in the right margin (x > 560) with leader lines pointing to the relevant element.",{"type":57,"tag":180,"props":1694,"children":1695},{},[1696,1701],{"type":57,"tag":320,"props":1697,"children":1698},{},[1699],{"type":63,"value":1700},"Consistent heights",{"type":63,"value":1702},": All boxes of the same type should be the same height.",{"type":57,"tag":180,"props":1704,"children":1705},{},[1706,1711],{"type":57,"tag":320,"props":1707,"children":1708},{},[1709],{"type":63,"value":1710},"Whitespace is your friend",{"type":63,"value":1712},": Don't fill every pixel. Breathing room makes diagrams readable.",{"type":57,"tag":1714,"props":1715,"children":1716},"style",{},[1717],{"type":63,"value":1718},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":1720,"total":243},[1721,1742,1757],{"slug":1722,"name":1723,"fn":1724,"description":1725,"org":1726,"tags":1727,"stars":24,"repoUrl":25,"updatedAt":1741},"advanced-visualization-techniques","Advanced Visualization Techniques","create advanced generative UI visualizations","UI mockups, dashboards, advanced interactivity, generative art, simulations, math visualizations, and design system rules for producing rich generateSandboxedUi output.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":10},[1728,1731,1732,1735,1738],{"name":1729,"slug":1730,"type":14},"Dashboards","dashboards",{"name":22,"slug":23,"type":14},{"name":1733,"slug":1734,"type":14},"Frontend","frontend",{"name":1736,"slug":1737,"type":14},"Generative Art","generative-art",{"name":1739,"slug":1740,"type":14},"UI Components","ui-components","2026-07-12T08:06:40.712754",{"slug":1743,"name":1744,"fn":1745,"description":1746,"org":1747,"tags":1748,"stars":24,"repoUrl":25,"updatedAt":1756},"master-agent-playbook","Master Agent Playbook","apply CopilotKit agent design principles","Philosophy, decision-making framework, and technical skills for delivering visual, interactive, and educational AI responses.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":10},[1749,1751,1752,1753],{"name":1750,"slug":33,"type":14},"Agents",{"name":10,"slug":9,"type":14},{"name":22,"slug":23,"type":14},{"name":1754,"slug":1755,"type":14},"Education","education","2026-07-12T08:06:39.416086",{"slug":4,"name":5,"fn":6,"description":7,"org":1758,"tags":1759,"stars":24,"repoUrl":25,"updatedAt":26},{"slug":9,"name":10,"logoUrl":11,"githubOrg":10},[1760,1761,1762,1763],{"name":10,"slug":9,"type":14},{"name":22,"slug":23,"type":14},{"name":16,"slug":17,"type":14},{"name":19,"slug":20,"type":14},{"items":1765,"total":1398},[1766,1779,1797,1814,1826,1839,1852,1866,1878,1890,1906,1920],{"slug":1767,"name":1767,"fn":1768,"description":1769,"org":1770,"tags":1771,"stars":1776,"repoUrl":1777,"updatedAt":1778},"a2ui-renderer","render declarative agent UI surfaces","Render A2UI (Agent-to-UI declarative surfaces) in CopilotKit v2. Enable the runtime via CopilotRuntime({ a2ui: {...} }), then enable the provider via \u003CCopilotKit a2ui={{ theme }}>. Auto-activates via \u002Finfo — do NOT manually pass renderActivityMessages. createA2UIMessageRenderer ships from @copilotkit\u002Freact-core\u002Fv2; low-level primitives (A2UIProvider, A2UIRenderer, createCatalog) ship from @copilotkit\u002Fa2ui-renderer. Covers theme customization, createSurface dedup, action-bridge try\u002Ffinally cleanup. Load when an agent emits A2UI operations (createSurface \u002F updateComponents \u002F updateDataModel), when wiring a2ui on CopilotRuntime, or when styling A2UI surfaces.\n",{"slug":9,"name":10,"logoUrl":11,"githubOrg":10},[1772,1773,1774,1775],{"name":10,"slug":9,"type":14},{"name":22,"slug":23,"type":14},{"name":1733,"slug":1734,"type":14},{"name":1739,"slug":1740,"type":14},35928,"https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FCopilotKit","2026-07-12T08:06:36.722091",{"slug":1780,"name":1780,"fn":1781,"description":1782,"org":1783,"tags":1784,"stars":1776,"repoUrl":1777,"updatedAt":1796},"copilotkit-agui","build and debug CopilotKit agent backends","Use when building custom agent backends, implementing the AG-UI protocol, debugging streaming issues, or understanding how agents communicate with frontends. Covers event types, SSE transport, AbstractAgent\u002FHttpAgent patterns, state synchronization, tool calls, and human-in-the-loop flows.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":10},[1785,1786,1789,1792,1793],{"name":1750,"slug":33,"type":14},{"name":1787,"slug":1788,"type":14},"API Development","api-development",{"name":1790,"slug":1791,"type":14},"Backend","backend",{"name":10,"slug":9,"type":14},{"name":1794,"slug":1795,"type":14},"Debugging","debugging","2026-07-12T08:06:22.179755",{"slug":1798,"name":1798,"fn":1799,"description":1800,"org":1801,"tags":1802,"stars":1776,"repoUrl":1777,"updatedAt":1813},"copilotkit-contribute","contribute to CopilotKit open-source project","Use when contributing to the CopilotKit open-source project — forking, cloning, setting up the monorepo, creating branches, running tests, and submitting pull requests against CopilotKit\u002FCopilotKit.\n",{"slug":9,"name":10,"logoUrl":11,"githubOrg":10},[1803,1804,1807,1810],{"name":10,"slug":9,"type":14},{"name":1805,"slug":1806,"type":14},"Engineering","engineering",{"name":1808,"slug":1809,"type":14},"GitHub","github",{"name":1811,"slug":1812,"type":14},"Pull Requests","pull-requests","2026-07-12T08:06:30.102192",{"slug":1815,"name":1815,"fn":1816,"description":1817,"org":1818,"tags":1819,"stars":1776,"repoUrl":1777,"updatedAt":1825},"copilotkit-debug","diagnose and debug CopilotKit issues","Use when diagnosing CopilotKit issues -- runtime connectivity failures, agent not responding, streaming errors, tool execution problems, transcription failures, version mismatches, and AG-UI event tracing.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":10},[1820,1821,1822],{"name":10,"slug":9,"type":14},{"name":1794,"slug":1795,"type":14},{"name":1823,"slug":1824,"type":14},"Observability","observability","2026-07-12T08:06:23.407872",{"slug":1827,"name":1827,"fn":1828,"description":1829,"org":1830,"tags":1831,"stars":1776,"repoUrl":1777,"updatedAt":1838},"copilotkit-develop","build AI features with CopilotKit","Use when building AI-powered features with CopilotKit v2 -- adding chat interfaces, registering frontend tools, sharing application context with agents, handling agent interrupts, and working with the CopilotKit runtime.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":10},[1832,1833,1836,1837],{"name":1750,"slug":33,"type":14},{"name":1834,"slug":1835,"type":14},"AI Context","ai-context",{"name":10,"slug":9,"type":14},{"name":1733,"slug":1734,"type":14},"2026-07-12T08:06:28.856644",{"slug":1840,"name":1840,"fn":1841,"description":1842,"org":1843,"tags":1844,"stars":1776,"repoUrl":1777,"updatedAt":1851},"copilotkit-integrations","integrate agent frameworks into CopilotKit applications","Use when wiring an external agent framework (LangGraph, CrewAI, PydanticAI, Mastra, ADK, LlamaIndex, Agno, Strands, Microsoft Agent Framework, or others) into a CopilotKit application via the AG-UI protocol.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":10},[1845,1846,1847,1848],{"name":1750,"slug":33,"type":14},{"name":1787,"slug":1788,"type":14},{"name":10,"slug":9,"type":14},{"name":1849,"slug":1850,"type":14},"Integrations","integrations","2026-07-12T08:06:32.560054",{"slug":1853,"name":1853,"fn":1854,"description":1855,"org":1856,"tags":1857,"stars":1776,"repoUrl":1777,"updatedAt":1865},"copilotkit-self-update","update CopilotKit agent skills","Use when the user wants to update, refresh, or reinstall the CopilotKit agent SKILLS (the SKILL.md files that teach this agent about CopilotKit). NOT for updating the CopilotKit codebase or project — this is specifically about refreshing the skills\u002Fknowledge this agent has loaded. Triggers on \"update copilotkit skills\", \"update skills\", \"refresh skills\", \"skills are stale\", \"skills are outdated\", \"get latest skills\", \"my copilotkit knowledge is wrong\", \"copilotkit APIs changed\", \"skills seem old\", \"wrong API names\", \"reinstall skills\", \"skills not working right\", \"update your copilotkit knowledge\".",{"slug":9,"name":10,"logoUrl":11,"githubOrg":10},[1858,1859,1862],{"name":10,"slug":9,"type":14},{"name":1860,"slug":1861,"type":14},"Documentation","documentation",{"name":1863,"slug":1864,"type":14},"Productivity","productivity","2026-07-12T08:06:31.345052",{"slug":1867,"name":1867,"fn":1868,"description":1869,"org":1870,"tags":1871,"stars":1776,"repoUrl":1777,"updatedAt":1877},"copilotkit-setup","set up CopilotKit in projects","Use when adding CopilotKit to an existing project or bootstrapping a new CopilotKit project from scratch. Covers framework detection, package installation, runtime wiring, provider setup, and first working chat integration.\n",{"slug":9,"name":10,"logoUrl":11,"githubOrg":10},[1872,1873,1874],{"name":10,"slug":9,"type":14},{"name":1733,"slug":1734,"type":14},{"name":1875,"slug":1876,"type":14},"Onboarding","onboarding","2026-07-12T08:06:25.534415",{"slug":1879,"name":1879,"fn":1880,"description":1881,"org":1882,"tags":1883,"stars":1776,"repoUrl":1777,"updatedAt":1889},"copilotkit-upgrade","migrate CopilotKit applications to v2","Use when migrating a CopilotKit v1 application to v2 -- updating package imports, replacing deprecated hooks and components, switching from GraphQL runtime to AG-UI protocol runtime, and resolving breaking API changes.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":10},[1884,1885,1886],{"name":10,"slug":9,"type":14},{"name":1805,"slug":1806,"type":14},{"name":1887,"slug":1888,"type":14},"Migration","migration","2026-07-12T08:06:26.949801",{"slug":1891,"name":1891,"fn":1892,"description":1893,"org":1894,"tags":1895,"stars":1776,"repoUrl":1777,"updatedAt":1905},"react-core","integrate CopilotKit into React applications","@copilotkit\u002Freact-core — mount the CopilotKit provider (from @copilotkit\u002Freact-core\u002Fv2) in a Next.js App Router \u002F React Router v7 \u002F TanStack Start \u002F SPA app, drop in CopilotChat\u002FCopilotPopup\u002FCopilotSidebar (v2 chat components ship from react-core\u002Fv2 — NOT react-ui, which is CSS-only in v2), access and subscribe to agents with useAgent \u002F useAgentContext \u002F useCapabilities, switch between multiple agents, manage durable Intelligence threads with useThreads, register browser-side tools via useFrontendTool, render tool calls with useRenderTool \u002F useComponent \u002F useDefaultRenderTool, gate execution with useHumanInTheLoop, wire file attachments with useAttachments, configure suggestion pills, and register activity- and custom-message renderers. publicLicenseKey is canonical (publicApiKey is deprecated alias). Load the reference under references\u002F that matches your task.\n",{"slug":9,"name":10,"logoUrl":11,"githubOrg":10},[1896,1897,1898,1901,1904],{"name":10,"slug":9,"type":14},{"name":1733,"slug":1734,"type":14},{"name":1899,"slug":1900,"type":14},"Next.js","next-js",{"name":1902,"slug":1903,"type":14},"React","react",{"name":1739,"slug":1740,"type":14},"2026-07-12T08:06:15.72619",{"slug":1907,"name":1907,"fn":1908,"description":1909,"org":1910,"tags":1911,"stars":1776,"repoUrl":1777,"updatedAt":1919},"runtime","mount and configure CopilotRuntime servers","@copilotkit\u002Fruntime — mount a fetch-native CopilotRuntime on any JS server, wire middleware, pick an AgentRunner, instantiate BuiltInAgent (Factory Mode with TanStack AI is the preferred default) or plug in any of 12 external agent frameworks (Mastra, LangGraph, CrewAI Crews\u002FFlows, PydanticAI, ADK, LlamaIndex, Agno, AWS Strands, MS Agent Framework, AG2, A2A), enable Intelligence mode for durable threads + websocket, register server-side tools via defineTool, and wire voice transcription. Uses the fetch-based createCopilotRuntimeHandler primitive — the Express\u002FHono adapters are discouraged. Load the reference under references\u002F that matches your task.\n",{"slug":9,"name":10,"logoUrl":11,"githubOrg":10},[1912,1913,1914,1916],{"name":1790,"slug":1791,"type":14},{"name":10,"slug":9,"type":14},{"name":1915,"slug":40,"type":14},"JavaScript",{"name":1917,"slug":1918,"type":14},"Middleware","middleware","2026-07-12T08:06:10.034875",{"slug":1722,"name":1723,"fn":1724,"description":1725,"org":1921,"tags":1922,"stars":24,"repoUrl":25,"updatedAt":1741},{"slug":9,"name":10,"logoUrl":11,"githubOrg":10},[1923,1924,1925,1926,1927],{"name":1729,"slug":1730,"type":14},{"name":22,"slug":23,"type":14},{"name":1733,"slug":1734,"type":14},{"name":1736,"slug":1737,"type":14},{"name":1739,"slug":1740,"type":14}]