AI-powered diagrams, mind maps, flowcharts on a free unlimited collaborative whiteboard
Maintain this server? Claim it
Call this server's tools from your browser. Nothing to install.
Requests go through mcptry because browsers can't call most MCP servers directly. Header values are sent to the server for that request only and are never stored or logged.
Tool list from our last check. Connect live to refresh it.
Creates elements on a canvas. Creates a new canvas if room_id is omitted, or adds to the existing canvas if room_id is provided. Use cases: wireframes, UI mockups, freeform illustrations, standalone shapes, and manual layouts that Mermaid does not cover well. For diagrams Mermaid can express, use add_elements_from_mermaid instead. Element types: rectangle, ellipse, diamond, arrow, line, freedraw, text, image. Rich text: the text field supports limited HTML for text elements and rectangle/ellipse/diamond shape labels. Supports the rich-text plugin HTML subset: <b>/<strong>, <i>/<em>, <u>, <br>, <div>/<p>, <ul>/<ol>/<li>, <a href>, <font color>, and <span style="color, background/background-color, font-size, font-family">. Use textAlign for left/center/right alignment; avoid unsupported HTML/CSS. TEXT IN SHAPES: use containerId on text element pointing to shape id. ARROWS: Position at EDGE of source shape. Auto-bound within 30px. Colors: strokeColor, backgroundColor (hex).
Array of element definitions to create
Room ID of an existing canvas to add to. If the user is continuing a canvas already referenced in this conversation (by room_id, or a URL like ?room=[room_id] or /?gdrive=[room_id]), pass it here. Omit to create a new canvas.
This tool isn't marked read-only, so it may change something on the server or in an account you connected.
Creates elements on a canvas. Creates a new canvas if room_id is omitted, or adds to the existing canvas if room_id is provided. Use cases: wireframes, UI mockups, freeform illustrations, standalone shapes, and manual layouts that Mermaid does not cover well. For diagrams Mermaid can express, use add_elements_from_mermaid instead. Element types: rectangle, ellipse, diamond, arrow, line, freedraw, text, image. Rich text: the text field supports limited HTML for text elements and rectangle/ellipse/diamond shape labels. Supports the rich-text plugin HTML subset: <b>/<strong>, <i>/<em>, <u>, <br>, <div>/<p>, <ul>/<ol>/<li>, <a href>, <font color>, and <span style="color, background/background-color, font-size, font-family">. Use textAlign for left/center/right alignment; avoid unsupported HTML/CSS. TEXT IN SHAPES: use containerId on text element pointing to shape id. ARROWS: Position at EDGE of source shape. Auto-bound within 30px. Colors: strokeColor, backgroundColor (hex).
| Argument | Type | Description |
|---|---|---|
| room_id | string | Room ID of an existing canvas to add to. If the user is continuing a canvas already referenced in this conversation (by room_id, or a URL like ?room=[room_id] or /?gdrive=[room_id]), pass it here. Omit to create a new canvas. |
| elements* | array | Array of element definitions to create |
{
"type": "object",
"required": [
"elements"
],
"properties": {
"room_id": {
"type": "string",
"description": "Room ID of an existing canvas to add to. If the user is continuing a canvas already referenced in this conversation (by room_id, or a URL like ?room=[room_id] or /?gdrive=[room_id]), pass it here. Omit to create a new canvas."
},
"elements": {
"type": "array",
"items": {
"type": "object",
"required": [
"x",
"y"
],
"properties": {
"x": {
"type": "number",
"description": "X coordinate (defaults to 0 if omitted)"
},
"y": {
"type": "number",
"description": "Y coordinate (defaults to 0 if omitted)"
},
"id": {
"type": "string",
"description": "Unique element ID. IMPORTANT: Always set explicit IDs for shapes that arrows will connect to!"
},
"text": {
"type": "string",
"description": "Text content. Required for type=text. For text elements and rectangle/ellipse/diamond shape labels, Supports the rich-text plugin HTML subset: <b>/<strong>, <i>/<em>, <u>, <br>, <div>/<p>, <ul>/<ol>/<li>, <a href>, <font color>, and <span style=\"color, background/background-color, font-size, font-family\">. Use textAlign for left/center/right alignment; avoid unsupported HTML/CSS. Also used as arrow label when set on an arrow."
},
"type": {
"enum": [
"rectangle",
"ellipse",
"diamond",
"arrow",
"line",
"freedraw",
"text",
"image"
],
"type": "string",
"description": "Element type. Inferred from fields if omitted: text field → text, points → line, fileId → image, else rectangle."
},
"label": {
"type": "string",
"description": "For type=arrow: text label displayed on the arrow"
},
"width": {
"type": "number",
"description": "Width (default: 100; omit for text — auto-sized)"
},
"height": {
"type": "number",
"description": "Height (default: 100; omit for text — auto-sized)"
},
"points": {
"type": "array",
"items": {
"type": "array",
"items": {
"type": "number"
}
},
"description": "Required for arrow/line/freedraw. Coordinates relative to element x,y. Example: [[0,0],[100,0]] for horizontal arrow."
},
"opacity": {
"type": "number",
"description": "Opacity 0-100 (default: 100)"
},
"fontSize": {
"type": "number",
"description": "Font size (default: 20). Applies to text elements."
},
"fillStyle": {
"type": "string",
"description": "Fill style: solid, hachure, cross-hatch (default: solid)"
},
"roughness": {
"type": "number",
"description": "Roughness: 0=architect, 1=artist, 2=cartoonist (default: 1)"
},
"endBinding": {
"type": "object",
"required": [
"elementId",
"focus",
"gap"
],
"properties": {
"gap": {
"type": "number"
},
"focus": {
"type": "number"
},
"elementId": {
"type": "string"
}
},
"description": "For type=arrow: binds the arrow end to a shape. Use instead of or alongside points."
},
"fontFamily": {
"type": "number",
"description": "Font family: 5=Excalifont, 6=Nunito, 7=Lilita One, 8=Comic Shanns (default: 5). Applies to text elements."
},
"containerId": {
"type": "string",
"description": "For type=text: ID of the shape this text is bound to. Set x,y to 0,0 for auto-centering inside the shape."
},
"strokeColor": {
"type": "string",
"description": "Stroke color in hex (default: #1e1e1e)"
},
"strokeWidth": {
"type": "number",
"description": "Stroke width (default: 2)"
},
"startBinding": {
"type": "object",
"required": [
"elementId",
"focus",
"gap"
],
"properties": {
"gap": {
"type": "number"
},
"focus": {
"type": "number"
},
"elementId": {
"type": "string"
}
},
"description": "For type=arrow: binds the arrow start to a shape. Use instead of or alongside points."
},
"backgroundColor": {
"type": "string",
"description": "Fill color in hex or 'transparent' (default: transparent)"
}
},
"description": "Per-type required fields: rectangle/ellipse/diamond → x, y (width/height default to 100). text → x, y, text (width/height auto-sized; omit or set to 0). rectangle/ellipse/diamond may also include text, which creates a bound label. arrow/line → x, y, points (e.g. [[0,0],[100,0]]); optionally startBinding/endBinding instead of points. image → x, y, width, height, fileId. freedraw → x, y, points. type is inferred from fields if omitted (text field → text, points → line, fileId → image, else rectangle)."
},
"description": "Array of element definitions to create"
}
}
}Creates diagram elements from a Mermaid definition. Creates a new canvas if room_id is omitted, or adds to the existing canvas if room_id is provided. Preferred over add_elements for new diagrams and large changes to existing diagrams whenever the content can be represented in Mermaid. Supports: flowchart, graph, flowchart-elk, sequenceDiagram, classDiagram, classDiagram-v2, stateDiagram, stateDiagram-v2, erDiagram, journey, gantt, pie, gitGraph, mindmap, timeline, C4Context, C4Container, C4Component, C4Dynamic, C4Deployment, sankey, sankey-beta, quadrantChart, xychart, xychart-beta, requirement, requirementDiagram, kanban, architecture, block, block-beta, packet, packet-beta, radar-beta, treemap, info. Example: "flowchart TD\n A[Start] --> B{Decision}\n B -->|Yes| C[OK]\n B -->|No| D[Cancel]"
| Argument | Type | Description |
|---|---|---|
| config | object | Optional Mermaid rendering config. flowchart.curve is handled automatically. |
| mermaid* | string | Mermaid diagram definition. Prefer converting compatible user requests into Mermaid instead of using add_elements. |
| room_id | string | Room ID of an existing canvas to add to. If the user is continuing a canvas already referenced in this conversation (by room_id, or a URL like ?room=[room_id] or /?gdrive=[room_id]), pass it here. Omit to create a new canvas. |
| timeout | number | Room lifetime in seconds (default: 3600, max: 86400). Only used when creating new canvas |
{
"type": "object",
"required": [
"mermaid"
],
"properties": {
"config": {
"type": "object",
"properties": {
"flowchart": {
"type": "object",
"properties": {
"curve": {
"enum": [
"basis",
"linear"
],
"type": "string",
"description": "Edge curve style (handled server-side; no need to set explicitly)."
}
}
}
},
"description": "Optional Mermaid rendering config. flowchart.curve is handled automatically."
},
"mermaid": {
"type": "string",
"description": "Mermaid diagram definition. Prefer converting compatible user requests into Mermaid instead of using add_elements."
},
"room_id": {
"type": "string",
"description": "Room ID of an existing canvas to add to. If the user is continuing a canvas already referenced in this conversation (by room_id, or a URL like ?room=[room_id] or /?gdrive=[room_id]), pass it here. Omit to create a new canvas."
},
"timeout": {
"type": "number",
"default": 3600,
"description": "Room lifetime in seconds (default: 3600, max: 86400). Only used when creating new canvas"
}
}
}Delete elements from a canvas. Requires room_id from a previous Canvs tool result. Pass ids array of element IDs to delete.
| Argument | Type | Description |
|---|---|---|
| ids* | array | Array of element IDs to delete |
| room_id* | string | Room ID from a previous Canvs tool result. If you only have a URL, extract it from https://[host]/?room=[room_id] or https://[host]/?gdrive=[room_id]. |
{
"type": "object",
"required": [
"room_id",
"ids"
],
"properties": {
"ids": {
"type": "array",
"items": {
"type": "string"
},
"description": "Array of element IDs to delete"
},
"room_id": {
"type": "string",
"description": "Room ID from a previous Canvs tool result. If you only have a URL, extract it from https://[host]/?room=[room_id] or https://[host]/?gdrive=[room_id]."
}
}
}Returns guidance on diagram-creation workflow and tool selection: how to choose between Mermaid and manual element creation, and the recommended iteration workflow. Consult before building complex diagrams.
No arguments.
{
"type": "object",
"properties": {}
}Query elements on a canvas. Requires room_id from a previous Canvs tool result. Returns elements matching optional filters. Use this before update_elements when making small edits to existing diagrams. If no browser has the canvas open, returns an error — ask the user to open the canvas URL in their browser and retry.
| Argument | Type | Description |
|---|---|---|
| type | string | Filter by element type |
| filter | object | Additional key-value filters (e.g., {locked: true}) |
| room_id* | string | Room ID from a previous Canvs tool result. If you only have a URL, extract it from https://[host]/?room=[room_id] or https://[host]/?gdrive=[room_id]. |
{
"type": "object",
"required": [
"room_id"
],
"properties": {
"type": {
"enum": [
"rectangle",
"ellipse",
"diamond",
"arrow",
"line",
"freedraw",
"text",
"image"
],
"type": "string",
"description": "Filter by element type"
},
"filter": {
"type": "object",
"description": "Additional key-value filters (e.g., {locked: true})"
},
"room_id": {
"type": "string",
"description": "Room ID from a previous Canvs tool result. If you only have a URL, extract it from https://[host]/?room=[room_id] or https://[host]/?gdrive=[room_id]."
}
}
}Update elements on a canvas. Requires room_id from a previous Canvs tool result. Pass elements array with id and fields to update. IMPORTANT: in each update object ONLY `id` is required; all other fields are optional patch fields. Include ONLY elements that need changes; elements omitted from the request remain unchanged on the board. Prefer this tool for SMALL edits to existing diagrams (rename/move/restyle a few elements), typically after query_elements.
| Argument | Type | Description |
|---|---|---|
| room_id* | string | Room ID from a previous Canvs tool result. If you only have a URL, extract it from https://[host]/?room=[room_id] or https://[host]/?gdrive=[room_id]. |
| elements* | array | Array of element updates (each must have id) |
{
"type": "object",
"required": [
"room_id",
"elements"
],
"properties": {
"room_id": {
"type": "string",
"description": "Room ID from a previous Canvs tool result. If you only have a URL, extract it from https://[host]/?room=[room_id] or https://[host]/?gdrive=[room_id]."
},
"elements": {
"type": "array",
"items": {
"type": "object",
"required": [
"id"
],
"properties": {
"x": {
"type": "number",
"description": "New X coordinate"
},
"y": {
"type": "number",
"description": "New Y coordinate"
},
"id": {
"type": "string",
"description": "ID of the element to update (required)"
},
"text": {
"type": "string",
"description": "New text content. For text elements and rectangle/ellipse/diamond shape labels, Supports the rich-text plugin HTML subset: <b>/<strong>, <i>/<em>, <u>, <br>, <div>/<p>, <ul>/<ol>/<li>, <a href>, <font color>, and <span style=\"color, background/background-color, font-size, font-family\">. Use textAlign for left/center/right alignment; avoid unsupported HTML/CSS. Shape text updates the bound label."
},
"type": {
"enum": [
"rectangle",
"ellipse",
"diamond",
"arrow",
"line",
"freedraw",
"text",
"image"
],
"type": "string",
"description": "New element type"
},
"width": {
"type": "number",
"description": "New width"
},
"height": {
"type": "number",
"description": "New height"
},
"locked": {
"type": "boolean",
"description": "Lock/unlock the element"
},
"points": {
"type": "array",
"items": {
"type": "array",
"items": {
"type": "number"
}
},
"description": "New points array (for arrow/line/freedraw elements)"
},
"opacity": {
"type": "number",
"description": "New opacity (0-100)"
},
"fontSize": {
"type": "number",
"description": "New font size (for text elements)"
},
"fillStyle": {
"type": "string",
"description": "New fill style (solid, hachure, cross-hatch)"
},
"roughness": {
"type": "number",
"description": "New roughness (0=architect, 1=artist, 2=cartoonist)"
},
"fontFamily": {
"type": "number",
"description": "New font family (5=Excalifont, 6=Nunito, 7=Lilita One, 8=Comic Shanns)"
},
"strokeColor": {
"type": "string",
"description": "New stroke color (hex)"
},
"strokeWidth": {
"type": "number",
"description": "New stroke width"
},
"backgroundColor": {
"type": "string",
"description": "New fill color (hex or 'transparent')"
}
},
"description": "Patch object: only id is required. Include only the fields you want to change."
},
"description": "Array of element updates (each must have id)"
}
}
}