Creating Designs with MCP
Use your AI assistant to create diagrams, flowcharts, and designs directly in Excalimate
Introduction
Once your MCP server is connected, you can ask your AI assistant to create any diagram directly in Excalimate. The AI has access to 8 scene/element tools for full control over your canvas — creating, updating, and removing elements at will.
Your First Diagram
Let's create a simple flowchart with three boxes connected by arrows. Just describe what you want in plain language:
Create a simple flowchart with three steps: Research, Design, and Build. Connect them with arrows. Behind the scenes, the AI translates your request into MCP tool calls:
create_scene({
elements: [
rectangle("Research", x: 100, y: 200),
rectangle("Design", x: 400, y: 200),
rectangle("Build", x: 700, y: 200),
arrow(from: "Research", to: "Design"),
arrow(from: "Design", to: "Build"),
]
}) The result appears instantly in the Excalimate live preview — three labeled boxes in a horizontal flow, connected by arrows.
Element Types
Here are the element types you can ask the AI to create:
rectangle
Boxes, cards, containers — the most common building block.
ellipse
Circles, ovals — great for start/end nodes or emphasis.
diamond
Decision nodes — perfect for yes/no branches in flowcharts.
text
Standalone labels and annotations.
arrow
Connections between shapes, with start/end bindings to elements.
line
Plain lines without arrowheads — for separators and decorations.
Styling Elements
You can control colors, fills, stroke styles, and more — just describe the look you want. The AI maps your descriptions to Excalidraw's color palette and fill options.
Make the Research box blue with a light blue fill, and the Build box green. Elements support solid fills, hatching, cross-hatching, and transparent backgrounds. You can also ask for specific stroke colors, dashed borders, or different font sizes for text labels.
Modifying Designs
You don't have to get everything right on the first try. The MCP server provides tools to iteratively refine your design:
add_elements
Add new elements to the existing canvas without replacing what's there.
update_elements
Change properties of existing elements — position, size, color, text.
remove_elements
Delete specific elements by ID.
Just describe the changes you want:
Add a fourth step called "Launch" after Build, and change the Research box to be wider.
The AI will use get_scene to inspect the current canvas,
then apply targeted updates — no need to recreate everything from scratch.
Tips for Better Results
- Be specific about layout — mention positions or say "horizontal flow" / "vertical flow" to guide placement.
- Name your elements — it helps when modifying later, since the AI can reference them by name.
- Ask for hand-drawn style explicitly if you want the sketchy Excalidraw look.
-
Use
get_sceneto inspect what's on the canvas before making changes. -
Save checkpoints with
save_checkpointbefore major changes — you can always roll back.
Ready to bring your designs to life?
Next: Animating your designs →