excalidraw-canvas

What This Skill Does

The excalidraw-canvas skill empowers your OpenClaw agent to programmatically generate clean, professional-grade diagrams and wireframes. By leveraging the Excalidraw engine, the agent can convert structured JSON element definitions into high-resolution PNG images. It provides a visual dimension to your AI interactions, allowing the agent to explain complex system architectures, map out user flows, or sketch UI wireframes on the fly. Every diagram generated includes a unique edit URL, enabling you to seamlessly transition from an AI-generated draft to manual refinement in the Excalidraw web environment.

Installation

To integrate this capability into your OpenClaw environment, execute the following command in your terminal: clawhub install openclaw/skills/skills/0xartex/excalidraw-canvas

Use Cases

This skill is indispensable for technical teams and product designers. Use it to:

• Generate architectural diagrams during brainstorming sessions.
• Create flowcharts for documenting incident response procedures or logic paths.
• Rapidly mock up interface layouts before diving into high-fidelity design tools.
• Visualize complex data relationships or state transitions that are difficult to explain through text alone.

Example Prompts

1. "Draw a flowchart showing the user authentication process including login, token validation, and redirect to the dashboard."
2. "Create a system architecture diagram for a load-balanced web application with a frontend, API layer, and database, then provide me with the edit link."
3. "Sketch a wireframe for a mobile login page with a hero image, input fields for email and password, and a 'Forgot Password' link."

Tips & Limitations

• Precision Matters: Coordinates are absolute. When layering elements, ensure your X and Y values account for the specified widths and heights to avoid overlap.
• Iteration: Don't spend excessive time prompting for perfect layout adjustments in the terminal. Generate the foundational structure using the agent, then use the provided 'editUrl' to perform pixel-perfect manual tweaks.
• Complexity Limits: While highly versatile, this skill is best suited for medium-complexity diagrams. For massive enterprise diagrams, consider splitting the logic into multiple smaller, related diagrams.
• Persistence: Always ensure you save your work via the edit URL link, as the temporary PNG file created in /tmp/ is designed for immediate display within your chat session.