i/next-ai-draw-io
1
0
Fork 0
mirror of https://github.com/DayuanJiang/next-ai-draw-io.git synced 2026-01-10 18:22:29 +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
- [ ] 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

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.
- **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.
Here are the guide of XML format for draw.io:
"""md
${guide}

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

@@ -23,6 +23,7 @@ A draw.io XML file has the following hierarchy:
The root element of a draw.io file.
**Attributes:**
- `host`: The application that created the file (e.g., "app.diagrams.net")
- `modified`: Last modification timestamp
- `agent`: Browser / user agent information
@@ -30,6 +31,7 @@ The root element of a draw.io file.
- `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">
```
@@ -39,10 +41,12 @@ The root element of a draw.io file.
Each page in your draw.io document is represented by a `<diagram>` element.
**Attributes:**
- `id`: Unique identifier for the diagram
- `name`: The name of the diagram / page
**Example:**
```xml
<diagram id="pWHN0msd4Ud1ZK5cD-Hr" name="Page-1">
```
@@ -52,6 +56,7 @@ Each page in your draw.io document is represented by a `<diagram>` element.
Contains the actual diagram data.
**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)
@@ -69,6 +74,7 @@ Contains the actual diagram data.
- `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">
```
@@ -78,10 +84,12 @@ Contains the actual diagram data.
Contains all the cells in the diagram.
**Example:**
```xml
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<!-- Other cells go here -->
</root>
```
@@ -91,21 +99,25 @@ Contains all the cells in the diagram.
The basic building block of diagrams. Cells represent shapes, connectors, text, etc.
**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):**
- `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
- `target`: ID of the target cell
**Example (Rectangle shape):**
```xml
<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"/>
@@ -113,6 +125,7 @@ The basic building block of diagrams.Cells represent shapes, connectors, text, e
```
**Example (Connector):**
```xml
<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">
@@ -127,20 +140,26 @@ The basic building block of diagrams.Cells represent shapes, connectors, text, e
Defines the position and dimensions of cells.
**Attributes for shapes:**
- `x`, `y`: Position coordinates
- `width`, `height`: Dimensions
- `as`: Set to "geometry"
- `x`: The x-coordinate of the **top-left** point of the shape.
- `y`: The y-coordinate of the **top-left** point of the shape.
- `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.
**Attributes for connectors:**
- `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"/>
```
**Example for connectors:**
```xml
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="400" y="430" as="sourcePoint"/>
@@ -150,24 +169,7 @@ Defines the position and dimensions of cells.
## Cell Style Reference
Styles are specified as semicolon - separated key = value pairs in the`style` attribute of `<mxCell>` elements.
### Common Shape Styles
- `rounded=1`: Rounded corners(0 or 1)
- `whiteSpace=wrap`: Text wrapping
- `html=1`: Enable HTML formatting
- `fillColor=#ffffff`: Background color(hex)
- `strokeColor=#000000`: Border color(hex)
- `strokeWidth=1`: Border width
- `fontSize=12`: Font size
- `fontColor=#000000`: Text color(hex)
- `align=center`: Text alignment(center, left, right)
- `verticalAlign=middle`: Vertical alignment(top, middle, bottom)
- `dashed=1`: Dashed border(0 or 1)
- `dashPattern=`: Dash pattern(e.g., "3 3")
- `opacity=50`: Opacity(0 - 100)
- `shadow=1`: Enable shadow(0 or 1)
Styles are specified as semicolon-separated `key=value` pairs in the `style` attribute of `<mxCell>` elements.
### Shape-specific Styles
@@ -201,59 +203,20 @@ Draw.io files contain two special cells that are always present:
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
## 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
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")
3. Assign unique and sequential IDs to all cells
4. Define parent relationships correctly
5. Use geometry elements to position shapes
6. For connectors, specify source and target attributes
7. Test your XML by opening it in draw.io
5. Use `mxGeometry` elements to position shapes
6. For connectors, specify `source` and `target` attributes
## Common Patterns
### 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
<!-- Group container -->
@@ -287,7 +250,7 @@ Tables use multiple cells with parent - child relationships:
<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" />
</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" />
</mxCell>
```
@@ -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"/>
</mxCell>
```

1
app/page.tsx
View File

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

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

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

1
components/chat-panel.tsx
View File

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