excalidraw

What This Skill Does

The Excalidraw skill for OpenClaw empowers you to generate professional, hand-drawn style diagrams programmatically. It functions by converting structured JSON data into visual PNG images. Whether you are mapping out system architecture, drafting a complex workflow, or visualizing business logic, this skill automates the creation of high-quality visuals that retain the authentic, 'rough' aesthetic of Excalidraw. The skill follows a straightforward pipeline: generating JSON element arrays, persisting them to temporary storage, invoking a rendering engine, and delivering the final image directly to your chat interface.

Installation

To integrate this skill into your environment, use the OpenClaw command-line interface. Run the following command in your terminal:

clawhub install openclaw/skills/skills/a-anand-91119/excalidraw

Ensure that you have Node.js installed in your environment, as the rendering process relies on a local script execution to transform the JSON definitions into visual PNG assets.

Use Cases

This skill is ideal for technical documentation and collaborative planning. Key use cases include:

• Architecture Visualization: Representing cloud infrastructure or microservice interactions.
• Workflow Design: Mapping user journeys or API request lifecycles for project management documentation.
• Brainstorming: Quickly generating visual representations of abstract concepts during planning meetings.
• Academic/Educational Content: Creating clear, hand-drawn diagrams for tutorials or blog posts where a less rigid, more human aesthetic is desired.

Example Prompts

1. "Create a flowchart showing a user authentication process with a start rectangle, a diamond decision point for password validation, and arrows connecting them."
2. "Generate an architecture diagram showing a client connecting to a load balancer, which then forwards requests to two separate API server boxes."
3. "Draw a simple sequence diagram representing an HTTP GET request flowing from a browser to a server and returning data, using dashed lines for the response."

Tips & Limitations

• Arrow Binding: Always leverage the from and to properties for arrows. This offloads the geometry math to the renderer and ensures connections stay consistent even if you move shapes around.
• Styling: Experiment with the roughness property. A value of 0 produces clean, precise lines, while 2 yields a very artistic, scribbled effect. Use hachure for the classic Excalidraw look.
• Complexity: For complex diagrams, define custom waypoints in absolutePoints to prevent arrow overlap with your boxes.
• Constraints: The skill operates on a file-based temporary buffer. Ensure your system has write permissions for the /tmp directory to allow the rendering script to generate the output PNG successfully.