| name | excalidraw |
| description | Create hand-drawn style diagrams and flowcharts using Excalidraw |
| type | tool |
Create hand-drawn style diagrams, flowcharts, architecture diagrams, and mind maps using the Excalidraw format. Diagrams are rendered interactively in the Canvas panel.
Use create_excalidraw_diagram when the user wants to visualize structure, flow, or relationships — not raw numbers.
| Use this skill for... | Use visualization skill for... |
|---|---|
| System architecture diagram | Sales figures by quarter |
| Flowchart or decision tree | Survey response percentages |
| Sequence / interaction diagram | Stock price over time |
| Mind map or concept map | Market share breakdown |
| Shapes, boxes, arrows, labels | Any x/y or segment/value data |
Choose based on user intent. For Swimlane, Class, Sequence, ER, and DFD diagrams, read diagram-patterns.md before generating.
| Intent | Type | Pattern |
|---|---|---|
| Process steps, workflow, decisions | Flowchart | Rectangles + diamonds + arrows (see Example) |
| System components, dependencies | Architecture | Zone rectangles + boxes + arrows |
| Concept hierarchy, brainstorming | Mind Map | Center node + radial branch arrows |
| Entity connections, associations | Relationship | Boxes + labeled arrows |
| Cross-functional workflow, actor responsibilities | Swimlane | diagram-patterns.md |
| OOP class structure, inheritance | Class Diagram | diagram-patterns.md |
| Object interactions over time | Sequence Diagram | diagram-patterns.md |
| Database entities and relationships | ER Diagram | diagram-patterns.md |
| Data transformation, data movement | DFD | diagram-patterns.md |
Use these colors consistently across all diagrams.
| Name | Hex | Use |
|---|---|---|
| Blue | #4a9eed | Primary actions, links |
| Amber | #f59e0b | Warnings, highlights |
| Green | #22c55e | Success, positive |
| Red | #ef4444 | Errors, negative |
| Purple | #8b5cf6 | Accents, special items |
| Cyan | #06b6d4 | Info, secondary |
| Color | Hex | Good For |
|---|---|---|
| Light Blue | #a5d8ff | Input, sources, primary nodes |
| Light Green | #b2f2bb | Success, output, completed |
| Light Orange | #ffd8a8 | Warning, pending, external |
| Light Purple | #d0bfff | Processing, middleware |
| Light Red | #ffc9c9 | Error, critical |
| Light Yellow | #fff3bf | Notes, decisions |
| Light Teal | #c3fae8 | Storage, data |
opacity: 35 for layer grouping)| Color | Hex | Good For |
|---|---|---|
| Blue zone | #dbe4ff | UI / frontend layer |
| Purple zone | #e5dbff | Logic / agent layer |
| Green zone | #d3f9d8 | Data / tool layer |
type, id (unique string), x, y, width, height
strokeColor="#1e1e1e", backgroundColor="transparent", fillStyle="solid", strokeWidth=2, roughness=1, opacity=100
Rectangle
{ "type": "rectangle", "id": "r1", "x": 100, "y": 100, "width": 200, "height": 80,
"roundness": { "type": 3 }, "backgroundColor": "#a5d8ff", "fillStyle": "solid" }
roundness: { type: 3 } for rounded cornersEllipse
{ "type": "ellipse", "id": "e1", "x": 100, "y": 100, "width": 150, "height": 150 }
Diamond
{ "type": "diamond", "id": "d1", "x": 100, "y": 100, "width": 150, "height": 150 }
Label on shape (PREFERRED — no separate text element needed)
{ "type": "rectangle", "id": "r1", "x": 100, "y": 100, "width": 200, "height": 80,
"label": { "text": "My Label", "fontSize": 20 } }
"label": { "text": "connects" }Standalone Text (titles, annotations only)
{ "type": "text", "id": "t1", "x": 150, "y": 50, "text": "Title", "fontSize": 24 }
x is the LEFT edge. To center at position cx: set x = cx - text.length × fontSize × 0.25Arrow
{ "type": "arrow", "id": "a1", "x": 300, "y": 150, "width": 150, "height": 0,
"points": [[0,0],[150,0]], "endArrowhead": "arrow",
"startBinding": { "elementId": "r1", "fixedPoint": [1, 0.5] },
"endBinding": { "elementId": "r2", "fixedPoint": [0, 0.5] } }
points: [dx, dy] offsets from element x, yendArrowhead: null | "arrow" | "bar" | "dot" | "triangle"strokeStyle: "solid" | "dashed" | "dotted"fixedPoint for bindings: top [0.5,0], bottom [0.5,1], left [0,0.5], right [1,0.5]cameraUpdate — sets the viewport
{ "type": "cameraUpdate", "width": 800, "height": 600, "x": 0, "y": 0 }
x, y: top-left corner of visible area (scene coordinates)cameraUpdate as the first element to frame the diagramid neededdelete — removes elements by ID
{ "type": "delete", "ids": "r1,a1,t2" }
The diagram displays at ~700px width. Use these standard sizes:
| Size | Width × Height | Use When |
|---|---|---|
| S | 400 × 300 | 2–3 elements, close-up |
| M | 600 × 450 | Small diagram section |
| L | 800 × 600 | Standard (default) |
| XL | 1200 × 900 | Large overview |
| XXL | 1600 × 1200 | Very complex diagrams |
Font size rules:
Element sizing rules:
When the user asks to modify a diagram, you will receive the current elements in context. Respond with the complete updated elements array:
id for unchanged elements[
{ "type": "cameraUpdate", "width": 800, "height": 600, "x": 0, "y": 0 },
{ "type": "rectangle", "id": "el-1",
"x": 300, "y": 60, "width": 160, "height": 60,
"strokeColor": "#4a9eed", "backgroundColor": "#a5d8ff",
"fillStyle": "solid", "roundness": { "type": 3 },
"label": { "text": "Start", "fontSize": 18 } },
{ "type": "diamond", "id": "el-2",
"x": 280, "y": 170, "width": 200, "height": 90,
"strokeColor": "#f59e0b", "backgroundColor": "#fff3bf",
"fillStyle": "solid",
"label": { "text": "Decision?", "fontSize": 16 } },
{ "type": "arrow", "id": "el-3",
"x": 380, "y": 120, "width": 0, "height": 50,
"points": [[0,0],[0,50]], "endArrowhead": "arrow",
"startBinding": { "elementId": "el-1", "fixedPoint": [0.5, 1] },
"endBinding": { "elementId": "el-2", "fixedPoint": [0.5, 0] } },
{ "type": "rectangle", "id": "el-4",
"x": 300, "y": 320, "width": 160, "height": 60,
"strokeColor": "#22c55e", "backgroundColor": "#b2f2bb",
"fillStyle": "solid", "roundness": { "type": 3 },
"label": { "text": "End", "fontSize": 18 } },
{ "type": "arrow", "id": "el-5",
"x": 380, "y": 260, "width": 0, "height": 60,
"points": [[0,0],[0,60]], "endArrowhead": "arrow",
"startBinding": { "elementId": "el-2", "fixedPoint": [0.5, 1] },
"endBinding": { "elementId": "el-4", "fixedPoint": [0.5, 0] } }
]
elements must be valid JSON. Never add // or /* */ comments inside the array; they break JSON parsing#757575. For text on light fills use dark variants (#15803d not #22c55e)Element Format:
Deep research with structured reports and charts. ONLY use when the user explicitly requests research/analysis, or needs data visualization with charts, or quantitative/comparative analysis across multiple sources. Do NOT use for simple questions or quick lookups.
Search the web and fetch content from URLs for current information, news, and research topics.
Web browser automation for tasks requiring UI interaction, login-protected pages, or human-like browsing when APIs are insufficient.
Autonomous coding agent. Delegate any task that involves understanding, writing, or running code — from a GitHub issue, a bug report, or a user request. It explores, implements, and verifies on its own.
Create, modify, and manage Excel spreadsheets.
Manage GitHub issues, PRs, branches, and repositories via OAuth (3LO). For reading issues or PR details, not for deep code analysis — delegate that to code-agent.