{"id":"1a5e7d82-166d-4e80-8a79-f13f17d16065","shortId":"ZhFxAC","kind":"skill","title":"agent-canvas","tagline":"Draw diagrams, flowcharts, and visualizations on an Excalidraw canvas. Use when the user asks to draw, visualize, create diagrams, or sketch ideas.","description":"# Agent Canvas\n\nA CLI tool to interact with an Excalidraw canvas for creating diagrams and visualizations.\n\n## Installation\n\nBefore using, check if CLI is installed:\n\n```bash\nwhich agent-canvas && agent-canvas --version\n```\n\n- **If not installed**: Ask the user which package manager they prefer (bun or npm), then install:\n  ```bash\n  bun add -g @agent-canvas/cli@0.13.0\n  # or\n  npm install -g @agent-canvas/cli@0.13.0\n  ```\n\n- **If installed but version differs from 0.13.0**: Upgrade using the same package manager:\n  - Path contains `.bun` → `bun add -g @agent-canvas/cli@0.13.0`\n  - Otherwise → `npm install -g @agent-canvas/cli@0.13.0`\n\n- **After install/upgrade**: Verify with `agent-canvas --version` to confirm version is 0.13.0\n\n## Quick Start\n\n1. Start the canvas (opens in browser):\n   ```bash\n   agent-canvas start &\n   ```\n\n2. Use CLI commands to draw on the canvas.\n\n### Port Configuration\n\nDefault ports: **39820** (WebSocket), **39821** (HTTP). If ports conflict, configure via:\n\n```bash\nagent-canvas config set port 39820         # Set WebSocket port\nagent-canvas config set http-port 39821    # Set HTTP port\nagent-canvas config list                   # Show all config (value + source)\nagent-canvas config get port               # Show current port\nagent-canvas config reset port             # Reset to default\n```\n\nConfig is saved to `~/.agent-canvas/config.json`. One-time override via `start`:\n```bash\nagent-canvas start --port 8000 --http-port 8001 &\n```\n\nPriority: `--port` flag > env var `AGENT_CANVAS_WS_PORT` > config file > default.\n\n## Commands Reference\n\n### Start Canvas\n```bash\nagent-canvas start &                  # Start server in the background (will close automatically when no action for a while)\n```\n\n### Load File\n```bash\nagent-canvas load file.excalidraw     # Load .excalidraw file into current canvas\n```\n**When loading from file**: Remember the file path and save back to it with `agent-canvas save <original-file>`.\n\n### Canvas Management\nThe canvas supports multiple canvases. Each canvas is stored independently and can be switched between.\n\n```bash\nagent-canvas list                     # List all canvases ([U]=User active, [A]=Agent active, [F]=Folder)\nagent-canvas new -n \"Name\" [--use]    # Create new canvas, optionally switch to it\nagent-canvas use \"Name\"               # Switch to canvas by name\nagent-canvas rename \"New Name\"        # Rename current canvas\n```\n\n**Folder Management** — Organize canvases into folders:\n```bash\nagent-canvas create-folder -n \"Name\"              # Create a new folder\nagent-canvas delete-folder \"Name\"                  # Delete folder (canvases become ungrouped)\nagent-canvas move-to-folder \"Canvas\" \"Folder\"      # Move canvas into a folder\nagent-canvas move-to-folder \"Canvas\" --ungrouped   # Remove canvas from its folder\n```\n\n**Notes:**\n- Canvas names are case-insensitive and must be unique\n- Delete canvases via UI (hover over canvas in sidebar, click \"...\" menu)\n- Each canvas has its own scene data; switching automatically saves current canvas\n- Deleting a folder does NOT delete the canvases inside it — they become ungrouped\n\n\n### Add Text\n```bash\nagent-canvas add-text -t \"<text>\" --ax <x> --ay <y> [options]\n```\n- Options: `--font-size <size>`, `--text-align <left|center|right>`, `-a/--anchor <anchor>`, `--stroke-color <hex>`, `-n/--note <text>`\n- Font sizes: S=16, M=20 (default), L=28, XL=36\n- **Anchor** (`-a`): Since text size is unknown until rendered, anchor gives you precise positioning control by specifying which point of the text bounding box aligns to (--ax, --ay). Default: `bottomLeft`.\n\n  | Anchor | Common Text Types |\n  |--------|-------------------|\n  | `topLeft` | Badge, Tag, Icon label |\n  | `topCenter` | Subtitle, Description below shape |\n  | `topRight` | Timestamp, Version, Status |\n  | `leftCenter` | Side annotation (right of shape) |\n  | `center` | Centered title, Main label |\n  | `rightCenter` | Side annotation (left of shape) |\n  | `bottomLeft` | Footnote, Note |\n  | `bottomCenter` | Title, Header above shape |\n  | `bottomRight` | Footnote, Signature |\n\n- Returns: `Text created (id: <id>, x: <x>, y: <y>, <width>x<height>)` — actual top-left position and dimensions for precise layout\n\n### Add Drawing Elements\n\nAll drawing commands share common style options:\n- **Stroke**: `--stroke-color <hex>` (default: #1e1e1e), `--stroke-width <1-4>` (default: 2), `--stroke-style <solid|dashed|dotted>` (default: solid)\n- **Fill** (shapes only): `--background-color <hex>` (default: transparent), `--fill-style <solid|hachure|cross-hatch>` (default: solid)\n- **Meta**: `-n/--note <text>` - semantic description for the element. **Use liberally** - notes help understand diagram intent when reading back later.\n- **Animated**: `--animated` - auto-scroll viewport to show the newly added element. Small elements zoom in, large elements zoom out, normal elements scroll minimally.\n\n**Recommended Colors** (from Excalidraw palette):\n| Color  | Stroke (dark) | Background (light) |\n|--------|---------------|-------------------|\n| Red    | #e03131       | #ffc9c9           |\n| Blue   | #1971c2       | #a5d8ff           |\n| Green  | #2f9e44       | #b2f2bb           |\n| Yellow | #f08c00       | #ffec99           |\n| Cyan   | #0c8599       | #99e9f2           |\n| Violet | #6741d9       | #b197fc           |\n| Gray   | #495057       | #dee2e6           |\n\n#### Shapes\n```bash\nagent-canvas add-shape -t <type> -x <x> -y <y> [-w <width>] [-h <height>] [-l <label>]\n```\n- Types: `rectangle`, `ellipse`, `diamond`\n- Use `-l/--label` to add text inside the shape (fontSize: 16 by default), `--label-font-size <n>` to adjust\n- Label color inherits from `--stroke-color` by default; use `--label-stroke-color <hex>` to override\n- **Returns**: `Shape created (id: <id> x=<x> y=<y> w=<width> h=<height>)` — actual dimensions after auto-sizing for labels\n\n**⚠️ Label Sizing - CRITICAL: Calculate BEFORE drawing**\n\nIf shape size is too small, Excalidraw auto-expands, breaking arrow coordinates. **You MUST:**\n1. Calculate minimum dimensions using the formulas below\n2. Use the calculated values directly — **NEVER estimate or use smaller values**\n\n```\nStep 1: Calculate text dimensions (fontSize=16 by default)\n  textWidth = charCount × fontSize × 0.6  (English/numbers)\n  textWidth = charCount × fontSize        (CJK characters)\n  textHeight = lineCount × fontSize × 1.35\n\nStep 2: Calculate minimum shape size (use these values, not smaller!)\n  rectangle: width = textWidth + 50,  height = textHeight + 50\n  ellipse:   width = textWidth × 1.42 + 55,  height = textHeight × 1.42 + 55\n  diamond:   width = textWidth × 2 + 60,  height = textHeight × 2 + 60\n```\n\n**Example**: Label \"Message Queue\" (13 chars) in ellipse\n```\ntextWidth = 13 × 16 × 0.6 = 124.8\ntextHeight = 1 × 16 × 1.35 = 21.6\nellipse width = 124.8 × 1.42 + 55 = 232\nellipse height = 21.6 × 1.42 + 55 = 86\n→ Use: -w 232 -h 86 (or round up to -w 240 -h 90)\n```\n\n**Tip**: For long labels, insert `\\n` manually, then recalculate with updated lineCount.\n\n#### Lines & Arrows\n```bash\nagent-canvas add-line -x <x1> -y <y1> --end-x <x2> --end-y <y2>\nagent-canvas add-arrow -x <x1> -y <y1> --end-x <x2> --end-y <y2>\n```\n- Arrow-specific: `--start-arrowhead`, `--end-arrowhead` (arrow, bar, dot, triangle, diamond, none)\n\n**Arrow Types** (`--arrow-type`):\n| Type | Description | Use Case |\n|------|-------------|----------|\n| `sharp` | Straight line (default) | Direct connections |\n| `round` | Curved line with control point | Organic flows, avoiding overlaps |\n| `elbow` | Right-angle turns (90°) | Flowcharts, circuit diagrams |\n\n**Intermediate Points** (`--via`):\nUse `--via` to specify intermediate points as absolute coordinates in format `\"x1,y1;x2,y2;...\"`:\n\n```bash\n# Round arrow: one control point determines curve direction\n# Vertical arrow curving left (control point at x=50, left of the line)\nagent-canvas add-arrow -x 100 -y 100 --end-x 100 --end-y 300 --arrow-type round --via \"50,200\"\n\n# Elbow arrow: multiple points for 90° turns\n# Loop back pattern: down → left → up (for flowchart iterations)\nagent-canvas add-arrow -x 175 -y 520 --end-x 175 --end-y 280 --arrow-type elbow --via \"120,520;120,280\"\n```\n\n**Tips**:\n- For `round`: curve bends toward the control point (offset from straight path)\n- For `elbow`: points define the corners of the 90° path\n\n#### Polygon\n```bash\nagent-canvas add-polygon -p '[{\"x\":0,\"y\":0},{\"x\":100,\"y\":0},{\"x\":50,\"y\":100}]'\n```\n\n#### Image\n```bash\nagent-canvas add-image -f <path> -x <x> -y <y> [-w <width>] [-h <height>] [-n <note>]\n```\n- Supported formats: PNG, JPEG, GIF, SVG, WebP\n- Width/height default to original image dimensions; specify one to scale proportionally\n- Image data is embedded as base64 in the canvas (stored in browser IndexedDB)\n- **Returns**: `Image added (id: <id>, x: <x>, y: <y>, <width>x<height>)`\n\n### Manipulate Elements\n```bash\nagent-canvas delete-elements -i <id1>,<id2>,...\nagent-canvas rotate-elements -i <id1>,<id2>,... -a <degrees>\nagent-canvas move-elements -i <id1>,<id2>,... --delta-x <dx> --delta-y <dy>\nagent-canvas resize-elements -i <id1>,<id2>,... [--top <n>] [--bottom <n>] [--left <n>] [--right <n>]\nagent-canvas group-elements -i <id1>,<id2>,...\nagent-canvas ungroup-element -i <id>\n```\n\n**Resize Elements** (`resize-elements`):\nExpand or contract element edges (rectangle, ellipse, diamond, image). Values are in element's local coordinate system (respects rotation).\n\nExamples:\n```bash\n# Expand bottom edge by 50px (increase height)\nagent-canvas resize-elements -i abc123 --bottom 50\n\n# Expand both right and bottom (like dragging bottom-right corner)\nagent-canvas resize-elements -i abc123 --right 50 --bottom 30\n\n# Contract left edge by 20px (decrease width)\nagent-canvas resize-elements -i abc123 --left -20\n\n# Expand all sides uniformly\nagent-canvas resize-elements -i abc123 --top 25 --bottom 25 --left 25 --right 25\n```\n\n### Read Scene\n```bash\nagent-canvas read                # TOON format (compact, ~7% of JSON size)\nagent-canvas read --with-style   # Include stroke/bg colors\nagent-canvas read --json         # Raw Excalidraw scene JSON\n```\n\n**TOON output structure:**\n```\nshapes[N]{id,type,x,y,w,h,angle,labelId,note}       # rectangle, ellipse, diamond, polygon\nlines[N]{id,type,x,y,endX,endY,via,angle,note}      # line, arrow\nlabels[N]{id,containerId,content,x,y,w,h}           # text bound to shapes (via labelId)\ntexts[N]{id,content,x,y,w,h,angle,note}              # standalone text elements\ngroups[N]{id,elementIds}                             # element groupings\n```\n\n- `labelId` in shapes links to `id` in labels\n- `via` shows intermediate points in same format as `--via` input (`\"x1,y1;x2,y2\"` or `null` if none)\n- `--with-style` adds `stroke`, `bg` fields\n- `--json` returns full Excalidraw format (use with `jq` to query specific elements)\n\n### Save, Export and Clear\n```bash\nagent-canvas save file.excalidraw\nagent-canvas export -o out.png [--scale 2] [--dark] [--no-background]\nagent-canvas clear                # Clear all elements from the canvas, use with caution!\n```\n**Note**: Before running `clear`, ask the user if they want to save or export the current canvas first.\n⚠️ALWAYS prefer `agent-canvas new` over `agent-canvas clear` only use `clear` when user has confirmed!⚠️\n\n## Design Philosophy\n\n**You are a perfectionist. If it looks slightly off, it IS off. Fix it.**\n\n**Core principle: Consistency reflects meaning.**\n\n- **Same relationship → Same alignment & spacing**\n  - Elements with the same relationship should share identical alignment\n  - Gaps between same-level elements should be equal throughout\n  - Snap to grid (e.g., 10px units) for precision\n\n- **Same type → Same color & size**\n  - Same-type nodes share identical dimensions\n  - Same color = same meaning; max 3-4 colors; less is more\n  - Important elements = larger size\n\n- **Details matter**\n  - Arrows connect precisely to shape edges\n  - Review via `export` and fix any imperfections\n\n## IMPERATIVE GUIDE\n\n1. **Coordinates**: Origin (0,0) is top-left. X→right, Y→down. Colors in hex (`#FF5733`) or `transparent`.\n\n2. **Workflow**: Read canvas → Plan layout → Draw shapes → Add arrows/lines(if necessary) → **Adjust**.\n   - **IMPORTANT**: Canvas content is auto-saved to browser localStorage. Always run `agent-canvas read` first to check for existing content before drawing.\n   - If old content exists, ask the user whether to: (a) continue editing, (b) clear and start fresh, or (c) save/export first then clear.\n   - Shapes define the layout and provide exact coordinates\n   - Arrow endpoints depend on shape positions — drawing arrows first leads to misalignment\n   - **Adjust**: After initial draft, run `read` and `export` to review. Check against Design Philosophy:\n     - Alignment issues? → `move-elements` to snap to grid\n     - Inconsistent spacing? → `move-elements` to equalize gaps\n     - Overlapping elements? → `move-elements` or `delete-elements` and redraw\n     - Wrong sizes? → `delete-elements` and redraw\n     - Misaligned arrows? → `delete-elements` and redraw with correct endpoints\n     - Container size issue? → `resize-elements` to adjust to perfect size \n\n3. **Progressive Canvas Reading**:\n   - `read` - Start here. Compact TOON format (~7% of JSON size)\n   - `read --with-style` - Add color info when styling matters\n   - `export -o canvas.png` + view image - For visual/spatial understanding\n   - `read --json | jq '.elements[] | select(.id==\"<id>\")'` - Query specific element details\n\n4. **Batch Commands**: Chain with `&&` for efficiency. DO NOT WRITE BASH COMMENT IN DRAWING COMMANDS\n   ```bash\n   agent-canvas add-shape -t rectangle -x 100 -y 100 -l \"A\" && \\\n   agent-canvas add-shape -t rectangle -x 300 -y 100 -l \"B\" && \\\n   agent-canvas add-arrow -x 220 -y 130 --end-x 300 --end-y 130\n   ```\n\n## Drawing Tutorials\n\n**Before drawing, identify the diagram type and check for tutorials:**\n\n1. Determine what type of diagram the user wants (flowchart, architecture, mindmap, UI mockup, etc.)\n2. Read [references/REFERENCE.md](references/REFERENCE.md) — this is the **tutorial index** listing all available diagram tutorials\n3. **If a matching tutorial exists**: Read the specific tutorial FIRST before drawing — tutorials contain type-specific rules, layout patterns, and best practices\n4. Apply the tutorial guidelines while drawing","tags":["agent","canvas","whq25","agent-skills","drawing","excalidraw"],"capabilities":["skill","source-whq25","skill-agent-canvas","topic-agent","topic-agent-skills","topic-drawing","topic-excalidraw"],"categories":["agent-canvas"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/WHQ25/agent-canvas/agent-canvas","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add WHQ25/agent-canvas","source_repo":"https://github.com/WHQ25/agent-canvas","install_from":"skills.sh"}},"qualityScore":"0.458","qualityRationale":"deterministic score 0.46 from registry signals: · indexed on github topic:agent-skills · 17 github stars · SKILL.md body (14,338 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-23T01:02:10.764Z","embedding":null,"createdAt":"2026-04-18T23:07:01.533Z","updatedAt":"2026-04-23T01:02:10.764Z","lastSeenAt":"2026-04-23T01:02:10.764Z","tsv":"'-20':1392 '-4':642,1698 '/.agent-canvas/config.json':230 '/cli':82,91,115,124 '0':1191,1193,1197,1727,1728 '0.13.0':83,92,99,116,125,138 '0.6':868,926 '0c8599':737 '1':141,641,836,857,929,1724,2009 '1.35':878,931 '1.42':900,904,936,942 '100':1097,1099,1103,1195,1201,1960,1962,1976 '10px':1676 '120':1154,1156 '124.8':927,935 '13':919,924 '130':1988,1996 '16':520,774,862,925,930 '175':1138,1144 '1971c2':728 '1e1':636 '2':153,644,844,880,909,913,1573,1743,2024 '20':522 '200':1114 '20px':1380 '21.6':932,941 '220':1986 '232':938,947 '240':955 '25':1406,1408,1410,1412 '28':525 '280':1148,1157 '2f9e44':731 '3':1697,1893,2038 '30':1375 '300':1107,1974,1992 '36':527 '39820':166,182 '39821':168,194 '4':1935,2062 '495057':744 '50':893,896,1085,1113,1199,1352,1373 '50px':1340 '520':1140,1155 '55':901,905,937,943 '60':910,914 '6741d9':741 '7':1423,1903 '8000':243 '8001':247 '86':944,949 '90':957,1046,1120,1179 '99e9':738 'a5d8ff':729 'abc123':1350,1371,1390,1404 'absolut':1060 'action':279 'activ':342,345 'actual':611,807 'ad':700,1249 'add':77,110,487,494,621,752,768,977,991,1094,1135,1187,1208,1540,1751,1911,1955,1969,1983 'add-arrow':990,1093,1134,1982 'add-imag':1207 'add-lin':976 'add-polygon':1186 'add-shap':751,1954,1968 'add-text':493 'adjust':782,1755,1823,1889 'agent':2,26,53,56,80,89,113,122,131,150,177,187,199,209,218,239,253,266,287,312,334,344,349,363,373,389,401,413,427,491,749,974,988,1091,1132,1184,1205,1258,1265,1273,1286,1297,1304,1344,1365,1384,1398,1417,1428,1438,1562,1567,1579,1612,1617,1769,1952,1966,1980 'agent-canva':1,52,55,79,88,112,121,130,149,176,186,198,208,217,238,265,286,311,333,348,362,372,388,400,412,426,490,748,973,987,1090,1131,1183,1204,1257,1264,1272,1285,1296,1303,1343,1364,1383,1397,1416,1427,1437,1561,1566,1578,1611,1616,1768,1951,1965,1979 'align':506,552,1651,1661,1837 'alway':1609,1766 'anchor':511,528,537,558 'angl':1044,1457,1473,1500 'anim':690,691 'annot':578,589 'appli':2063 'architectur':2019 'arrow':832,971,992,1002,1010,1016,1019,1070,1078,1095,1109,1116,1136,1150,1476,1709,1811,1818,1873,1984 'arrow-specif':1001 'arrow-typ':1018,1108,1149 'arrowhead':1006,1009 'arrows/lines':1752 'ask':17,62,1595,1784 'auto':693,811,829,1761 'auto-expand':828 'auto-s':810 'auto-sav':1760 'auto-scrol':692 'automat':276,470 'avail':2035 'avoid':1039 'ax':497,554 'ay':498,555 'b':1792,1978 'b197fc':742 'b2f2bb':732 'back':307,688,1123 'background':273,657,722,1577 'background-color':656 'badg':563 'bar':1011 'base64':1239 'bash':50,75,148,175,237,264,285,332,387,489,747,972,1068,1182,1203,1256,1335,1415,1560,1945,1950 'batch':1936 'becom':410,485 'bend':1162 'best':2060 'bg':1542 'blue':727 'bottom':1293,1337,1351,1357,1361,1374,1407 'bottom-right':1360 'bottomcent':596 'bottomleft':557,593 'bottomright':601 'bound':550,1487 'box':551 'break':831 'browser':147,1245,1764 'bun':70,76,108,109 'c':1798 'calcul':818,837,847,858,881 'canva':3,12,27,36,54,57,81,90,114,123,132,144,151,161,178,188,200,210,219,240,254,263,267,288,296,313,315,318,323,335,350,357,364,369,374,380,390,402,414,419,422,428,433,436,441,457,463,473,492,750,975,989,1092,1133,1185,1206,1242,1259,1266,1274,1287,1298,1305,1345,1366,1385,1399,1418,1429,1439,1563,1568,1580,1587,1607,1613,1618,1746,1757,1770,1895,1953,1967,1981 'canvas':321,339,384,409,452,481 'canvas.png':1919 'case':445,1024 'case-insensit':444 'caution':1590 'center':508,582,583 'chain':1938 'char':920 'charact':874 'charcount':866,871 'check':45,1774,1833,2006 'circuit':1048 'cjk':873 'clear':1559,1581,1582,1594,1619,1622,1793,1802 'cli':29,47,155 'click':460 'close':275 'color':514,634,658,715,719,784,789,796,1436,1683,1693,1699,1737,1912 'command':156,260,626,1937,1949 'comment':1946 'common':559,628 'compact':1422,1900 'config':179,189,201,205,211,220,226,257 'configur':163,173 'confirm':135,1626 'conflict':172 'connect':1030,1710 'consist':1645 'contain':107,1882,2052 'containerid':1480 'content':1481,1495,1758,1777,1782 'continu':1790 'contract':1317,1376 'control':542,1035,1072,1081,1165 'coordin':833,1061,1330,1725,1810 'core':1643 'corner':1176,1363 'correct':1880 'creat':21,38,355,392,396,606,801 'create-fold':391 'critic':817 'cross':667 'cross-hatch':666 'current':215,295,379,472,1606 'curv':1032,1075,1079,1161 'cyan':736 'dark':721,1574 'dash':649 'data':468,1235 'decreas':1381 'dee2e6':745 'default':164,225,259,523,556,635,643,651,659,669,776,791,864,1028,1224 'defin':1174,1804 'delet':404,407,451,474,479,1261,1861,1868,1875 'delete-el':1260,1860,1867,1874 'delete-fold':403 'delta':1280,1283 'delta-i':1282 'delta-x':1279 'depend':1813 'descript':569,675,1022 'design':1627,1835 'detail':1707,1934 'determin':1074,2010 'diagram':5,22,39,684,1049,2003,2014,2036 'diamond':763,906,1014,1322,1462 'differ':97 'dimens':617,808,839,860,1228,1691 'direct':849,1029,1076 'dot':650,1012 'draft':1826 'drag':1359 'draw':4,19,158,622,625,820,1749,1779,1817,1948,1997,2000,2050,2068 'e.g':1675 'e03131':725 'e1e':637 'edg':1319,1338,1378,1714 'edit':1791 'effici':1941 'elbow':1041,1115,1152,1172 'element':623,678,701,703,707,711,1255,1262,1269,1277,1290,1301,1308,1311,1314,1318,1327,1348,1369,1388,1402,1504,1509,1555,1584,1653,1667,1704,1841,1850,1855,1858,1862,1869,1876,1887,1928,1933 'elementid':1508 'ellips':762,897,922,933,939,1321,1461 'embed':1237 'end':982,985,996,999,1008,1101,1105,1142,1146,1990,1994 'end-arrowhead':1007 'end-i':984,998,1104,1145,1993 'end-x':981,995,1100,1141,1989 'endi':1471 'endpoint':1812,1881 'endx':1470 'english/numbers':869 'env':251 'equal':1670,1852 'estim':851 'etc':2023 'exact':1809 'exampl':915,1334 'excalidraw':11,35,292,717,827,1443,1547 'exist':1776,1783,2043 'expand':830,1315,1336,1353,1393 'export':1557,1569,1604,1717,1830,1917 'f':346,1210 'f08c00':734 'f2':739 'ff5733':1740 'ffc9c9':726 'ffec99':735 'field':1543 'file':258,284,293,300,303 'file.excalidraw':290,1565 'fill':653,662 'fill-styl':661 'first':1608,1772,1800,1819,2048 'fix':1641,1719 'flag':250 'flow':1038 'flowchart':6,1047,1129,2018 'folder':347,381,386,393,399,405,408,418,420,425,432,439,476 'font':502,517,779 'font-siz':501 'fontsiz':773,861,867,872,877 'footnot':594,602 'format':1063,1217,1421,1525,1548,1902 'formula':842 'fresh':1796 'full':1546 'g':78,87,111,120 'gap':1662,1853 'get':212 'gif':1220 'give':538 'gray':743 'green':730 'grid':1674,1845 'group':1300,1505,1510 'group-el':1299 'guid':1723 'guidelin':2066 'h':758,806,948,956,1214,1456,1485,1499 'hachur':665 'hatch':668 'header':598 'height':894,902,911,940,1342 'help':682 'hex':1739 'hover':455 'http':169,192,196,245 'http-port':191,244 'icon':565 'id':607,802,1250,1451,1466,1479,1494,1507,1516,1930 'idea':25 'ident':1660,1690 'identifi':2001 'imag':1202,1209,1227,1234,1248,1323,1921 'imper':1722 'imperfect':1721 'import':1703,1756 'includ':1434 'inconsist':1846 'increas':1341 'independ':326 'index':2032 'indexeddb':1246 'info':1913 'inherit':785 'initi':1825 'input':1528 'insensit':446 'insert':962 'insid':482,770 'instal':42,49,61,74,86,94,119 'install/upgrade':127 'intent':685 'interact':32 'intermedi':1050,1057,1521 'issu':1838,1884 'iter':1130 'jpeg':1219 'jq':1551,1927 'json':1425,1441,1445,1544,1905,1926 'l':524,759,765,1963,1977 'label':566,586,766,778,783,794,814,815,916,961,1477,1518 'label-font-s':777 'label-stroke-color':793 'labelid':1458,1491,1511 'larg':706 'larger':1705 'later':689 'layout':620,1748,1806,2057 'lead':1820 'left':507,590,614,1080,1086,1126,1294,1377,1391,1409,1732 'leftcent':576 'less':1700 'level':1666 'liber':680 'light':723 'like':1358 'line':970,978,1027,1033,1089,1464,1475 'linecount':876,969 'link':1514 'list':202,336,337,2033 'load':283,289,291,298 'local':1329 'localstorag':1765 'long':960 'look':1635 'loop':1122 'm':521 'main':585 'manag':67,105,316,382 'manipul':1254 'manual':964 'match':2041 'matter':1708,1916 'max':1696 'mean':1647,1695 'menu':461 'messag':917 'meta':671 'mindmap':2020 'minim':713 'minimum':838,882 'misalign':1822,1872 'mockup':2022 'move':416,421,430,1276,1840,1849,1857 'move-el':1275,1839,1848,1856 'move-to-fold':415,429 'multipl':320,1117 'must':448,835 'n':352,394,515,672,963,1215,1450,1465,1478,1493,1506 'name':353,366,371,377,395,406,442 'necessari':1754 'never':850 'new':351,356,376,398,1614 'newli':699 'no-background':1575 'node':1688 'none':1015,1536 'normal':710 'note':440,516,595,673,681,1459,1474,1501,1591 'npm':72,85,118 'null':1534 'o':1570,1918 'offset':1167 'old':1781 'one':232,1071,1230 'one-tim':231 'open':145 'option':358,499,500,630 'organ':383,1037 'origin':1226,1726 'otherwis':117 'out.png':1571 'output':1447 'overlap':1040,1854 'overrid':234,798 'p':1189 'packag':66,104 'palett':718 'path':106,304,1170,1180 'pattern':1124,2058 'perfect':1891 'perfectionist':1632 'philosophi':1628,1836 'plan':1747 'png':1218 'point':546,1036,1051,1058,1073,1082,1118,1166,1173,1522 'polygon':1181,1188,1463 'port':162,165,171,181,185,193,197,213,216,222,242,246,249,256 'posit':541,615,1816 'practic':2061 'precis':540,619,1679,1711 'prefer':69,1610 'principl':1644 'prioriti':248 'progress':1894 'proport':1233 'provid':1808 'queri':1553,1931 'queue':918 'quick':139 'raw':1442 'read':687,1413,1419,1430,1440,1745,1771,1828,1896,1897,1907,1925,2025,2044 'recalcul':966 'recommend':714 'rectangl':761,890,1320,1460,1958,1972 'red':724 'redraw':1864,1871,1878 'refer':261 'references/reference.md':2026,2027 'reflect':1646 'relationship':1649,1657 'rememb':301 'remov':435 'renam':375,378 'render':536 'reset':221,223 'resiz':1289,1310,1313,1347,1368,1387,1401,1886 'resize-el':1288,1312,1346,1367,1386,1400,1885 'respect':1332 'return':604,799,1247,1545 'review':1715,1832 'right':509,579,1043,1295,1355,1362,1372,1411,1734 'right-angl':1042 'rightcent':587 'rotat':1268,1333 'rotate-el':1267 'round':951,1031,1069,1111,1160 'rule':2056 'run':1593,1767,1827 'same-level':1664 'same-typ':1685 'save':228,306,314,471,1556,1564,1602,1762 'save/export':1799 'scale':1232,1572 'scene':467,1414,1444 'scroll':694,712 'select':1929 'semant':674 'server':270 'set':180,183,190,195 'shape':571,581,592,600,654,746,753,772,800,822,883,1449,1489,1513,1713,1750,1803,1815,1956,1970 'share':627,1659,1689 'sharp':1025 'show':203,214,697,1520 'side':577,588,1395 'sidebar':459 'signatur':603 'sinc':530 'size':503,518,532,780,812,816,823,884,1426,1684,1706,1866,1883,1892,1906 'sketch':24 'skill' 'skill-agent-canvas' 'slight':1636 'small':702,826 'smaller':854,889 'snap':1672,1843 'solid':648,652,664,670 'sourc':207 'source-whq25' 'space':1652,1847 'specif':1003,1554,1932,2046,2055 'specifi':544,1056,1229 'standalon':1502 'start':140,142,152,236,241,262,268,269,1005,1795,1898 'start-arrowhead':1004 'status':575 'step':856,879 'store':325,1243 'straight':1026,1169 'stroke':513,631,633,639,646,720,788,795,1541 'stroke-color':512,632,787 'stroke-styl':645 'stroke-width':638 'stroke/bg':1435 'structur':1448 'style':629,647,663,1433,1539,1910,1915 'subtitl':568 'support':319,1216 'svg':1221 'switch':330,359,367,469 'system':1331 'tag':564 'text':488,495,505,531,549,560,605,769,859,1486,1492,1503 'text-align':504 'textheight':875,895,903,912,928 'textwidth':865,870,892,899,908,923 'throughout':1671 'time':233 'timestamp':573 'tip':958,1158 'titl':584,597 'tool':30 'toon':1420,1446,1901 'top':613,1292,1405,1731 'top-left':612,1730 'topcent':567 'topic-agent' 'topic-agent-skills' 'topic-drawing' 'topic-excalidraw' 'topleft':562 'topright':572 'toward':1163 'transpar':660,1742 'triangl':1013 'turn':1045,1121 'tutori':1998,2008,2031,2037,2042,2047,2051,2065 'type':561,760,1017,1020,1021,1110,1151,1452,1467,1681,1687,2004,2012,2054 'type-specif':2053 'u':340 'ui':454,2021 'understand':683,1924 'ungroup':411,434,486,1307 'ungroup-el':1306 'uniform':1396 'uniqu':450 'unit':1677 'unknown':534 'updat':968 'upgrad':100 'use':13,44,101,154,354,365,679,764,792,840,845,853,885,945,1023,1053,1549,1588,1621 'user':16,64,341,1597,1624,1786,2016 'valu':206,848,855,887,1324 'var':252 'verifi':128 'version':58,96,133,136,574 'vertic':1077 'via':174,235,453,1052,1054,1112,1153,1472,1490,1519,1527,1716 'view':1920 'viewport':695 'violet':740 'visual':8,20,41 'visual/spatial':1923 'w':757,805,946,954,1213,1455,1484,1498 'want':1600,2017 'webp':1222 'websocket':167,184 'whether':1787 'width':640,891,898,907,934,1382 'width/height':1223 'with-styl':1431,1537,1908 'workflow':1744 'write':1944 'wrong':1865 'ws':255 'x':608,610,755,803,979,983,993,997,1084,1096,1102,1137,1143,1190,1194,1198,1211,1251,1253,1281,1453,1468,1482,1496,1733,1959,1973,1985,1991 'x1':1064,1529 'x2':1066,1531 'xl':526 'y':609,756,804,980,986,994,1000,1098,1106,1139,1147,1192,1196,1200,1212,1252,1284,1454,1469,1483,1497,1735,1961,1975,1987,1995 'y1':1065,1530 'y2':1067,1532 'yellow':733 'zoom':704,708","prices":[{"id":"6da15a45-9387-4095-af2f-a5352993ece4","listingId":"1a5e7d82-166d-4e80-8a79-f13f17d16065","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"WHQ25","category":"agent-canvas","install_from":"skills.sh"},"createdAt":"2026-04-18T23:07:01.533Z"}],"sources":[{"listingId":"1a5e7d82-166d-4e80-8a79-f13f17d16065","source":"github","sourceId":"WHQ25/agent-canvas/agent-canvas","sourceUrl":"https://github.com/WHQ25/agent-canvas/tree/main/skills/agent-canvas","isPrimary":false,"firstSeenAt":"2026-04-18T23:07:01.533Z","lastSeenAt":"2026-04-23T01:02:10.764Z"}],"details":{"listingId":"1a5e7d82-166d-4e80-8a79-f13f17d16065","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"WHQ25","slug":"agent-canvas","github":{"repo":"WHQ25/agent-canvas","stars":17,"topics":["agent","agent-skills","drawing","excalidraw"],"license":"mit","html_url":"https://github.com/WHQ25/agent-canvas","pushed_at":"2026-03-01T16:22:20Z","description":"Excalidraw for AI agents — draw diagrams via CLI.","skill_md_sha":"5f310d6081c9afb69ffffb41ae83310729a61662","skill_md_path":"skills/agent-canvas/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/WHQ25/agent-canvas/tree/main/skills/agent-canvas"},"layout":"multi","source":"github","category":"agent-canvas","frontmatter":{"name":"agent-canvas","license":"MIT","description":"Draw diagrams, flowcharts, and visualizations on an Excalidraw canvas. Use when the user asks to draw, visualize, create diagrams, or sketch ideas."},"skills_sh_url":"https://skills.sh/WHQ25/agent-canvas/agent-canvas"},"updatedAt":"2026-04-23T01:02:10.764Z"}}