excalidraw

What This Skill Does

The excalidraw skill empowers the OpenClaw AI agent to generate professional-grade, hand-drawn style diagrams programmatically. Instead of relying on static assets, the agent constructs a JSON representation of an Excalidraw file—including boxes, ellipses, diamonds, text labels, and complex arrows—and renders it into a high-quality PNG image file. This skill is ideal for visualizing software architecture, business logic flowcharts, and system designs on the fly. By automating the rendering process, the agent provides a visual component to conversational responses, making complex information easier to digest.

Installation

To integrate this skill into your environment, use the OpenClaw command-line interface. Run the following command in your terminal to fetch the package from the source repository: clawhub install openclaw/skills/skills/henrino3/ec-excalidraw Once installed, ensure your system has Node.js configured, as the skill utilizes a local script to process the Excalidraw JSON into a rasterized image format.

Use Cases

• Software Architecture: Illustrate microservices, database clusters, or API request flows for technical documentation.
• Business Process Mapping: Create decision trees and logic flows for user onboarding or procurement processes.
• Collaborative Planning: Visualize project timelines or task dependencies during remote meetings or Slack discussions.
• Educational Content: Quickly generate visual aids to explain concepts or frameworks within a Google Doc or educational platform.

Example Prompts

1. "Create a flowchart showing the user authentication process starting from the login page, verifying the session, and redirecting to the dashboard."
2. "Draw an architecture diagram for a three-tier web application consisting of a React frontend, a Node.js backend, and a PostgreSQL database."
3. "Visualize the logic flow for a decision tree that determines if a customer is eligible for a refund based on their purchase date."

Tips & Limitations

• Arrow Binding: Always leverage the from and to bindings for arrows. The renderer handles coordinate calculations for you, ensuring arrows are perfectly connected to the edges of your shapes without manual math.
• Styling Consistency: Stick to the predefined styling properties like hachure for the classic hand-drawn look, or use solid for a cleaner, professional appearance.
• File Management: Note that the skill utilizes the /tmp/ directory for rendering. It is intended for ephemeral output; if you require long-term storage, ensure you route the final PNG to the appropriate persistent storage or document integration.
• Scope: The skill is highly optimized for diagrams. It is not intended to be a full-featured drawing application, so focus on logical structure over artistic complexity.