io.github.hj1003862396/draw-flow-mcp-server

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: <mxGraphModel> <root> <mxCell id="0"/> <mxCell id="1" parent="0"/> <mxCell id="2" value="Shape" style="rounded=1;" vertex="1" parent="1"> <mxGeometry x="100" y="100" width="120" height="60" as="geometry"/> </mxCell> </root> </mxGraphModel> 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\"/></mxCell>"}]} 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\"/></mxCell>"}]} Example - Delete a cell: {"operations": [{"operation": "delete", "cell_id": "rect-1"}]}

Export the current diagram to a .drawio file.

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.

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.