Transform text descriptions into beautiful, hand-drawn diagrams and architecture charts rendered as high-quality PNG images.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install excalidraw
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install excalidraw using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Excalidraw Diagram Generator?
The Excalidraw Diagram Generator is a specialized tool designed to bridge the gap between technical descriptions and visual documentation. By leveraging the popular Excalidraw format, this skill allows AI agents to create system architectures, flowcharts, and UI wireframes that have a human, sketchy aesthetic. This approach is often more approachable for team discussions and documentation than rigid, automated diagrams.
Integration via Openclaw Skills ensures that the rendering process is seamless, taking raw JSON data and outputting clean PNG files ready for inclusion in reports or pull request descriptions. The skill handles everything from simple geometric shapes to complex, routed arrow bindings, making it an essential utility for developers and architects alike.
Excalidraw Diagram Generator Use Cases
- Creating system architecture diagrams for technical documentation.
- Mapping out complex logic flowcharts for business processes.
- Rapidly prototyping UI wireframes with a sketchy, hand-drawn feel.
- Visualizing database schemas and entity relationships.
- Generating visual aids for technical tutorials or blog posts.
How Excalidraw Diagram Generator Works
- The AI agent interprets the user's request and generates a structured JSON element array following the Excalidraw schema.
- The skill writes this JSON data to a temporary file location on the host system.
- A Node.js rendering script is invoked to process the JSON file and convert it into a high-resolution PNG image.
- The final image is delivered to the user through the agent's message tool using the generated file path.
Excalidraw Diagram Generator Setup
To get started with this skill, ensure you have Node.js installed in your environment. Follow these steps for configuration:
- Ensure the rendering script is present in your scripts directory.
- Install any necessary Node.js dependencies for the renderer.
- Test the rendering capability manually using the following CLI command:
node <skill_dir>/scripts/render.js input.excalidraw output.png
Excalidraw Diagram Generator Data Schema & Taxonomy
The skill organizes data using a specific JSON structure for Excalidraw elements. Below is the primary schema layout:
| Attribute | Description |
|---|---|
type |
The shape type (rectangle, ellipse, diamond, arrow, line, text) |
id |
Unique identifier used for linking and arrow binding |
strokeColor |
Hex code for the outline color |
backgroundColor |
Hex code for the fill color |
fillStyle |
The fill texture (hachure, cross-hatch, or solid) |
roughness |
The level of hand-drawn sketchiness (0 to 2) |
fontFamily |
Typeface choice (1=hand-drawn, 2=sans, 3=code) |
Excalidraw Diagram Generator Advanced Features
- Intelligent Arrow Binding: Automatically calculates intersection points between shapes so you don't have to manage coordinates manually.
- Multi-segment Routing: Supports
absolutePointsfor complex paths that need to navigate around other diagram elements. - Sketchy Aesthetics Control: Adjustable
roughnesslevels allow for everything from pixel-perfect clean diagrams to highly organic sketches. - Thematic Coloring: Pre-defined color palettes for fills and strokes to maintain visual consistency across large diagrams.
- Bidirectional Arrowheads: Simple boolean flags for creating two-way relationships in flowcharts using Openclaw Skills.
SKILL.md
Loading
Related Openclaw Skills
TS API Miner
An intelligent assistant for analyzing TypeScript files to extract API interfaces, request structures, and JSDoc comments into structured Markdown documentation.
Plan-I (Workflow Initialization)
A dedicated initialization tool that transforms user ideas into structured planning documents to kickstart AI-driven development workflows.
plan-c
An AI agent skill designed to continue and refine project plans through intelligent context recognition and deep codebase exploration.
Weather
A lightweight, API-key-free tool for retrieving global weather forecasts and real-time conditions directly through the command line.
MinerU PDF Extractor
A high-performance PDF-to-Markdown extraction tool supporting OCR, formulas, and complex table layouts via the MinerU API.
Eywa
A sophisticated multi-agent coordination layer providing shared spatial memory and swarm navigation for distributed AI agents.
Featured*
