nice-field-0f080db0f.7.azurestaticapps.net
Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.
First seen 2026-11-05 · Last seen 2026-11-05 · Source: webmcp.com
Answer 1 · Act 7 · Transact 0 · Score: Not yet scored
Tool inspector
add_shape
Add a single labelled shape. x/y are the top-left corner. Use this for every box in an architecture diagram (services, load balancers, databases, caches), and for adding one decision diamond or start/end ellipse to a diagram that already exists. Collision is handled for you: if the spot you ask for is taken, the box is placed at the nearest free position instead and the response tells you where it actually landed — so boxes can never overlap. ALWAYS use the x/y in the response, not the ones you requested, when positioning anything relative to this box. Returns the new element's id, which you need for bind_arrow.
Input schema
| Property | Type | Required | Description |
|---|---|---|---|
x |
number | yes | Top-left x coordinate. |
y |
number | yes | Top-left y coordinate. |
width |
number | yes | Width in pixels. Use 180 unless the label needs more. |
height |
number | yes | Height in pixels. Use 80 unless the label needs more. |
label |
string | yes | Text shown centred inside the shape. |
shape |
string | no | rectangle for a service, component or store (the default); diamond for a decision or branch; ellipse for a start or end point. |
backgroundColor |
string | no | OPTIONAL fill colour as a hex string. Omit it unless the user asked for colour — an uncoloured diagram must stay uncoloured. |
strokeColor |
string | no | OPTIONAL border colour as a hex string. Omit unless the user asked for colour. |
fillStyle |
string | no | OPTIONAL fill rendering. Defaults to 'solid' — leave it out unless the user asks for 'hachure' (single-line sketchy shading) or 'cross-hatch'. |
Raw JSON schema
{
"type": "object",
"properties": {
"x": {
"type": "number",
"description": "Top-left x coordinate."
},
"y": {
"type": "number",
"description": "Top-left y coordinate."
},
"width": {
"type": "number",
"description": "Width in pixels. Use 180 unless the label needs more."
},
"height": {
"type": "number",
"description": "Height in pixels. Use 80 unless the label needs more."
},
"label": {
"type": "string",
"description": "Text shown centred inside the shape."
},
"shape": {
"type": "string",
"enum": [
"rectangle",
"diamond",
"ellipse"
],
"description": "rectangle for a service, component or store (the default); diamond for a decision or branch; ellipse for a start or end point."
},
"backgroundColor": {
"type": "string",
"description": "OPTIONAL fill colour as a hex string. Omit it unless the user asked for colour — an uncoloured diagram must stay uncoloured."
},
"strokeColor": {
"type": "string",
"description": "OPTIONAL border colour as a hex string. Omit unless the user asked for colour."
},
"fillStyle": {
"type": "string",
"enum": [
"solid",
"hachure",
"cross-hatch"
],
"description": "OPTIONAL fill rendering. Defaults to 'solid' — leave it out unless the user asks for 'hachure' (single-line sketchy shading) or 'cross-hatch'."
}
},
"required": [
"x",
"y",
"width",
"height",
"label"
]
}
Similar websites
econsor.de
German digital agency building portals, e-commerce sites and online marketing, combining strategy, design and AI to grow clients' visibility and customer base.
inkframe-eta.vercel.app
Browser-native Elah video editor for 9:16 and 16:9 exports
agentdesk-demo.vercel.app
Meridian Ops
eworker.ca
E-Worker is business infrastructure powered by AI, with focused apps and connected business work.