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

feat: enhance ChatPanel and ChatInput to support image file uploads and display

Browse Source
This commit is contained in:
dayuan.jiang
2025-03-23 11:03:25 +00:00
parent df483ae647
commit 50dc4eda6d
4 changed files with 160 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -294,17 +294,6 @@ Tables use multiple cells with parent - child relationships:
## Advanced Features
### Compressed Content
In real - world draw.io files, the content inside the `<diagram>` tag is often compressed and encoded in Base64 format to reduce file size.When creating diagrams manually, you can work with the uncompressed XML format, but be aware that files saved by draw.io will typically be compressed.
Example of a compressed diagram element:
```xml
<diagram id="pWHN0msd4Ud1ZK5cD-Hr" name="Page-1">7ZhRb5swEMc/DY+VwCYkPJKk3R7WTYq0do8uuIBWMDNOSPbpd8QmQEjVTWqkdlIfIvvvs8H3u7PPhGAl2/27nBTJRxlBFgR+tA/Wt0EQ+EG4wp8KOdTIdLGogThPIjJqga/JbyDQJ3SXRFAYhlrKTCeFCW5lnsNWGxjJc1maxncy
M1ctSEw7+C3w9TbJwDL7lkQ6qdF5MG3x95DEiV7ZJ7rBHaTeESJFQiJZdqD1KlhJLqWuR/leQlaFz8Slnnd3YrTZWA653mfC53sfbh7CzffN55c4/vG4/PTb//SG
vDyRbEcdvtmm0BDhFrXUGz2Y4MhoUVT9zHYlaTfFgB6k4iYzjsqg2xN5rYKt42a+iChod5brRD/ICIfQSp5kJvPqNrwn+D9JbT95G0Jyt5NZCXsb3EVSFJAbe6sadMtpL0zS/dFg+k0SsCxAJqDzA5rQBNpEkiK91DuWTcQTFfqkixWBxOXEZ9MuxzigTB/Pe+bmfSGzn1huCPXDxT11CLoA3CHoIpgvR6C7xNMv5upbnnGQyF0eQTWTj83KJNHwtSDbarbEI4VYohPcRqX3xITqCBWay0crXYg98XP1eJcbSdL0BPictGIh+A1hHo+D2UTnPdF5E53leBy6xGkQhPPz0M1tuunLbvrGzXJsnBNu+tIlmXnadS7OIgw/DHq/4Go1JVPfjnMYmje5GXk3vR1ni+d5GJ3nYXaeh9HdhK7jG08x67o38MvFfLi7uf3dLJajda+31l271oP5Gyg2MT/if4nVbFSs5sNitbBoxBYJ9QA5KrCqbgq9k4XeziimJXKXKFNNUkW3HVoVorkMdVGt9h5Vd511zGDdC5rXNAdd/SiFflDyEnDBMK9cUjssVbDy4rtzhuhqrMizVYWdDkR+HCXWq8H3gewVcLMXwM3/E9z8Erh+YQsfDG5+Cbi5RRdw/hUOXUDwAji8ZW822tbtWwMduPangvXqDw==</diagram>
```
### Custom Attributes
Draw.io allows adding custom attributes to cells:
@@ -347,162 +336,3 @@ You can create multiple layers in a diagram to organize complex diagrams:
</mxCell>
```
## Step - by - Step Tutorial: Creating a Basic Flowchart in XML
Let's walk through creating a simple flowchart with a start, decision, and end step.
### Step 1: Create the basic structure
```xml
<mxfile>
<diagram id="simple-flowchart" name="My Flowchart">
<mxGraphModel dx="1" dy="1" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1">
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<!-- Our diagram elements will go here -->
</root>
</mxGraphModel>
</diagram>
</mxfile>
```
### Step 2: Add the Start shape
```xml
<mxCell id="2" value="Start" style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
<mxGeometry x="200" y="80" width="100" height="60" as="geometry"/>
</mxCell>
```
### Step 3: Add a Decision shape
```xml
<mxCell id="3" value="Decision?" style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
<mxGeometry x="200" y="180" width="100" height="100" as="geometry"/>
</mxCell>
```
### Step 4: Add the End shape
```xml
<mxCell id="4" value="End" style="ellipse;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
<mxGeometry x="200" y="320" width="100" height="60" as="geometry"/>
</mxCell>
```
### Step 5: Connect the shapes
```xml
<!-- Start to Decision -->
<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"/>
</mxCell>
<!-- Decision to End -->
<mxCell id="6" value="Yes" 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 x="-0.3333" y="20" relative="1" as="geometry">
<mxPoint as="offset"/>
</mxGeometry>
</mxCell>
```
### Step 6: Complete the flowchart with a loop
```xml
<mxCell id="7" value="No" style="endArrow=classic;html=1;rounded=0;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;edgeStyle=orthogonalEdgeStyle;" edge="1" parent="1" source="3" target="2">
<mxGeometry relative="1" as="geometry">
<Array as="points">
<mxPoint x="340" y="230"/>
<mxPoint x="340" y="110"/>
</Array>
</mxGeometry>
</mxCell>
```
### Step 7: Put everything together in the complete XML document
```xml
<mxfile>
<diagram id="simple-flowchart" name="My Flowchart">
<mxGraphModel dx="1" dy="1" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1">
<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="200" y="80" width="100" height="60" as="geometry"/>
</mxCell>
<mxCell id="3" value="Decision?" style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
<mxGeometry x="200" y="180" width="100" height="100" as="geometry"/>
</mxCell>
<mxCell id="4" value="End" style="ellipse;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
<mxGeometry x="200" 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"/>
</mxCell>
<mxCell id="6" value="Yes" 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 x="-0.3333" y="20" relative="1" as="geometry">
<mxPoint as="offset"/>
</mxGeometry>
</mxCell>
<mxCell id="7" value="No" style="endArrow=classic;html=1;rounded=0;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;edgeStyle=orthogonalEdgeStyle;" edge="1" parent="1" source="3" target="2">
<mxGeometry relative="1" as="geometry">
<Array as="points">
<mxPoint x="340" y="230"/>
<mxPoint x="340" y="110"/>
</Array>
</mxGeometry>
</mxCell>
</root>
</mxGraphModel>
</diagram>
</mxfile>
```
## Troubleshooting Common Issues
### Issue: Diagram doesn't appear in draw.io
- Ensure all IDs are unique
- Check that parent - child relationships are correct
- Verify that the XML is well - formed
### Issue: Shapes don't connect properly
- Check that connectors have correct source and target IDs
- Ensure the edge attribute is set to "1" for connectors
### Issue: Text formatting is incorrect
- Verify that `html=1` is included in the style for HTML formatting
- Check text alignment attributes in the style
### Issue: Wrong positioning
- Double - check the x, y, width, height values in the geometry
- Ensure that the coordinates are within the visible area of the diagram
## XML vs.Compressed Diagram Content
Draw.io saves files with compressed diagram content to reduce file size.When opening a draw.io XML file in a text editor, you'll typically see the diagram content as a base64-encoded compressed string rather than as plain XML.
To work with the raw XML when editing files manually:
1. Open the diagram in draw.io
2. Go to File > Export as > XML... > (uncheck "Compressed")
3. Save the file
4. The resulting file will have human - readable uncompressed XML
## Resources
- [Official diagrams.net Documentation](https://www.diagrams.net/doc/)
-[mxGraph Documentation](https://jgraph.github.io/mxgraph/docs/manual.html) (the underlying library for draw.io)
-[draw.io XML Format Reference](https://desk.draw.io/support/solutions/articles/16000067790)
## Conclusion
This guide provides a comprehensive overview of the draw.io XML schema and should help you understand and manually create draw.io diagrams.While the GUI interface is generally easier for diagram creation, understanding the XML structure is valuable for programmatic diagram generation, version control, and advanced customization.
Remember that the schema may evolve with new versions of draw.io, but the core structure and concepts described in this guide should remain relevant.