{"id":"20f9ad11-6aa2-4b9b-9a81-c1a1e897f726","shortId":"egkDne","kind":"skill","title":"excalidraw","tagline":"Use when user requests diagrams, flowcharts, architecture charts, or visualizations. Also use proactively when explaining systems with 3+ components, complex data flows, or relationships that benefit from visual representation. Generates .excalidraw files and exports to PNG/SVG v","description":"# Excalidraw Diagrams\n\n## Overview\n\nGenerate `.excalidraw` JSON files and export to PNG/SVG.\n\n**Two export options:**\n- **Kroki API** (`curl`) — zero install, SVG output only\n- **excalidraw-brute-export-cli** — local Firefox-based, PNG + SVG\n\n**Supported formats:** PNG (local CLI only), SVG (both options). PDF is NOT supported.\n\n## When to Use\n\n**Explicit triggers:** user says \"画图\", \"diagram\", \"visualize\", \"flowchart\", \"draw\", \"架构图\", \"流程图\"\n\n**Proactive triggers:**\n- Explaining a system with 3+ interacting components\n- Describing a multi-step process or decision tree\n- Comparing architectures or approaches side by side\n\n**Skip when:** a simple list or table suffices, or user is in a quick Q&A flow\n\n## Prerequisites\n\n### Option A: Kroki API (recommended — zero install, SVG only)\n\n```bash\n# Just needs curl (pre-installed on macOS/Linux/Windows Git Bash)\ncurl --version\n```\n\nNo additional setup. SVG rendered via `https://kroki.io`.\n\n### Option B: Local CLI (required for PNG)\n\nThe CLI uses **Firefox** (not Chromium). Check and install:\n\n```bash\nnpm install -g excalidraw-brute-export-cli\nnpx playwright install firefox\n```\n\n**macOS patch (one-time, required):**\n```bash\nCLI_MAIN=$(npm root -g)/excalidraw-brute-export-cli/src/main.js\nsed -i '' 's/keyboard.press(\"Control+O\")/keyboard.press(\"Meta+O\")/' \"$CLI_MAIN\"\nsed -i '' 's/keyboard.press(\"Control+Shift+E\")/keyboard.press(\"Meta+Shift+E\")/' \"$CLI_MAIN\"\n```\n\n**Windows/Linux:** No patch needed.\n\n## Workflow\n\n1. **Check deps** — use Kroki (curl) for SVG; use local CLI for PNG\n2. **Plan** — identify diagram type, pick a visual pattern, choose color palette\n3. **Generate** — write `.excalidraw` JSON file (section-by-section for large diagrams)\n4. **Export** — run Kroki or CLI command\n5. **Report** — tell user the output file path\n\n## Design Principles\n\n### Default style\n\n- `roughness: 0` — clean, modern look for all technical diagrams (use `1` only when user requests hand-drawn/casual style)\n- `fontFamily: 2` (Helvetica) — professional look; use `1` (Virgil) only for casual/sketch style, `3` (Cascadia) for code snippets\n- `fillStyle: \"solid\"` — default fill\n\n### Font size hierarchy\n\n| Level | Size | Use for |\n|-------|------|---------|\n| Title | 28px | Diagram title |\n| Header | 24px | Section/group headers |\n| Label | 20px | Primary element labels |\n| Description | 16px | Secondary text, descriptions |\n| Note | 14px | Annotations, fine print |\n\n### Color palette\n\nFollow the **60-30-10 rule**: 60% whitespace/neutral, 30% primary accent, 10% highlight.\n\n**Semantic fill colors** (use with `strokeColor` one shade darker):\n\n| Category | Fill | Stroke | Use for |\n|----------|------|--------|---------|\n| Primary / Input | `#dbeafe` | `#1e40af` | Entry points, APIs, user-facing |\n| Success / Data | `#dcfce7` | `#166534` | Data stores, success states |\n| Warning / Decision | `#fef9c3` | `#854d0e` | Decision points, conditions |\n| Error / Critical | `#fee2e2` | `#991b1b` | Errors, alerts, critical paths |\n| External / Storage | `#f3e8ff` | `#6b21a8` | External services, databases, AI/ML |\n| Process / Default | `#e0f2fe` | `#0369a1` | Standard process steps |\n| Trigger / Start | `#fed7aa` | `#c2410c` | Start nodes, triggers, events |\n| Neutral / Container | `#f1f5f9` | `#475569` | Groups, swimlanes, backgrounds |\n\n**Text colors:**\n\n| Level | Color |\n|-------|-------|\n| Title | `#1e293b` |\n| Label | `#334155` |\n| Description | `#64748b` |\n\n**Rule: Do not invent new colors.** Pick from this palette.\n\n### Arrow semantics\n\n| Style | Meaning |\n|-------|---------|\n| Solid (`strokeStyle: null`) | Primary flow, main path |\n| Dashed (`\"dashed\"`) | Response, async, callback |\n| Dotted (`\"dotted\"`) | Optional, reference, weak dependency |\n\n## Excalidraw JSON Structure\n\n### File skeleton\n\n```json\n{\n  \"type\": \"excalidraw\",\n  \"version\": 2,\n  \"source\": \"claude-code\",\n  \"elements\": [],\n  \"appState\": { \"viewBackgroundColor\": \"#ffffff\" }\n}\n```\n\n### Element types\n\n| type      | use for                          |\n|-----------|----------------------------------|\n| rectangle | boxes, components, modules       |\n| ellipse   | start/end nodes, databases       |\n| diamond   | decision points                  |\n| arrow     | directed connections             |\n| line      | undirected connections           |\n| text      | standalone labels                |\n\n### Element sizing\n\nCalculate element width from label text to prevent truncation:\n\n```\nLatin text:  width = max(160, charCount * 9)\nCJK text:   width = max(160, charCount * 18)\nMixed text:  estimate each character individually, sum up\n```\n\nHeight: use `60` for single-line labels, add `24` per additional line.\n\n### Required properties (all elements)\n\n```json\n{\n  \"id\": \"auth_service\",\n  \"type\": \"rectangle\",\n  \"x\": 100, \"y\": 100,\n  \"width\": 160, \"height\": 60,\n  \"angle\": 0,\n  \"strokeColor\": \"#1e40af\",\n  \"backgroundColor\": \"#dbeafe\",\n  \"fillStyle\": \"solid\",\n  \"strokeWidth\": 2,\n  \"roughness\": 0,\n  \"opacity\": 100,\n  \"seed\": 100001,\n  \"boundElements\": [\n    { \"id\": \"arrow_to_db\", \"type\": \"arrow\" },\n    { \"id\": \"label_auth\", \"type\": \"text\" }\n  ]\n}\n```\n\nUse **descriptive string IDs** (e.g., `\"api_gateway\"`, `\"arrow_gw_to_auth\"`) instead of random strings.\n\nGive each element a unique `seed` (integer). Namespace by section: 100xxx, 200xxx, 300xxx.\n\n### JSON field rules\n\n- `boundElements`: use `null` when empty, never `[]`\n- `updated`: always use `1`, never timestamps\n- Do NOT include: `frameId`, `index`, `versionNonce`, `rawText`\n- `points` in arrows: always start at `[0, 0]`\n- `seed`: must be a positive integer, unique per element\n\n### Text inside shapes (contained text)\n\nWhen text belongs inside a shape, bind them bidirectionally:\n\n```json\n{\n  \"id\": \"label_auth\",\n  \"type\": \"text\",\n  \"text\": \"Auth Service\",\n  \"fontSize\": 20,\n  \"fontFamily\": 2,\n  \"textAlign\": \"center\",\n  \"verticalAlign\": \"middle\",\n  \"strokeColor\": \"#1e293b\",\n  \"containerId\": \"auth_service\"\n}\n```\n\n**CRITICAL: Text `strokeColor` is the text color.** Always set it explicitly to a dark color from the text color palette. Never omit it — omitting `strokeColor` on text can cause invisible text that blends with the shape background.\n\nThe parent shape must list the text in its `boundElements`:\n```json\n\"boundElements\": [{ \"id\": \"label_auth\", \"type\": \"text\" }]\n```\n\n### Arrow binding (bidirectional)\n\nArrows must bind to shapes, and shapes must reference bound arrows:\n\n```json\n{\n  \"id\": \"arrow_gw_to_auth\",\n  \"type\": \"arrow\",\n  \"points\": [[0, 0], [200, 0]],\n  \"startBinding\": { \"elementId\": \"api_gateway\", \"gap\": 5, \"focus\": 0 },\n  \"endBinding\": { \"elementId\": \"auth_service\", \"gap\": 5, \"focus\": 0 }\n}\n```\n\nBoth `api_gateway` and `auth_service` must include in their `boundElements`:\n```json\n\"boundElements\": [{ \"id\": \"arrow_gw_to_auth\", \"type\": \"arrow\" }]\n```\n\n### Arrow routing\n\n**L-shaped (elbow) arrows** — orthogonal routing with 3+ points:\n\n```json\n\"points\": [[0, 0], [100, 0], [100, 150]]\n```\n\n**Elbowed arrows** — automatic right-angle routing:\n\n```json\n{\n  \"type\": \"arrow\",\n  \"points\": [[0, 0], [0, -50], [200, -50], [200, 0]],\n  \"elbowed\": true\n}\n```\n\n**Curved arrows** — smooth routing with waypoints:\n\n```json\n{\n  \"type\": \"arrow\",\n  \"points\": [[0, 0], [50, -40], [200, 0]],\n  \"roundness\": { \"type\": 2 }\n}\n```\n\n### Grouping\n\nRelated elements share `groupIds`. Nested groups list IDs innermost-first:\n\n```json\n\"groupIds\": [\"inner_group\", \"outer_group\"]\n```\n\n## Diagram Patterns\n\nChoose the right visual pattern for each diagram type.\n\n### Spacing Reference\n\n| Scenario | Spacing |\n|----------|---------|\n| Labeled arrow gap (between shapes) | 150–200px |\n| Unlabeled arrow gap | 100–120px |\n| Column spacing (labeled arrows) | 400px (220px box + 180px gap) |\n| Column spacing (unlabeled arrows) | 340px (220px box + 120px gap) |\n| Row spacing | 280–350px (150px box + 130–200px gap) |\n| Zone/container padding | 50–60px around children |\n| Zone/container opacity | 25–40 |\n| Minimum gap between any elements | 40px |\n\n### Flowchart (LR or TB)\n\n- Ellipse for start/end, diamond for decisions, rectangle for process\n- 200px horizontal spacing, 150px vertical spacing\n- Decision branches: \"Yes\" goes forward, \"No\" goes down\n- 3–10 steps (max 15)\n\n### Architecture / System Diagram\n\n- Column spacing per table above; use labeled arrow spacing when connections have labels\n- Group related services in dashed `Neutral` containers (opacity: 30, padding: 50px)\n- Gateway/entry at left or top, databases at right or bottom\n- 3–8 entities (max 12)\n\n### Sequence Diagram\n\n- 200px between participants (rectangles at top)\n- Vertical lifelines as dashed lines\n- Horizontal arrows for messages, 60px vertical spacing\n- Solid arrow = request, dashed arrow = response\n\n### Mind Map\n\n- Central node: largest (200x100), `Trigger` color\n- Level 1: 150x70, `Primary` color, radial around center\n- Level 2: 120x50, `Process` color\n- Level 3: 90x40, `Neutral` color\n- Use lines (not arrows) for connections\n- 4–6 branches (max 8), 2–4 sub-topics per branch\n\n### Swimlane\n\n- Large transparent rectangles (`Neutral` fill, `\"dashed\"` stroke, opacity: 30) as lane boundaries\n- Lane label as free-standing text at top-left of lane (not bound to rectangle), 28px font\n- Elements flow left-to-right within lanes\n- Arrows cross lanes for handoffs\n\n## Section-by-Section Construction\n\nFor diagrams with **10+ elements**, do NOT generate the entire JSON at once. Build in sections:\n\n1. **Plan all sections first** — list element IDs, positions, and cross-section bindings\n2. **Write section 1** — create the file with initial elements\n3. **Append section 2** — read the file, add new elements to the `elements` array\n4. **Repeat** — continue until all sections are done\n5. **Final pass** — verify all `boundElements` and `startBinding`/`endBinding` references are consistent\n\nNamespace element seeds by section (100xxx, 200xxx, 300xxx) to avoid collisions.\n\n## Export\n\n### Option A: Kroki API (SVG only — zero install)\n\n```bash\n# SVG via Kroki API\ncurl -s -X POST https://kroki.io/excalidraw/svg \\\n  -H \"Content-Type: application/json\" \\\n  --data-binary \"@diagram.excalidraw\" \\\n  -o diagram.svg\n\n# Via local Kroki Docker (offline)\ncurl -s -X POST http://localhost:8000/excalidraw/svg \\\n  -H \"Content-Type: application/json\" \\\n  --data-binary \"@diagram.excalidraw\" \\\n  -o diagram.svg\n```\n\n### Option B: Local CLI (PNG + SVG)\n\n```bash\n# PNG at 2x scale (recommended)\nexcalidraw-brute-export-cli -i diagram.excalidraw -o diagram.png -f png -s 2\n\n# PNG at 1x scale\nexcalidraw-brute-export-cli -i diagram.excalidraw -o diagram.png -f png -s 1\n\n# SVG\nexcalidraw-brute-export-cli -i diagram.excalidraw -o diagram.svg -f svg -s 1\n```\n\n**Required flags:** `-f` (format: `png` or `svg`) and `-s` (scale: `1`, `2`, or `3`).\n\n## Anti-Patterns\n\n**Never put `text` on large background/zone rectangles.** Excalidraw centers text in the middle of the shape, overlapping contained elements. Instead, use a free-standing `text` element positioned at the top of the zone.\n\n**Avoid cross-zone arrows.** Long diagonal arrows create visual spaghetti. Route arrows within zones or along zone edges. If a cross-zone connection is unavoidable, route it along the perimeter.\n\n**Use arrow labels sparingly.** Labels placed at the arrow midpoint overlap on short arrows. Keep labels to ≤12 characters and ensure ≥120px clear space between connected shapes. Omit labels when the connection meaning is obvious from context.\n\n**Don't use filled backgrounds on containers that hold other elements.** Use `opacity: 30` (or 25-40 range) for zone/container rectangles so contained elements remain visible.\n\n**Always set explicit `strokeColor` on text elements.** Text `strokeColor` is the rendered text color. If omitted, text may inherit the parent shape's background color and become invisible. Use `#1e293b` (title), `#334155` (label), or `#64748b` (description) from the text color palette.\n\n## Common Mistakes\n\n| Mistake | Fix |\n|---------|-----|\n| Kroki returns error | Ensure file is valid JSON with `\"type\": \"excalidraw\"` and `\"elements\"` array |\n| Kroki only outputs SVG | Use local CLI (`excalidraw-brute-export-cli`) for PNG |\n| Export fails with \"Missing required flag\" | Always pass `-f png` and `-s 2` |\n| Export fails with \"Executable doesn't exist\" | Run `npx playwright install firefox` |\n| macOS: timeout waiting for file chooser | Apply the macOS Meta patch above |\n| Arrow `points` not relative to origin | `points` always start at `[0,0]` |\n| Missing `id` on elements | Use descriptive string IDs per element |\n| Overlapping elements | Use spacing reference table; minimum 40px gap |\n| Arrows not interactive in excalidraw.com | Add `boundElements` to shapes referencing all bound arrows/text |\n| Text not centered in shape | Set `containerId` on text AND add text to shape's `boundElements` |\n| All text same size | Use font size hierarchy: 28 → 24 → 20 → 16 → 14 |\n| Diagram looks monotone | Apply semantic colors from the palette, follow 60-30-10 rule |\n| Text invisible / same color as background | Always set `strokeColor` on text elements to a dark color (`#1e293b`, `#334155`, or `#64748b`) |\n| Text overlaps inside zone/container | Don't bind text to zone rectangles; use free-standing text at top |\n| Text truncated in shapes | Use width formula: `max(160, charCount * 9)`, double for CJK |\n| `boundElements: []` causes issues | Use `null` for empty boundElements, never `[]` |","tags":["excalidraw","skill","agents365-ai","agent-skills","claude-code","claude-code-skill","claude-skills","diagram","openclaw","openclaw-skills","skill-md","skillsmp"],"capabilities":["skill","source-agents365-ai","skill-excalidraw-skill","topic-agent-skills","topic-claude-code","topic-claude-code-skill","topic-claude-skills","topic-diagram","topic-excalidraw","topic-openclaw","topic-openclaw-skills","topic-skill","topic-skill-md","topic-skillsmp"],"categories":["excalidraw-skill"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/Agents365-ai/excalidraw-skill","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add Agents365-ai/excalidraw-skill","source_repo":"https://github.com/Agents365-ai/excalidraw-skill","install_from":"skills.sh"}},"qualityScore":"0.474","qualityRationale":"deterministic score 0.47 from registry signals: · indexed on github topic:agent-skills · 49 github stars · SKILL.md body (13,366 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T18:58:10.027Z","embedding":null,"createdAt":"2026-04-18T23:56:41.990Z","updatedAt":"2026-04-22T18:58:10.027Z","lastSeenAt":"2026-04-22T18:58:10.027Z","tsv":"'-10':374,1740 '-30':373,1739 '-40':915,1534 '-50':895,897 '/casual':315 '/excalidraw-brute-export-cli/src/main.js':212 '/excalidraw/svg':1308 '/keyboard.press':218,229 '0':298,612,623,696,697,821,822,824,832,840,875,876,878,892,893,894,899,912,913,917,1665,1666 '0369a1':442 '1':240,307,323,680,1118,1219,1236,1383,1397,1408 '10':381,1037,1206 '100':604,606,625,877,879,964 '100001':627 '100xxx':665,1282 '12':1082,1498 '120px':965,982,1502 '120x50':1127 '130':990 '14':1727 '14px':364 '15':1040 '150':880,959 '150px':988,1025 '150x70':1119 '16':1726 '160':562,569,608,1789 '166534':411 '16px':359 '18':571 '180px':973 '1e293':466,739,1573,1758 '1e40':400,614 '1x':1369 '2':253,318,513,621,733,920,1126,1146,1233,1246,1366,1409,1630 '20':731,1725 '200':823,896,898,916 '200px':960,991,1022,1085 '200x100':1114 '200xxx':666,1283 '20px':354 '220px':971,980 '24':589,1724 '24px':350 '25':1001,1533 '28':1723 '280':986 '28px':346,1183 '2x':1351 '3':19,105,265,329,871,1036,1078,1131,1243,1411 '30':378,1065,1162,1531 '300xxx':667,1284 '334155':469,1576,1760 '340px':979 '350px':987 '4':278,1141,1147,1257 '40':1002 '400px':970 '40px':1008,1684 '475569':457 '5':285,830,838,1265 '50':914,995 '50px':1067 '6':1142 '60':372,376,582,610,1738 '60px':996,1100 '64748b':471,1579,1762 '6b21a8':434 '8':1079,1145 '8000/excalidraw/svg':1330 '854d0e':419 '9':564,1791 '90x40':1132 '991b1b':426 'accent':380 'add':588,1250,1691,1709 'addit':165,591 'af':401,615 'ai/ml':438 'alert':428 'along':1465,1478 'also':12 'alway':678,693,751,1544,1624,1662,1748 'angl':611,886 'annot':365 'anti':1413 'anti-pattern':1412 'api':54,145,404,645,827,842,1292,1301 'append':1244 'appli':1649,1731 'application/json':1313,1335 'approach':120 'appstat':519 'architectur':8,118,1041 'around':997,1123 'array':1256,1603 'arrow':482,538,630,634,647,692,798,801,811,814,819,855,860,861,867,882,890,903,910,955,962,969,978,1051,1097,1104,1107,1138,1193,1453,1456,1461,1482,1489,1494,1655,1686 'arrows/text':1698 'async':496 'auth':599,637,650,724,728,742,795,817,835,845,858 'automat':883 'avoid':1286,1449 'b':172,467,740,1343,1574,1759 'background':460,780,1522,1567,1747 'background/zone':1420 'backgroundcolor':616 'base':69 'bash':151,161,187,206,1297,1348 'becom':1570 'belong':714 'benefit':27 'bidirect':720,800 'binari':1316,1338 'bind':718,799,803,1232,1769 'blend':776 'bottom':1077 'bound':810,1180,1697 'boundari':1165 'boundel':628,671,790,792,851,853,1270,1692,1714,1795,1802 'box':528,972,981,989 'branch':1029,1143,1152 'brute':63,193,1356,1373,1387,1613 'build':1216 'c2410c':449 'calcul':549 'callback':497 'cascadia':330 'casual/sketch':327 'categori':392 'caus':772,1796 'center':735,1124,1423,1701 'central':1111 'charact':576,1499 'charcount':563,570,1790 'chart':9 'check':184,241 'children':998 'choos':262,941 'chooser':1648 'chromium':183 'cjk':565,1794 'claud':516 'claude-cod':515 'clean':299 'clear':1503 'cli':65,76,174,179,195,207,221,233,250,283,1345,1358,1375,1389,1610,1615 'code':332,517 'collis':1287 'color':263,368,385,462,464,477,750,758,762,1116,1121,1129,1134,1557,1568,1584,1733,1745,1757 'column':966,975,1044 'command':284 'common':1586 'compar':117 'complex':21 'compon':20,107,529 'condit':422 'connect':540,543,1054,1140,1473,1506,1512 'consist':1276 'construct':1202 'contain':455,710,1063,1432,1524,1540 'containerid':741,1705 'content':1311,1333 'content-typ':1310,1332 'context':1517 'continu':1259 'control':216,226 'creat':1237,1457 'critic':424,429,744 'cross':1194,1230,1451,1471 'cross-sect':1229 'cross-zon':1450,1470 'curl':55,154,162,245,1302,1325 'curv':902 'dark':757,1756 'darker':391 'dash':493,494,1061,1094,1106,1159 'data':22,409,412,1315,1337 'data-binari':1314,1336 'databas':437,534,1073 'db':632 'dbeaf':399,617 'dcfce7':410 'decis':115,417,420,536,1018,1028 'default':295,336,440 'dep':242 'depend':503 'describ':108 'descript':358,362,470,641,1580,1672 'design':293 'diagon':1455 'diagram':6,40,93,256,277,305,347,939,948,1043,1084,1204,1728 'diagram.excalidraw':1317,1339,1360,1377,1391 'diagram.png':1362,1379 'diagram.svg':1319,1341,1393 'diamond':535,1016 'direct':539 'docker':1323 'doesn':1635 'done':1264 'dot':498,499 'doubl':1792 'draw':96 'drawn':314 'e':228,232 'e.g':644 'e0f2fe':441 'edg':1467 'elbow':866,881,900 'element':356,518,522,547,550,596,657,706,923,1007,1185,1207,1225,1242,1252,1255,1278,1433,1441,1528,1541,1550,1602,1670,1676,1678,1753 'elementid':826,834 'ellips':531,1013 'empti':675,1801 'endbind':833,1273 'ensur':1501,1593 'entir':1212 'entiti':1080 'entri':402 'error':423,427,1592 'estim':574 'event':453 'excalidraw':1,32,39,43,62,192,268,504,511,1355,1372,1386,1422,1600,1612 'excalidraw-brute-export-c':61,191,1354,1371,1385,1611 'excalidraw.com':1690 'execut':1634 'exist':1637 'explain':16,101 'explicit':88,754,1546 'export':35,47,51,64,194,279,1288,1357,1374,1388,1614,1618,1631 'extern':431,435 'f':1363,1380,1394,1400,1626 'f1f5f9':456 'f3e8ff':433 'face':407 'fail':1619,1632 'fed7aa':448 'fee2e2':425 'fef9c3':418 'ffffff':521 'field':669 'file':33,45,270,291,507,1239,1249,1594,1647 'fill':337,384,393,1158,1521 'fillstyl':334,618 'final':1266 'fine':366 'firefox':68,181,199,1642 'firefox-bas':67 'first':932,1223 'fix':1589 'flag':1399,1623 'flow':23,140,490,1186 'flowchart':7,95,1009 'focus':831,839 'follow':370,1737 'font':338,1184,1720 'fontfamili':317,732 'fontsiz':730 'format':73,1401 'formula':1787 'forward':1032 'frameid':686 'free':1170,1438,1776 'free-stand':1169,1437,1775 'g':190,211 'gap':829,837,956,963,974,983,992,1004,1685 'gateway':646,828,843 'gateway/entry':1068 'generat':31,42,266,1210 'git':160 'give':655 'goe':1031,1034 'group':458,921,927,936,938,1057 'groupid':925,934 'gw':648,815,856 'h':1309,1331 'hand':313 'hand-drawn':312 'handoff':1197 'header':349,352 'height':580,609 'helvetica':319 'hierarchi':340,1722 'highlight':382 'hold':1526 'horizont':1023,1096 'id':598,629,635,643,722,793,813,854,929,1226,1668,1674 'identifi':255 'includ':685,848 'index':687 'individu':577 'inherit':1562 'initi':1241 'inner':935 'innermost':931 'innermost-first':930 'input':398 'insid':708,715,1765 'instal':57,148,157,186,189,198,1296,1641 'instead':651,1434 'integ':661,703 'interact':106,1688 'invent':475 'invis':773,1571,1743 'issu':1797 'json':44,269,505,509,597,668,721,791,812,852,873,888,908,933,1213,1597 'keep':1495 'kroki':53,144,244,281,1291,1300,1322,1590,1604 'kroki.io':170,1307 'kroki.io/excalidraw/svg':1306 'l':864 'l-shape':863 'label':353,357,468,546,553,587,636,723,794,954,968,1050,1056,1167,1483,1485,1496,1509,1577 'lane':1164,1166,1178,1192,1195 'larg':276,1154,1419 'largest':1113 'latin':558 'left':1070,1176,1188 'left-to-right':1187 'level':341,463,1117,1125,1130 'lifelin':1092 'line':541,586,592,1095,1136 'list':128,785,928,1224 'local':66,75,173,249,1321,1344,1609 'localhost':1329 'long':1454 'look':301,321,1729 'lr':1010 'maco':200,1643,1651 'macos/linux/windows':159 'main':208,222,234,491 'map':1110 'max':561,568,1039,1081,1144,1788 'may':1561 'mean':485,1513 'messag':1099 'meta':219,230,1652 'middl':737,1427 'midpoint':1490 'mind':1109 'minimum':1003,1683 'miss':1621,1667 'mistak':1587,1588 'mix':572 'modern':300 'modul':530 'monoton':1730 'multi':111 'multi-step':110 'must':699,784,802,808,847 'namespac':662,1277 'need':153,238 'nest':926 'neutral':454,1062,1133,1157 'never':676,681,764,1415,1803 'new':476,1251 'node':451,533,1112 'note':363 'npm':188,209 'npx':196,1639 'null':488,673,1799 'o':217,220,1318,1340,1361,1378,1392 'obvious':1515 'offlin':1324 'omit':765,767,1508,1559 'one':203,389 'one-tim':202 'opac':624,1000,1064,1161,1530 'option':52,80,142,171,500,1289,1342 'origin':1660 'orthogon':868 'outer':937 'output':59,290,1606 'overlap':1431,1491,1677,1764 'overview':41 'pad':994,1066 'palett':264,369,481,763,1585,1736 'parent':782,1564 'particip':1087 'pass':1267,1625 'patch':201,237,1653 'path':292,430,492 'pattern':261,940,945,1414 'pdf':81 'per':590,705,1046,1151,1675 'perimet':1480 'pick':258,478 'place':1486 'plan':254,1220 'playwright':197,1640 'png':70,74,177,252,1346,1349,1364,1367,1381,1402,1617,1627 'png/svg':37,49 'point':403,421,537,690,820,872,874,891,911,1656,1661 'posit':702,1227,1442 'post':1305,1328 'pre':156 'pre-instal':155 'prerequisit':141 'prevent':556 'primari':355,379,397,489,1120 'principl':294 'print':367 'proactiv':14,99 'process':113,439,444,1021,1128 'profession':320 'properti':594 'put':1416 'q':138 'quick':137 'radial':1122 'random':653 'rang':1535 'rawtext':689 'read':1247 'recommend':146,1353 'rectangl':527,602,1019,1088,1156,1182,1421,1538,1773 'refer':501,809,951,1274,1681 'referenc':1695 'relat':922,1058,1658 'relationship':25 'remain':1542 'render':168,1555 'repeat':1258 'report':286 'represent':30 'request':5,311,1105 'requir':175,205,593,1398,1622 'respons':495,1108 'return':1591 'right':885,943,1075,1190 'right-angl':884 'root':210 'rough':297,622 'round':918 'rout':862,869,887,905,1460,1476 'row':984 'rule':375,472,670,1741 'run':280,1638 's/keyboard.press':215,225 'say':91 'scale':1352,1370,1407 'scenario':952 'secondari':360 'section':272,274,664,1199,1201,1218,1222,1231,1235,1245,1262,1281 'section-by-sect':271,1198 'section/group':351 'sed':213,223 'seed':626,660,698,1279 'semant':383,483,1732 'sequenc':1083 'servic':436,600,729,743,836,846,1059 'set':752,1545,1704,1749 'setup':166 'shade':390 'shape':709,717,779,783,805,807,865,958,1430,1507,1565,1694,1703,1712,1784 'share':924 'shift':227,231 'short':1493 'side':121,123 'simpl':127 'singl':585 'single-lin':584 'size':339,342,548,1718,1721 'skeleton':508 'skill' 'skill-excalidraw-skill' 'skip':124 'smooth':904 'snippet':333 'solid':335,486,619,1103 'sourc':514 'source-agents365-ai' 'space':950,953,967,976,985,1024,1027,1045,1052,1102,1504,1680 'spaghetti':1459 'spare':1484 'stand':1171,1439,1777 'standalon':545 'standard':443 'start':447,450,694,1663 'start/end':532,1015 'startbind':825,1272 'state':415 'step':112,445,1038 'storag':432 'store':413 'string':642,654,1673 'stroke':394,1160 'strokecolor':388,613,738,746,768,1547,1552,1750 'strokestyl':487 'strokewidth':620 'structur':506 'style':296,316,328,484 'sub':1149 'sub-top':1148 'success':408,414 'suffic':131 'sum':578 'support':72,84 'svg':58,71,78,149,167,247,1293,1298,1347,1384,1395,1404,1607 'swimlan':459,1153 'system':17,103,1042 'tabl':130,1047,1682 'tb':1012 'technic':304 'tell':287 'text':361,461,544,554,559,566,573,639,707,711,713,726,727,745,749,761,770,774,787,797,1172,1417,1424,1440,1549,1551,1556,1560,1583,1699,1707,1710,1716,1742,1752,1763,1770,1778,1781 'textalign':734 'time':204 'timeout':1644 'timestamp':682 'titl':345,348,465,1575 'top':1072,1090,1175,1445,1780 'top-left':1174 'topic':1150 'topic-agent-skills' 'topic-claude-code' 'topic-claude-code-skill' 'topic-claude-skills' 'topic-diagram' 'topic-excalidraw' 'topic-openclaw' 'topic-openclaw-skills' 'topic-skill' 'topic-skill-md' 'topic-skillsmp' 'transpar':1155 'tree':116 'trigger':89,100,446,452,1115 'true':901 'truncat':557,1782 'two':50 'type':257,510,523,524,601,633,638,725,796,818,859,889,909,919,949,1312,1334,1599 'unavoid':1475 'undirect':542 'uniqu':659,704 'unlabel':961,977 'updat':677 'use':2,13,87,180,243,248,306,322,343,386,395,525,581,640,672,679,1049,1135,1435,1481,1520,1529,1572,1608,1671,1679,1719,1774,1785,1798 'user':4,90,133,288,310,406 'user-fac':405 'v':38 'valid':1596 'verifi':1268 'version':163,512 'versionnonc':688 'vertic':1026,1091,1101 'verticalalign':736 'via':169,1299,1320 'viewbackgroundcolor':520 'virgil':324 'visibl':1543 'visual':11,29,94,260,944,1458 'wait':1645 'warn':416 'waypoint':907 'weak':502 'whitespace/neutral':377 'width':551,560,567,607,1786 'windows/linux':235 'within':1191,1462 'workflow':239 'write':267,1234 'x':603,1304,1327 'y':605 'yes':1030 'zero':56,147,1295 'zone':1448,1452,1463,1466,1472,1772 'zone/container':993,999,1537,1766 '架构图':97 '流程图':98 '画图':92","prices":[{"id":"393a507d-9e7f-47cf-9d81-378f1cbccd88","listingId":"20f9ad11-6aa2-4b9b-9a81-c1a1e897f726","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"Agents365-ai","category":"excalidraw-skill","install_from":"skills.sh"},"createdAt":"2026-04-18T23:56:41.990Z"}],"sources":[{"listingId":"20f9ad11-6aa2-4b9b-9a81-c1a1e897f726","source":"github","sourceId":"Agents365-ai/excalidraw-skill","sourceUrl":"https://github.com/Agents365-ai/excalidraw-skill","isPrimary":false,"firstSeenAt":"2026-04-18T23:56:41.990Z","lastSeenAt":"2026-04-22T18:58:10.027Z"}],"details":{"listingId":"20f9ad11-6aa2-4b9b-9a81-c1a1e897f726","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"Agents365-ai","slug":"excalidraw-skill","github":{"repo":"Agents365-ai/excalidraw-skill","stars":49,"topics":["agent-skills","claude-code","claude-code-skill","claude-skills","diagram","excalidraw","openclaw","openclaw-skills","skill","skill-md","skillsmp"],"license":null,"html_url":"https://github.com/Agents365-ai/excalidraw-skill","pushed_at":"2026-03-18T10:38:23Z","description":"Claude Code skill for generating Excalidraw diagrams and exporting to PNG/PDF/SVG locally","skill_md_sha":"088836892906e91689973c5204aee1a305e82bd5","skill_md_path":"SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/Agents365-ai/excalidraw-skill"},"layout":"root","source":"github","category":"excalidraw-skill","frontmatter":{"name":"excalidraw","description":"Use when user requests diagrams, flowcharts, architecture charts, or visualizations. Also use proactively when explaining systems with 3+ components, complex data flows, or relationships that benefit from visual representation. Generates .excalidraw files and exports to PNG/SVG via Kroki API or locally using excalidraw-brute-export-cli."},"skills_sh_url":"https://skills.sh/Agents365-ai/excalidraw-skill"},"updatedAt":"2026-04-22T18:58:10.027Z"}}