Tool tree
Agent-native infinite whiteboard for visual thinking powered by WebMCP
Implementation
gradeNot graded
gradeNot graded
get_canvas_stateAnswer
Returns a structured JSON representation of all elements currently on the AetherDraw canvas. Includes shapes, text labels, arrows, connections, groups, colors, and overall canvas bounds. Always call this first to inspect what the user has drawn before making changes.
View tool JSON
{
"name": "get_canvas_state",
"kind": "answer",
"impl": "imperative",
"description": "Returns a structured JSON representation of all elements currently on the AetherDraw canvas. Includes shapes, text labels, arrows, connections, groups, colors, and overall canvas bounds. Always call this first to inspect what the user has drawn before making changes.",
"inputSchema": {
"type": "object",
"properties": {
"includeDeleted": {
"type": "boolean",
"description": "Whether to include soft-deleted elements",
"default": false
}
}
}
}get_selected_elementsAnswer
Returns only the canvas elements currently selected (highlighted) by the human user. Use this to perform context-aware operations on whatever the user is focused on.
View tool JSON
{
"name": "get_selected_elements",
"kind": "answer",
"impl": "imperative",
"description": "Returns only the canvas elements currently selected (highlighted) by the human user. Use this to perform context-aware operations on whatever the user is focused on.",
"inputSchema": {
"type": "object",
"properties": {}
}
}find_elementsAnswer
Search the canvas for elements matching a text query, shape type, or color. Returns matching elements with their IDs and properties to locate specific nodes for editing.
View tool JSON
{
"name": "find_elements",
"kind": "answer",
"impl": "imperative",
"description": "Search the canvas for elements matching a text query, shape type, or color. Returns matching elements with their IDs and properties to locate specific nodes for editing.",
"inputSchema": {
"type": "object",
"properties": {
"query": {
"type": "string",
"description": "Case-insensitive text substring to search for in node labels or text"
},
"type": {
"type": "string",
"enum": [
"rectangle",
"ellipse",
"diamond",
"arrow",
"text",
"line",
"frame"
],
"description": "Filter by shape type"
},
"strokeColor": {
"type": "string",
"description": "Filter by stroke color (hex)"
},
"backgroundColor": {
"type": "string",
"description": "Filter by background fill color (hex)"
}
}
}
}create_diagramAction
Generates a complete, beautifully organized diagram on the canvas in one shot. Supports system architectures, flowcharts, ERDs, mindmaps, and sequence diagrams. Automatically applies graph layout algorithms (Dagre) to avoid overlapping boxes and binds connecting arrows. The canvas automatically centers and zooms to fit the generated diagram.
View tool JSON
{
"name": "create_diagram",
"kind": "act",
"impl": "imperative",
"description": "Generates a complete, beautifully organized diagram on the canvas in one shot. Supports system architectures, flowcharts, ERDs, mindmaps, and sequence diagrams. Automatically applies graph layout algorithms (Dagre) to avoid overlapping boxes and binds connecting arrows. The canvas automatically centers and zooms to fit the generated diagram.",
"inputSchema": {
"type": "object",
"properties": {
"title": {
"type": "string",
"description": "Optional diagram title shown at the top"
},
"diagramType": {
"type": "string",
"enum": [
"architecture",
"flowchart",
"mindmap",
"erd",
"sequence",
"user_journey"
],
"description": "Type of diagram to generate",
"default": "architecture"
},
"nodes": {
"type": "array",
"description": "List of nodes/boxes to generate",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string",
"description": "Unique node ID for connection targeting (e.g. 'api_gateway', 'db')"
},
"label": {
"type": "string",
"description": "Visible text inside the node"
},
"type": {
"type": "string",
"enum": [
"rectangle",
"diamond",
"ellipse",
"cylinder",
"cloud",
"hexagon"
],
"description": "Shape type: rectangle for services, diamond for decisions, ellipse/cylinder for databases, cloud for external APIs",
"default": "rectangle"
},
"role": {
"type": "string",
"description": "Semantic role (e.g. 'frontend', 'service', 'database', 'cache', 'queue')"
}
},
"required": [
"id",
"label"
]
}
},
"connections": {
"type": "array",
"description": "List of directed arrows between nodes",
"items": {
"type": "object",
"properties": {
"from": {
"type": "string",
"description": "Source node ID"
},
"to": {
"type": "string",
"description": "Target node ID"
},
"label": {
"type": "string",
"description": "Optional text label on the arrow"
},
"style": {
"type": "string",
"enum": [
"solid",
"dashed",
"dotted"
],
"default": "solid"
}
},
"required": [
"from",
"to"
]
}
},
"edges": {
"type": "array",
"description": "Alias for connections: list of directed arrows between nodes",
"items": {
"type": "object",
"properties": {
"from": {
"type": "string",
"description": "Source node ID"
},
"to": {
"type": "string",
"description": "Target node ID"
},
"label": {
"type": "string",
"description": "Optional text label on the arrow"
},
"style": {
"type": "string",
"enum": [
"solid",
"dashed",
"dotted"
],
"default": "solid"
}
},
"required": [
"from",
"to"
]
}
},
"layoutDirection": {
"type": "string",
"enum": [
"TB",
"LR",
"BT",
"RL"
],
"description": "Layout flow direction: TB=top-to-bottom, LR=left-to-right",
"default": "TB"
},
"theme": {
"type": "string",
"enum": [
"default",
"nord",
"cyberpunk",
"pastel",
"blueprint",
"minimal_dark",
"solarized"
],
"description": "Color theme palette to apply"
},
"clearExisting": {
"type": "boolean",
"description": "Whether to replace existing elements or append to the current canvas",
"default": false
}
},
"required": [
"nodes"
]
}
}add_elementsAction
Adds one or more individual shapes (rectangles, diamonds, ellipses, text) or sticky notes to the canvas. Returns the created element IDs for subsequent connections or updates.
View tool JSON
{
"name": "add_elements",
"kind": "act",
"impl": "imperative",
"description": "Adds one or more individual shapes (rectangles, diamonds, ellipses, text) or sticky notes to the canvas. Returns the created element IDs for subsequent connections or updates.",
"inputSchema": {
"type": "object",
"properties": {
"elements": {
"type": "array",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string",
"description": "Optional custom ID. Auto-generated if omitted."
},
"type": {
"type": "string",
"enum": [
"rectangle",
"ellipse",
"diamond",
"text"
],
"default": "rectangle"
},
"label": {
"type": "string",
"description": "Text content inside the shape or label"
},
"x": {
"type": "number",
"description": "X coordinate on canvas (default: 200)"
},
"y": {
"type": "number",
"description": "Y coordinate on canvas (default: 200)"
},
"width": {
"type": "number",
"description": "Width in pixels"
},
"height": {
"type": "number",
"description": "Height in pixels"
},
"strokeColor": {
"type": "string",
"default": "#1e293b"
},
"backgroundColor": {
"type": "string",
"default": "#f8fafc"
},
"fillStyle": {
"type": "string",
"enum": [
"solid",
"hachure",
"cross-hatch",
"zigzag"
],
"default": "solid"
}
},
"required": [
"label"
]
}
}
},
"required": [
"elements"
]
}
}update_elementsAction
Modifies visual properties (strokeColor, backgroundColor, fillStyle, strokeWidth, opacity, label) of existing elements. Use find_elements or get_canvas_state first to locate the element IDs to modify.
View tool JSON
{
"name": "update_elements",
"kind": "act",
"impl": "imperative",
"description": "Modifies visual properties (strokeColor, backgroundColor, fillStyle, strokeWidth, opacity, label) of existing elements. Use find_elements or get_canvas_state first to locate the element IDs to modify.",
"inputSchema": {
"type": "object",
"properties": {
"updates": {
"type": "array",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string",
"description": "Target element ID to update"
},
"label": {
"type": "string",
"description": "Updated text content"
},
"strokeColor": {
"type": "string"
},
"backgroundColor": {
"type": "string"
},
"fillStyle": {
"type": "string",
"enum": [
"solid",
"hachure",
"cross-hatch",
"zigzag"
]
},
"strokeWidth": {
"type": "number",
"enum": [
1,
2,
4
]
},
"strokeStyle": {
"type": "string",
"enum": [
"solid",
"dashed",
"dotted"
]
},
"opacity": {
"type": "number",
"minimum": 0,
"maximum": 100
},
"x": {
"type": "number"
},
"y": {
"type": "number"
},
"width": {
"type": "number"
},
"height": {
"type": "number"
}
},
"required": [
"id"
]
}
}
},
"required": [
"updates"
]
}
}delete_elementsSensitive Action
Removes one or more elements and their attached arrow connections from the canvas by element ID.
View tool JSON
{
"name": "delete_elements",
"kind": "transact",
"impl": "imperative",
"description": "Removes one or more elements and their attached arrow connections from the canvas by element ID.",
"inputSchema": {
"type": "object",
"properties": {
"elementIds": {
"type": "array",
"items": {
"type": "string"
},
"description": "List of element IDs to delete"
}
},
"required": [
"elementIds"
]
}
}connect_elementsAction
Draws smart connecting arrows between existing elements by ID or text label with automatic anchor attachment and smooth Bezier curve routing.
View tool JSON
{
"name": "connect_elements",
"kind": "act",
"impl": "imperative",
"description": "Draws smart connecting arrows between existing elements by ID or text label with automatic anchor attachment and smooth Bezier curve routing.",
"inputSchema": {
"type": "object",
"properties": {
"connections": {
"type": "array",
"items": {
"type": "object",
"properties": {
"fromId": {
"type": "string",
"description": "Source element ID or label (e.g. 'gateway', 'API Gateway')"
},
"toId": {
"type": "string",
"description": "Target element ID or label (e.g. 'auth_service', 'Auth Service')"
},
"label": {
"type": "string",
"description": "Optional text label on the arrow"
},
"strokeStyle": {
"type": "string",
"enum": [
"solid",
"dashed",
"dotted"
],
"default": "solid"
},
"strokeColor": {
"type": "string",
"default": "#475569"
},
"startArrowhead": {
"type": "string",
"enum": [
"arrow",
"bar",
"dot",
"triangle",
"none"
],
"default": "none"
},
"endArrowhead": {
"type": "string",
"enum": [
"arrow",
"bar",
"dot",
"triangle",
"none"
],
"default": "arrow"
}
},
"required": [
"fromId",
"toId"
]
}
}
},
"required": [
"connections"
]
}
}apply_auto_layoutAction
Reorganizes the spatial coordinates of elements on the canvas using Dagre or ELK graph layout algorithms. Generates smooth, organic Bezier curves, eliminates line crossings, and ensures clean outer-gutter routing for feedback loops.
View tool JSON
{
"name": "apply_auto_layout",
"kind": "act",
"impl": "imperative",
"description": "Reorganizes the spatial coordinates of elements on the canvas using Dagre or ELK graph layout algorithms. Generates smooth, organic Bezier curves, eliminates line crossings, and ensures clean outer-gutter routing for feedback loops.",
"inputSchema": {
"type": "object",
"properties": {
"direction": {
"type": "string",
"enum": [
"TB",
"LR",
"BT",
"RL"
],
"description": "Flow direction: TB=top-to-bottom, LR=left-to-right",
"default": "TB"
},
"engine": {
"type": "string",
"enum": [
"dagre",
"elk"
],
"description": "Layout engine: dagre (fast, simple DAG) or elk (advanced orthogonal routing)",
"default": "dagre"
},
"elementIds": {
"type": "array",
"items": {
"type": "string"
},
"description": "Optional subset of element IDs to layout. If omitted, layouts all shapes."
},
"nodeSpacing": {
"type": "number",
"default": 110,
"description": "Horizontal/vertical spacing between adjacent nodes in px"
},
"rankSpacing": {
"type": "number",
"default": 130,
"description": "Spacing between successive hierarchy ranks in px"
}
}
}
}apply_themeAction
Applies a cohesive color palette across the canvas. Available themes: default, nord, cyberpunk, pastel, blueprint, minimal_dark, solarized.
View tool JSON
{
"name": "apply_theme",
"kind": "act",
"impl": "imperative",
"description": "Applies a cohesive color palette across the canvas. Available themes: default, nord, cyberpunk, pastel, blueprint, minimal_dark, solarized.",
"inputSchema": {
"type": "object",
"properties": {
"theme": {
"type": "string",
"enum": [
"default",
"nord",
"cyberpunk",
"pastel",
"blueprint",
"minimal_dark",
"solarized"
],
"description": "Named color theme to apply"
},
"elementIds": {
"type": "array",
"items": {
"type": "string"
},
"description": "Optional list of element IDs to theme. If omitted, applies theme across all elements."
}
},
"required": [
"theme"
]
}
}export_canvasAction
Exports the current canvas content as a high-resolution SVG or PNG image data URL.
View tool JSON
{
"name": "export_canvas",
"kind": "act",
"impl": "imperative",
"description": "Exports the current canvas content as a high-resolution SVG or PNG image data URL.",
"inputSchema": {
"type": "object",
"properties": {
"format": {
"type": "string",
"enum": [
"svg",
"png"
],
"default": "png",
"description": "Export file format"
},
"padding": {
"type": "number",
"default": 20,
"description": "Padding in pixels around diagram content"
},
"darkMode": {
"type": "boolean",
"default": false,
"description": "Whether to export in dark mode"
}
}
}
}