i/next-ai-draw-io
1
0
Fork 0
mirror of https://github.com/DayuanJiang/next-ai-draw-io.git synced 2026-01-02 22:32:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

minor: fix the prompt

Browse Source
This commit is contained in:
dayuan.jiang
2025-03-25 10:56:08 +00:00
parent 5d152c66d5
commit bd6946a13c
6 changed files with 123 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -84,7 +84,7 @@ public/ # Static assets including example images
## TODOs ## TODOs
- [ ] Allow the LLM to modify the XML instead of generating it from scratch everytime. - [ ] Allow the LLM to modify the XML instead of generating it from scratch everytime.
- [ ] Improve the smoothness of shape streaming updates. - [x] Improve the smoothness of shape streaming updates.
## License ## License

3
app/api/chat/route.ts
View File

@@ -45,6 +45,9 @@ Note that:
- When artistic drawings are requested, creatively compose them using standard diagram shapes and connectors while maintaining visual clarity. - When artistic drawings are requested, creatively compose them using standard diagram shapes and connectors while maintaining visual clarity.
- **Don't** write out the XML string. Just return the XML string in the tool call. - **Don't** write out the XML string. Just return the XML string in the tool call.
- If user asks you to replicate a diagram based on an image, remember to match the diagram style and layout as closely as possible. Especially, pay attention to the lines and shapes, for example, if the lines are straight or curved, and if the shapes are rounded or square. - If user asks you to replicate a diagram based on an image, remember to match the diagram style and layout as closely as possible. Especially, pay attention to the lines and shapes, for example, if the lines are straight or curved, and if the shapes are rounded or square.
Here are the guide of XML format for draw.io: Here are the guide of XML format for draw.io:
"""md """md
${guide} ${guide}

264
app/api/chat/xml_guide.md
View File

