Create a new empty draw.io diagram file. The file will be immediately visible in the VS Code draw.io extension.

Read and parse a draw.io diagram file, returning a structured overview of all pages, nodes (shapes), and edges (connections).

Add a new node (shape/vertex) to a draw.io diagram. Use the "shape" parameter for predefined styles, or provide a custom "style" string.

Add a connection (edge/arrow) between two nodes in a draw.io diagram.

LAYOUT TIPS for readable diagrams:

• Use "curved" edgeStyle when multiple edges connect the same pair of nodes, combined with different exitPoint/entryPoint to separate them visually.

• Use "orthogonal" for clean right-angle routing in architecture diagrams.

• Use exitPoint/entryPoint to control WHERE on a node the edge connects (e.g. "left", "right", "topLeft25", "bottomRight75") — this prevents edges from stacking on top of each other.

• For bidirectional flows, use two separate edges with offset connection points (e.g. edge A: exitPoint="rightTop25" → entryPoint="leftTop25", edge B: exitPoint="leftBottom75" → entryPoint="rightBottom75").

Add multiple nodes and edges to a draw.io diagram in a single operation. Much more efficient than calling add_node/add_edge individually — performs only one file read and one file write regardless of how many elements are added. Use this for building entire diagrams or adding multiple components at once.

LAYOUT BEST PRACTICES:

• Space nodes at least 200px apart horizontally and 150px vertically to leave room for edge labels.

• Use "curved" edgeStyle when multiple edges connect the same nodes or cross over each other.

• Use exitPoint/entryPoint (e.g. "left", "right", "topLeft25", "bottomRight75") to separate parallel edges.

• For bidirectional pairs, use offset connection points so the two arrows don't overlap.

• All edge labels automatically get a white background for readability.

• Prefer "orthogonal" for structured layouts and "curved" for organic/many-connection layouts.

Update properties of an existing node or edge in a draw.io diagram. Only specified properties are changed.

Remove a node or edge from a draw.io diagram by its ID. Also removes any edges connected to a removed node.

Add a new page (tab) to a draw.io diagram.

List all available predefined shape and edge styles for use with add_node and add_edge.

Undo the last MCP operation on a draw.io diagram, restoring the file to its previous state. Works independently of the draw.io editor undo.

Redo the last undone MCP operation, re-applying the changes to the diagram file.

Get the history of recent MCP operations on draw.io diagrams. Shows operation type, description, timestamp, and affected elements.

Temporarily highlight one or more elements in the draw.io diagram with a flash effect. If the companion extension is connected, uses overlay highlighting. Otherwise, temporarily modifies the element style.

Display a status message in the draw.io editor status bar. Useful for showing what the AI is currently doing. Requires the companion extension.

Show or hide a loading spinner in the draw.io editor. Use show=true when starting a long operation and show=false when done.

Show an AI cursor indicator at a specific position in the draw.io diagram. Requires the companion VS Code extension to be connected.

Highlight specific cells in the draw.io diagram as being selected/edited by AI. Shows a colored overlay around the cells. Requires the companion VS Code extension.

Capture a screenshot (PNG image) of the current draw.io diagram as it appears in the editor. Returns the image so a vision-capable model can analyze the visual layout, styling, and readability. Requires the diagram to be open in VS Code with the companion extension connected.

Check the WebSocket sidecar connection status. Reports whether the sidecar server is running and how many companion extension / draw.io plugin clients are connected. Useful for diagnosing live-edit features.

Analyze a draw.io diagram for layout issues. Returns warnings about:

• Node overlaps (two nodes occupying the same space)

• Edge label overlaps with nodes (label text crossing through a node)

• Edge passes through node (an edge's path visually crosses an intermediate node)

• Insufficient spacing between connected nodes (label won't fit in the gap)

Each warning includes direction-aware suggestions that consider cascading conflicts — e.g. if moving node A right would collide with node B, the suggestion warns about it and recommends moving B first.

For edge-passes-through-node issues, suggestions include moving the blocking node, changing edge style to "curved" or "orthogonal", or using connection points to reroute.

Call this after building/modifying a diagram to detect readability problems. Use the suggestions to fix issues via update_element.

Trigger a draw.io built-in automatic layout algorithm on the diagram. Requires the diagram to be open in VS Code with the companion extension connected.

Available layouts:

• "hierarchical": Best for flowcharts, org charts, architecture diagrams. Arranges nodes in layers by rank.

• "organic": Force-directed layout. Good for graphs with many cross-connections. Nodes spread out naturally.

• "tree": Compact tree layout. Best for strict tree/hierarchy structures.

• "radialTree": Tree layout radiating outward from center.

• "circle": Arranges all nodes in a circle.

After layout, draw.io saves the updated positions back to the .drawio file automatically.