// Build and maintain Excalidraw architecture diagrams. Use this when the user asks to "draw", "diagram", or "visualize" an architecture or process.
[HINT] Download the complete skill directory including SKILL.md and all related files
| name | excalidraw |
| description | Build and maintain Excalidraw architecture diagrams. Use this when the user asks to "draw", "diagram", or "visualize" an architecture or process. |
This skill allows you to create and manipulate architecture diagrams using the Excalidraw format.
The skill manages a diagram.excalidraw file in the current workspace. You can add nodes (rectangles with labels) and arrows to represent systems, components, and their relationships.
Create a shape with a text label at specific coordinates.
./.pi/skills/excalidraw/scripts/excalidraw_tool.py add_node "User" 100 100
Create an arrow between two existing nodes by their IDs.
./.pi/skills/excalidraw/scripts/excalidraw_tool.py add_arrow <from_id> <to_id> "API Request"
Update the position of a node.
./.pi/skills/excalidraw/scripts/excalidraw_tool.py move <id> <new_x> <new_y>
Remove a node or arrow.
./.pi/skills/excalidraw/scripts/excalidraw_tool.py delete <id>
View current elements and their IDs.
./.pi/skills/excalidraw/scripts/excalidraw_tool.py list
I've provided an export_html command. It creates a standalone HTML file with the diagram data embedded, which bypasses CORS issues when opening locally.
./.pi/skills/excalidraw/scripts/excalidraw_tool.py export_html viewer.html
Open viewer.html in your browser to see the masterpiece.
clear if starting fresh.add_node for each component. Note the IDs returned.add_arrow with the recorded IDs.list to verify the structure.diagram.excalidraw file is ready. They can open it at excalidraw.com by dragging and dropping the file onto the canvas.excalidraw_tool.py: Python script for manipulating the .excalidraw JSON file.