@@ -1,6 +1,6 @@
# Draw.io XML Schema Guide # Draw.io XML Schema Guide
This guide explains the structure of draw.io(diagrams.net) XML files to help you understand and create diagrams programmatically. This guide explains the structure of draw.io (diagrams.net) XML files to help you understand and create diagrams programmatically.
## Basic Structure ## Basic Structure
@@ -22,15 +22,17 @@ A draw.io XML file has the following hierarchy:
The root element of a draw.io file. The root element of a draw.io file.
** Attributes:** **Attributes:**
- `host`: The application that created the file(e.g., "app.diagrams.net")
- `modified`: Last modification timestamp
- `agent`: Browser / user agent information
- `version`: Version of the application
- `type`: File type(usually "device" or "google")
** Example:** - `host`: The application that created the file (e.g., "app.diagrams.net")
```xml - `modified`: Last modification timestamp
- `agent`: Browser / user agent information
- `version`: Version of the application
- `type`: File type (usually "device" or "google")
**Example:**
```xml
<mxfile host="app.diagrams.net" modified="2023-07-14T10:20:30.123Z" agent="Mozilla/5.0" version="21.5.2" type="device"> <mxfile host="app.diagrams.net" modified="2023-07-14T10:20:30.123Z" agent="Mozilla/5.0" version="21.5.2" type="device">
``` ```
@@ -38,12 +40,14 @@ The root element of a draw.io file.
Each page in your draw.io document is represented by a `<diagram>` element. Each page in your draw.io document is represented by a `<diagram>` element.
** Attributes:** **Attributes:**
- `id`: Unique identifier for the diagram
- `name`: The name of the diagram / page
** Example:** - `id`: Unique identifier for the diagram
```xml - `name`: The name of the diagram / page
**Example:**
```xml
<diagram id="pWHN0msd4Ud1ZK5cD-Hr" name="Page-1"> <diagram id="pWHN0msd4Ud1ZK5cD-Hr" name="Page-1">
``` ```
@@ -51,25 +55,27 @@ Each page in your draw.io document is represented by a `<diagram>` element.
Contains the actual diagram data. Contains the actual diagram data.
** Attributes:** **Attributes:**
- `dx`: Grid size in x - direction(usually 1)
- `dy`: Grid size in y - direction(usually 1)
- `grid`: Whether grid is enabled(0 or 1)
- `gridSize`: Grid cell size(usually 10)
- `guides`: Whether guides are enabled(0 or 1)
- `tooltips`: Whether tooltips are enabled(0 or 1)
- `connect`: Whether connections are enabled(0 or 1)
- `arrows`: Whether arrows are enabled(0 or 1)
- `fold`: Whether folding is enabled(0 or 1)
- `page`: Whether page view is enabled(0 or 1)
- `pageScale`: Scale of the page(usually 1)
- `pageWidth`: Width of the page(e.g., 850)
- `pageHeight`: Height of the page(e.g., 1100)
- `math`: Whether math typesetting is enabled(0 or 1)
- `shadow`: Whether shadows are enabled(0 or 1)
** Example:** - `dx`: Grid size in x-direction (usually 1)
```xml - `dy`: Grid size in y-direction (usually 1)
- `grid`: Whether grid is enabled (0 or 1)
- `gridSize`: Grid cell size (usually 10)
- `guides`: Whether guides are enabled (0 or 1)
- `tooltips`: Whether tooltips are enabled (0 or 1)
- `connect`: Whether connections are enabled (0 or 1)
- `arrows`: Whether arrows are enabled (0 or 1)
- `fold`: Whether folding is enabled (0 or 1)
- `page`: Whether page view is enabled (0 or 1)
- `pageScale`: Scale of the page (usually 1)
- `pageWidth`: Width of the page (e.g., 850)
- `pageHeight`: Height of the page (e.g., 1100)
- `math`: Whether math typesetting is enabled (0 or 1)
- `shadow`: Whether shadows are enabled (0 or 1)
**Example:**
```xml
<mxGraphModel dx="1" dy="1" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0"> <mxGraphModel dx="1" dy="1" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
``` ```
@@ -77,43 +83,50 @@ Contains the actual diagram data.
Contains all the cells in the diagram. Contains all the cells in the diagram.
** Example:** **Example:**
```xml
```xml
<root> <root>
<mxCell id="0"/> <mxCell id="0"/>
<mxCell id="1" parent="0"/> <mxCell id="1" parent="0"/>
<!-- Other cells go here --> <!-- Other cells go here -->
</root> </root>
``` ```
## Cell Elements: `<mxCell>` ## Cell Elements: `<mxCell>`
The basic building block of diagrams.Cells represent shapes, connectors, text, etc. The basic building block of diagrams. Cells represent shapes, connectors, text, etc.
** Attributes for all cells:** **Attributes for all cells:**
- `id`: Unique identifier for the cell
- `parent`: ID of the parent cell(typically "1" for most cells)
- `value`: Text content of the cell
- `style`: Styling information(see Style section below)
** Attributes for shapes(vertices):** - `id`: Unique identifier for the cell
- `vertex`: Set to "1" for shapes - `parent`: ID of the parent cell (typically "1" for most cells)
- `connectable`: Whether the shape can be connected(0 or 1) - `value`: Text content of the cell
- `style`: Styling information (see Style section below)
** Attributes for connectors(edges):** **Attributes for shapes (vertices):**
- `edge`: Set to "1" for connectors
- `vertex`: Set to "1" for shapes
- `connectable`: Whether the shape can be connected (0 or 1)
**Attributes for connectors (edges):**
- `edge`: Set to "1" for connectors
- `source`: ID of the source cell - `source`: ID of the source cell
- `target`: ID of the target cell - `target`: ID of the target cell
** Example(Rectangle shape):** **Example (Rectangle shape):**
```xml
```xml
<mxCell id="2" value="Hello World" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1"> <mxCell id="2" value="Hello World" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxGeometry x="350" y="190" width="120" height="60" as="geometry"/> <mxGeometry x="350" y="190" width="120" height="60" as="geometry"/>
</mxCell> </mxCell>
``` ```
** Example(Connector):** **Example (Connector):**
```xml
```xml
<mxCell id="3" value="" style="endArrow=classic;html=1;rounded=0;" edge="1" parent="1" source="2" target="4"> <mxCell id="3" value="" style="endArrow=classic;html=1;rounded=0;" edge="1" parent="1" source="2" target="4">
<mxGeometry width="50" height="50" relative="1" as="geometry"> <mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="400" y="430" as="sourcePoint"/> <mxPoint x="400" y="430" as="sourcePoint"/>
@@ -126,22 +139,28 @@ The basic building block of diagrams.Cells represent shapes, connectors, text, e
Defines the position and dimensions of cells. Defines the position and dimensions of cells.
** Attributes for shapes:** **Attributes for shapes:**
- `x`, `y`: Position coordinates
- `width`, `height`: Dimensions
- `as`: Set to "geometry"
** Attributes for connectors:** - `x`: The x-coordinate of the **top-left** point of the shape.
- `relative`: Set to "1" for relative geometry - `y`: The y-coordinate of the **top-left** point of the shape.
- `as`: Set to "geometry" - `width`: The width of the shape.
- `height`: The height of the shape.
- `as`: Specifies the role of this geometry within its parent cell. Typically set to `"geometry"` for the main shape definition.
** Example for shapes:** **Attributes for connectors:**
```xml
- `relative`: Set to "1" for relative geometry
- `as`: Set to "geometry"
**Example for shapes:**
```xml
<mxGeometry x="350" y="190" width="120" height="60" as="geometry"/> <mxGeometry x="350" y="190" width="120" height="60" as="geometry"/>
``` ```
** Example for connectors:** **Example for connectors:**
```xml
```xml
<mxGeometry width="50" height="50" relative="1" as="geometry"> <mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="400" y="430" as="sourcePoint"/> <mxPoint x="400" y="430" as="sourcePoint"/>
<mxPoint x="450" y="380" as="targetPoint"/> <mxPoint x="450" y="380" as="targetPoint"/>
@@ -150,112 +169,56 @@ Defines the position and dimensions of cells.
## Cell Style Reference ## Cell Style Reference
Styles are specified as semicolon - separated key = value pairs in the`style` attribute of `<mxCell>` elements. Styles are specified as semicolon-separated `key=value` pairs in the `style` attribute of `<mxCell>` elements.
### Common Shape Styles ### Shape-specific Styles
- `rounded=1`: Rounded corners(0 or 1) - Rectangle: `shape=rectangle`
- `whiteSpace=wrap`: Text wrapping - Ellipse: `shape=ellipse`
- `html=1`: Enable HTML formatting - Triangle: `shape=triangle`
- `fillColor=#ffffff`: Background color(hex) - Rhombus: `shape=rhombus`
- `strokeColor=#000000`: Border color(hex) - Hexagon: `shape=hexagon`
- `strokeWidth=1`: Border width - Cloud: `shape=cloud`
- `fontSize=12`: Font size - Actor: `shape=actor`
- `fontColor=#000000`: Text color(hex) - Cylinder: `shape=cylinder`
- `align=center`: Text alignment(center, left, right) - Document: `shape=document`
- `verticalAlign=middle`: Vertical alignment(top, middle, bottom) - Note: `shape=note`
- `dashed=1`: Dashed border(0 or 1) - Card: `shape=card`
- `dashPattern=`: Dash pattern(e.g., "3 3") - Parallelogram: `shape=parallelogram`
- `opacity=50`: Opacity(0 - 100)
- `shadow=1`: Enable shadow(0 or 1)
### Shape - specific Styles
- Rectangle: `shape=rectangle`
- Ellipse: `shape=ellipse`
- Triangle: `shape=triangle`
- Rhombus: `shape=rhombus`
- Hexagon: `shape=hexagon`
- Cloud: `shape=cloud`
- Actor: `shape=actor`
- Cylinder: `shape=cylinder`
- Document: `shape=document`
- Note: `shape=note`
- Card: `shape=card`
- Parallelogram: `shape=parallelogram`
### Connector Styles ### Connector Styles
- `endArrow=classic`: Arrow type at the end(classic, open, oval, diamond, block) - `endArrow=classic`: Arrow type at the end (classic, open, oval, diamond, block)
- `startArrow=none`: Arrow type at the start(none, classic, open, oval, diamond) - `startArrow=none`: Arrow type at the start (none, classic, open, oval, diamond)
- `curved=1`: Curved connector(0 or 1) - `curved=1`: Curved connector (0 or 1)
- `edgeStyle=orthogonalEdgeStyle`: Connector routing style - `edgeStyle=orthogonalEdgeStyle`: Connector routing style
- `elbow=vertical`: Elbow direction(vertical, horizontal) - `elbow=vertical`: Elbow direction (vertical, horizontal)
- `jumpStyle=arc`: Jump style for line crossing(arc, gap) - `jumpStyle=arc`: Jump style for line crossing (arc, gap)
- `jumpSize=10`: Size of the jump - `jumpSize=10`: Size of the jump
## Special Cells ## Special Cells
Draw.io files contain two special cells that are always present: Draw.io files contain two special cells that are always present:
1. ** Root Cell ** (id = "0"): The parent of all cells 1. **Root Cell** (id = "0"): The parent of all cells
2. ** Default Parent Cell ** (id = "1", parent = "0"): The default layer and parent for most cells 2. **Default Parent Cell** (id = "1", parent = "0"): The default layer and parent for most cells
## Examples
### Complete Basic Diagram
```xml
<mxfile host="app.diagrams.net" modified="2023-07-14T10:20:30.123Z" version="21.5.2" type="device">
<diagram id="pWHN0msd4Ud1ZK5cD-Hr" name="Page-1">
<mxGraphModel dx="1" dy="1" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<mxCell id="2" value="Start" style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
<mxGeometry x="375" y="80" width="100" height="60" as="geometry" />
</mxCell>
<mxCell id="3" value="Process" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
<mxGeometry x="365" y="200" width="120" height="60" as="geometry" />
</mxCell>
<mxCell id="4" value="End" style="ellipse;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
<mxGeometry x="375" y="320" width="100" height="60" as="geometry" />
</mxCell>
<mxCell id="5" value="" style="endArrow=classic;html=1;rounded=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1" source="2" target="3">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="400" y="430" as="sourcePoint" />
<mxPoint x="450" y="380" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="6" value="" style="endArrow=classic;html=1;rounded=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1" source="3" target="4">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="400" y="430" as="sourcePoint" />
<mxPoint x="450" y="380" as="targetPoint" />
</mxGeometry>
</mxCell>
</root>
</mxGraphModel>
</diagram>
</mxfile>
```
## Tips for Manually Creating Draw.io XML ## Tips for Manually Creating Draw.io XML
1. Start with the basic structure(mxfile, diagram, mxGraphModel, root) 1. Start with the basic structure (`mxfile`, `diagram`, `mxGraphModel`, `root`)
2. Always include the two special cells(id = "0" and id = "1") 2. Always include the two special cells (id = "0" and id = "1")
3. Assign unique and sequential IDs to all cells 3. Assign unique and sequential IDs to all cells
4. Define parent relationships correctly 4. Define parent relationships correctly
5. Use geometry elements to position shapes 5. Use `mxGeometry` elements to position shapes
6. For connectors, specify source and target attributes 6. For connectors, specify `source` and `target` attributes
7. Test your XML by opening it in draw.io
## Common Patterns ## Common Patterns
### Grouping Elements ### Grouping Elements
To group elements, create a parent cell and set other cells' parent attribute to its ID: To group elements, create a parent cell and set other cells' `parent` attribute to its ID:
```xml ```xml
<!-- Group container --> <!-- Group container -->
<mxCell id="10" value="Group" style="group" vertex="1" connectable="0" parent="1"> <mxCell id="10" value="Group" style="group" vertex="1" connectable="0" parent="1">
<mxGeometry x="200" y="200" width="200" height="100" as="geometry" /> <mxGeometry x="200" y="200" width="200" height="100" as="geometry" />
@@ -281,13 +244,13 @@ Swimlanes use the `swimlane` shape style:
### Tables ### Tables
Tables use multiple cells with parent - child relationships: Tables use multiple cells with parent-child relationships:
```xml ```xml
<mxCell id="30" value="Table" style="shape=table;startSize=30;container=1;collapsible=1;childLayout=tableLayout;fixedRows=1;rowLines=0;fontStyle=1;align=center;resizeLast=1;html=1;" vertex="1" parent="1"> <mxCell id="30" value="Table" style="shape=table;startSize=30;container=1;collapsible=1;childLayout=tableLayout;fixedRows=1;rowLines=0;fontStyle=1;align=center;resizeLast=1;html=1;" vertex="1" parent="1">
<mxGeometry x="200" y="200" width="180" height="120" as="geometry" /> <mxGeometry x="200" y="200" width="180" height="120" as="geometry" />
</mxCell> </mxCell>
<mxCell id="31" value="" style="shape=tableRow;horizontal=0;startSize=0;swimlaneHead=0;swimlaneBody=0;fillColor=none;collapsible=0;dropTarget=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;top=0;left=0;right=0;bottom=1;" vertex="1" parent="30"> <mxCell id="31" value="" style="shape=tableRow;horizontal=0;startSize=0;swimlaneHead=0;swimlaneBody=0;fillColor=none;collapsible=0;dropTarget=0;points=[0,0.5,1,0.5];portConstraint=eastwest;top=0;left=0;right=0;bottom=1;" vertex="1" parent="30">
<mxGeometry y="30" width="180" height="30" as="geometry" /> <mxGeometry y="30" width="180" height="30" as="geometry" />
</mxCell> </mxCell>
``` ```
@@ -307,7 +270,7 @@ Draw.io allows adding custom attributes to cells:
These custom attributes can store additional metadata or be used by plugins and custom behaviors. These custom attributes can store additional metadata or be used by plugins and custom behaviors.
### User - defined Styles ### User-defined Styles
You can define custom styles for cells by combining various style attributes: You can define custom styles for cells by combining various style attributes:
@@ -335,4 +298,3 @@ You can create multiple layers in a diagram to organize complex diagrams:
<mxGeometry x="200" y="300" width="120" height="60" as="geometry"/> <mxGeometry x="200" y="300" width="120" height="60" as="geometry"/>
</mxCell> </mxCell>
``` ```

1
app/page.tsx
View File

@@ -27,7 +27,6 @@ export default function Home() {
const loadDiagram = (chart: string) => { const loadDiagram = (chart: string) => {
if (drawioRef.current) { if (drawioRef.current) {
console.log("xml before load", chart);
drawioRef.current.load({ drawioRef.current.load({
xml: chart, xml: chart,
}); });

6
components/chat-message-display.tsx
View File

@@ -54,16 +54,10 @@ export function ChatMessageDisplay({
chartXML, chartXML,
convertedXml convertedXml
); );
console.log("currentXml", currentXml);
console.log("converted xml", convertedXml);
console.log("replaced xml", replacedXML);
onDisplayChart(replacedXML); onDisplayChart(replacedXML);
// if convertedXml changed // if convertedXml changed
} }
// if "/root" in convertedXml
// if convertedXml changed
} }
return ( return (
<div <div

1
components/chat-panel.tsx
View File

@@ -82,7 +82,6 @@ export default function ChatPanel({
// Clear files after submission // Clear files after submission
setFiles(undefined); setFiles(undefined);
console.log("messages", messages);
} catch (error) { } catch (error) {
console.error("Error fetching chart data:", error); console.error("Error fetching chart data:", error);
} }