mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-01-03 06:42:27 +08:00
Compare commits
3 Commits
fix/cascad
...
chore/clea
| Author | SHA1 | Date | |
|---|---|---|---|
|
950a8754fa | ||
|
|
76c0308ceb | ||
|
|
d40ab4114c |
@@ -605,7 +605,7 @@ Notes:
|
||||
Operations:
|
||||
- update: Replace an existing cell by its id. Provide cell_id and complete new_xml.
|
||||
- add: Add a new cell. Provide cell_id (new unique id) and new_xml.
|
||||
- delete: Remove a cell. Cascade is automatic: children AND edges (source/target) are auto-deleted. Only specify ONE cell_id.
|
||||
- delete: Remove a cell by its id. Only cell_id is needed.
|
||||
|
||||
For update/add, new_xml must be a complete mxCell element including mxGeometry.
|
||||
|
||||
@@ -614,8 +614,8 @@ For update/add, 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 - Delete container (children & edges auto-deleted):
|
||||
{"operations": [{"operation": "delete", "cell_id": "2"}]}`,
|
||||
Example - Delete a cell:
|
||||
{"operations": [{"operation": "delete", "cell_id": "rect-1"}]}`,
|
||||
inputSchema: z.object({
|
||||
operations: z
|
||||
.array(
|
||||
|
||||
@@ -276,7 +276,7 @@ edit_diagram uses ID-based operations to modify cells directly by their id attri
|
||||
**Operations:**
|
||||
- **update**: Replace an existing cell. Provide cell_id and new_xml.
|
||||
- **add**: Add a new cell. Provide cell_id (new unique id) and new_xml.
|
||||
- **delete**: Remove a cell. **Cascade is automatic**: children AND edges (source/target) are auto-deleted. Only specify ONE cell_id.
|
||||
- **delete**: Remove a cell. Only cell_id is needed.
|
||||
|
||||
**Input Format:**
|
||||
\`\`\`json
|
||||
@@ -301,9 +301,9 @@ Add new shape:
|
||||
{"operations": [{"operation": "add", "cell_id": "new1", "new_xml": "<mxCell id=\\"new1\\" value=\\"New Box\\" style=\\"rounded=1;fillColor=#dae8fc;\\" vertex=\\"1\\" parent=\\"1\\">\\n <mxGeometry x=\\"400\\" y=\\"200\\" width=\\"120\\" height=\\"60\\" as=\\"geometry\\"/>\\n</mxCell>"}]}
|
||||
\`\`\`
|
||||
|
||||
Delete container (children & edges auto-deleted):
|
||||
Delete cell:
|
||||
\`\`\`json
|
||||
{"operations": [{"operation": "delete", "cell_id": "2"}]}
|
||||
{"operations": [{"operation": "delete", "cell_id": "5"}]}
|
||||
\`\`\`
|
||||
|
||||
**Error Recovery:**
|
||||
|
||||
77
lib/utils.ts
77
lib/utils.ts
@@ -633,77 +633,32 @@ export function applyDiagramOperations(
|
||||
// Add to map
|
||||
cellMap.set(op.cell_id, importedNode)
|
||||
} else if (op.operation === "delete") {
|
||||
// Protect root cells from deletion
|
||||
if (op.cell_id === "0" || op.cell_id === "1") {
|
||||
const existingCell = cellMap.get(op.cell_id)
|
||||
if (!existingCell) {
|
||||
errors.push({
|
||||
type: "delete",
|
||||
cellId: op.cell_id,
|
||||
message: `Cannot delete root cell "${op.cell_id}"`,
|
||||
message: `Cell with id="${op.cell_id}" not found`,
|
||||
})
|
||||
continue
|
||||
}
|
||||
|
||||
const existingCell = cellMap.get(op.cell_id)
|
||||
if (!existingCell) {
|
||||
// Cell not found - might have been cascade-deleted by a previous operation
|
||||
// Skip silently instead of erroring (AI may redundantly list children/edges)
|
||||
continue
|
||||
}
|
||||
|
||||
// Cascade delete: collect all cells to delete (children + edges + self)
|
||||
const cellsToDelete = new Set<string>()
|
||||
|
||||
// Recursive function to find all descendants
|
||||
const collectDescendants = (cellId: string) => {
|
||||
if (cellsToDelete.has(cellId)) return
|
||||
cellsToDelete.add(cellId)
|
||||
|
||||
// Find children (cells where parent === cellId)
|
||||
const children = root.querySelectorAll(
|
||||
`mxCell[parent="${cellId}"]`,
|
||||
)
|
||||
children.forEach((child) => {
|
||||
const childId = child.getAttribute("id")
|
||||
if (childId && childId !== "0" && childId !== "1") {
|
||||
collectDescendants(childId)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// Collect the target cell and all its descendants
|
||||
collectDescendants(op.cell_id)
|
||||
|
||||
// Find edges referencing any of the cells to be deleted
|
||||
// Also recursively collect children of those edges (e.g., edge labels)
|
||||
for (const cellId of cellsToDelete) {
|
||||
const referencingEdges = root.querySelectorAll(
|
||||
`mxCell[source="${cellId}"], mxCell[target="${cellId}"]`,
|
||||
)
|
||||
referencingEdges.forEach((edge) => {
|
||||
const edgeId = edge.getAttribute("id")
|
||||
// Protect root cells from being added via edge references
|
||||
if (edgeId && edgeId !== "0" && edgeId !== "1") {
|
||||
// Recurse to collect edge's children (like labels)
|
||||
collectDescendants(edgeId)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// Log what will be deleted
|
||||
if (cellsToDelete.size > 1) {
|
||||
console.log(
|
||||
`[applyDiagramOperations] Cascade delete "${op.cell_id}" → deleting ${cellsToDelete.size} cells: ${Array.from(cellsToDelete).join(", ")}`,
|
||||
// Check for edges referencing this cell (warning only, still delete)
|
||||
const referencingEdges = root.querySelectorAll(
|
||||
`mxCell[source="${op.cell_id}"], mxCell[target="${op.cell_id}"]`,
|
||||
)
|
||||
if (referencingEdges.length > 0) {
|
||||
const edgeIds = Array.from(referencingEdges)
|
||||
.map((e) => e.getAttribute("id"))
|
||||
.join(", ")
|
||||
console.warn(
|
||||
`[applyDiagramOperations] Deleting cell "${op.cell_id}" which is referenced by edges: ${edgeIds}`,
|
||||
)
|
||||
}
|
||||
|
||||
// Delete all collected cells
|
||||
for (const cellId of cellsToDelete) {
|
||||
const cell = cellMap.get(cellId)
|
||||
if (cell) {
|
||||
cell.parentNode?.removeChild(cell)
|
||||
cellMap.delete(cellId)
|
||||
}
|
||||
}
|
||||
// Remove the node
|
||||
existingCell.parentNode?.removeChild(existingCell)
|
||||
cellMap.delete(op.cell_id)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -97,7 +97,7 @@ Use the standard MCP configuration with:
|
||||
| Tool | Description |
|
||||
|------|-------------|
|
||||
| `start_session` | Opens browser with real-time diagram preview |
|
||||
| `create_new_diagram` | Create a new diagram from XML (requires `xml` argument) |
|
||||
| `display_diagram` | Create a new diagram from XML |
|
||||
| `edit_diagram` | Edit diagram by ID-based operations (update/add/delete cells) |
|
||||
| `get_diagram` | Get the current diagram XML |
|
||||
| `export_diagram` | Save diagram to a `.drawio` file |
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@next-ai-drawio/mcp-server",
|
||||
"version": "0.1.10",
|
||||
"version": "0.1.6",
|
||||
"description": "MCP server for Next AI Draw.io - AI-powered diagram generation with real-time browser preview",
|
||||
"type": "module",
|
||||
"main": "dist/index.js",
|
||||
|
||||
@@ -182,77 +182,32 @@ export function applyDiagramOperations(
|
||||
// Add to map
|
||||
cellMap.set(op.cell_id, importedNode)
|
||||
} else if (op.operation === "delete") {
|
||||
// Protect root cells from deletion
|
||||
if (op.cell_id === "0" || op.cell_id === "1") {
|
||||
const existingCell = cellMap.get(op.cell_id)
|
||||
if (!existingCell) {
|
||||
errors.push({
|
||||
type: "delete",
|
||||
cellId: op.cell_id,
|
||||
message: `Cannot delete root cell "${op.cell_id}"`,
|
||||
message: `Cell with id="${op.cell_id}" not found`,
|
||||
})
|
||||
continue
|
||||
}
|
||||
|
||||
const existingCell = cellMap.get(op.cell_id)
|
||||
if (!existingCell) {
|
||||
// Cell not found - might have been cascade-deleted by a previous operation
|
||||
// Skip silently instead of erroring (AI may redundantly list children/edges)
|
||||
continue
|
||||
}
|
||||
|
||||
// Cascade delete: collect all cells to delete (children + edges + self)
|
||||
const cellsToDelete = new Set<string>()
|
||||
|
||||
// Recursive function to find all descendants
|
||||
const collectDescendants = (cellId: string) => {
|
||||
if (cellsToDelete.has(cellId)) return
|
||||
cellsToDelete.add(cellId)
|
||||
|
||||
// Find children (cells where parent === cellId)
|
||||
const children = root.querySelectorAll(
|
||||
`mxCell[parent="${cellId}"]`,
|
||||
)
|
||||
children.forEach((child) => {
|
||||
const childId = child.getAttribute("id")
|
||||
if (childId && childId !== "0" && childId !== "1") {
|
||||
collectDescendants(childId)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// Collect the target cell and all its descendants
|
||||
collectDescendants(op.cell_id)
|
||||
|
||||
// Find edges referencing any of the cells to be deleted
|
||||
// Also recursively collect children of those edges (e.g., edge labels)
|
||||
for (const cellId of cellsToDelete) {
|
||||
const referencingEdges = root.querySelectorAll(
|
||||
`mxCell[source="${cellId}"], mxCell[target="${cellId}"]`,
|
||||
)
|
||||
referencingEdges.forEach((edge) => {
|
||||
const edgeId = edge.getAttribute("id")
|
||||
// Protect root cells from being added via edge references
|
||||
if (edgeId && edgeId !== "0" && edgeId !== "1") {
|
||||
// Recurse to collect edge's children (like labels)
|
||||
collectDescendants(edgeId)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// Log what will be deleted
|
||||
if (cellsToDelete.size > 1) {
|
||||
console.log(
|
||||
`[applyDiagramOperations] Cascade delete "${op.cell_id}" → deleting ${cellsToDelete.size} cells: ${Array.from(cellsToDelete).join(", ")}`,
|
||||
// Check for edges referencing this cell (warning only, still delete)
|
||||
const referencingEdges = root.querySelectorAll(
|
||||
`mxCell[source="${op.cell_id}"], mxCell[target="${op.cell_id}"]`,
|
||||
)
|
||||
if (referencingEdges.length > 0) {
|
||||
const edgeIds = Array.from(referencingEdges)
|
||||
.map((e) => e.getAttribute("id"))
|
||||
.join(", ")
|
||||
console.warn(
|
||||
`[applyDiagramOperations] Deleting cell "${op.cell_id}" which is referenced by edges: ${edgeIds}`,
|
||||
)
|
||||
}
|
||||
|
||||
// Delete all collected cells
|
||||
for (const cellId of cellsToDelete) {
|
||||
const cell = cellMap.get(cellId)
|
||||
if (cell) {
|
||||
cell.parentNode?.removeChild(cell)
|
||||
cellMap.delete(cellId)
|
||||
}
|
||||
}
|
||||
// Remove the node
|
||||
existingCell.parentNode?.removeChild(existingCell)
|
||||
cellMap.delete(op.cell_id)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -78,7 +78,7 @@ server.prompt(
|
||||
|
||||
## Creating a New Diagram
|
||||
1. Call start_session to open the browser preview
|
||||
2. Use create_new_diagram with complete mxGraphModel XML to create a new diagram
|
||||
2. Use display_diagram with complete mxGraphModel XML to create a new diagram
|
||||
|
||||
## Adding Elements to Existing Diagram
|
||||
1. Use edit_diagram with "add" operation
|
||||
@@ -91,7 +91,7 @@ server.prompt(
|
||||
3. For update, provide the cell_id and complete new mxCell XML
|
||||
|
||||
## Important Notes
|
||||
- create_new_diagram REPLACES the entire diagram - only use for new diagrams
|
||||
- display_diagram REPLACES the entire diagram - only use for new diagrams
|
||||
- edit_diagram PRESERVES user's manual changes (fetches browser state first)
|
||||
- Always use unique cell_ids when adding elements (e.g., "shape-1", "arrow-2")`,
|
||||
},
|
||||
@@ -150,59 +150,19 @@ server.registerTool(
|
||||
},
|
||||
)
|
||||
|
||||
// Tool: create_new_diagram
|
||||
// Tool: display_diagram
|
||||
server.registerTool(
|
||||
"create_new_diagram",
|
||||
"display_diagram",
|
||||
{
|
||||
description: `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`,
|
||||
description:
|
||||
"Display a NEW draw.io diagram from XML. REPLACES the entire diagram. " +
|
||||
"Use this for creating new diagrams from scratch. " +
|
||||
"To ADD elements to an existing diagram, use edit_diagram with 'add' operation instead. " +
|
||||
"You should generate valid draw.io/mxGraph XML format.",
|
||||
inputSchema: {
|
||||
xml: z
|
||||
.string()
|
||||
.describe(
|
||||
"REQUIRED: The complete mxGraphModel XML. Must always be provided.",
|
||||
),
|
||||
.describe("The draw.io XML to display (mxGraphModel format)"),
|
||||
},
|
||||
},
|
||||
async ({ xml: inputXml }) => {
|
||||
@@ -239,7 +199,7 @@ COMMON STYLES:
|
||||
}
|
||||
}
|
||||
|
||||
log.info(`Setting diagram content, ${xml.length} chars`)
|
||||
log.info(`Displaying diagram, ${xml.length} chars`)
|
||||
|
||||
// Sync from browser state first
|
||||
const browserState = getState(currentSession.id)
|
||||
@@ -266,20 +226,20 @@ COMMON STYLES:
|
||||
// Save AI result (no SVG yet - will be captured by browser)
|
||||
addHistory(currentSession.id, xml, "")
|
||||
|
||||
log.info(`Diagram content set successfully`)
|
||||
log.info(`Diagram displayed successfully`)
|
||||
|
||||
return {
|
||||
content: [
|
||||
{
|
||||
type: "text",
|
||||
text: `Diagram content set successfully!\n\nThe diagram is now visible in your browser.\n\nXML length: ${xml.length} characters`,
|
||||
text: `Diagram displayed successfully!\n\nThe diagram is now visible in your browser.\n\nXML length: ${xml.length} characters`,
|
||||
},
|
||||
],
|
||||
}
|
||||
} catch (error) {
|
||||
const message =
|
||||
error instanceof Error ? error.message : String(error)
|
||||
log.error("create_new_diagram failed:", message)
|
||||
log.error("display_diagram failed:", message)
|
||||
return {
|
||||
content: [{ type: "text", text: `Error: ${message}` }],
|
||||
isError: true,
|
||||
@@ -380,7 +340,7 @@ server.registerTool(
|
||||
content: [
|
||||
{
|
||||
type: "text",
|
||||
text: "Error: No diagram to edit. Please create a diagram first with create_new_diagram.",
|
||||
text: "Error: No diagram to edit. Please create a diagram first with display_diagram.",
|
||||
},
|
||||
],
|
||||
isError: true,
|
||||
@@ -514,7 +474,7 @@ server.registerTool(
|
||||
content: [
|
||||
{
|
||||
type: "text",
|
||||
text: "No diagram exists yet. Use create_new_diagram to create one.",
|
||||
text: "No diagram exists yet. Use display_diagram to create one.",
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user