Start a new diagram session and open the browser for real-time preview. Starts an embedded server and opens a browser window with draw.io. The browser will show diagram updates as they happen.

Create a NEW diagram from mxGraphModel XML. Use this when creating a diagram from scratch or replacing the current diagram entirely.

CRITICAL: You MUST provide the 'xml' argument in EVERY call. Do NOT call this tool without xml.

When to use this tool:

• Creating a new diagram from scratch

• Replacing the current diagram with a completely different one

• Major structural changes that require regenerating the diagram

When to use edit_diagram instead:

• Small modifications to existing diagram

• Adding/removing individual elements

• Changing labels, colors, or positions

XML FORMAT - Full mxGraphModel structure:

LAYOUT CONSTRAINTS:

• Keep all elements within x=0-800, y=0-600 (single page viewport)

• Start from margins (x=40, y=40), keep elements grouped closely

• Use unique IDs starting from "2" (0 and 1 are reserved)

• Set parent="1" for top-level shapes

• Space shapes 150-200px apart for clear edge routing

EDGE ROUTING RULES:

• Never let multiple edges share the same path - use different exitY/entryY values

• For bidirectional connections (A↔B), use OPPOSITE sides

• Always specify exitX, exitY, entryX, entryY explicitly in edge style

• Route edges AROUND obstacles using waypoints (add 20-30px clearance)

• Use natural connection points based on flow (not corners)

COMMON STYLES:

• Shapes: rounded=1; fillColor=#hex; strokeColor=#hex

• Edges: endArrow=classic; edgeStyle=orthogonalEdgeStyle; curved=1

• Text: fontSize=14; fontStyle=1 (bold); align=center

Edit the current diagram by ID-based operations (update/add/delete cells).

⚠️ REQUIRED: You MUST call get_diagram BEFORE this tool! This fetches the latest state from the browser including any manual user edits. Skipping get_diagram WILL cause user's changes to be LOST.

Workflow:

1. Call get_diagram to see current cell IDs and structure

2. Use the returned XML to construct your edit operations

3. Call edit_diagram with your operations

Operations:

• add: Add a new cell. Provide cell_id (new unique id) and new_xml.

• update: Replace an existing cell by its id. Provide cell_id and complete new_xml.

• delete: Remove a cell by its id. Only cell_id is needed.

For add/update, new_xml must be a complete mxCell element including mxGeometry.

Example - Add a rectangle: {"operations": [{"operation": "add", "cell_id": "rect-1", "new_xml": "<mxCell id="rect-1" value="Hello" style="rounded=0;" vertex="1" parent="1"><mxGeometry x="100" y="100" width="120" height="60" as="geometry"/>"}]}

Example - Update a cell: {"operations": [{"operation": "update", "cell_id": "3", "new_xml": "<mxCell id="3" value="New Label" style="rounded=1;" vertex="1" parent="1"><mxGeometry x="100" y="100" width="120" height="60" as="geometry"/>"}]}

Example - Delete a cell: {"operations": [{"operation": "delete", "cell_id": "rect-1"}]}

Get the current diagram XML (fetches latest from browser, including user's manual edits). Call this BEFORE edit_diagram if you need to update or delete existing elements, so you can see the current cell IDs and structure.

Export the current diagram to a .drawio file.