A professional-grade diagramming skill for generating, rendering, and validating Excalidraw visuals from simple flowcharts to complex system architectures.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install excalidraw-render
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-render 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 Creator?
Excalidraw Diagram Creator is a robust technical visualization tool designed for Openclaw Skills. It allows AI agents and developers to programmatically generate .excalidraw files using either a simplified DSL for rapid prototyping or raw JSON for high-fidelity technical diagrams. The skill prioritizes professional aesthetics, enforcing clean lines, specific color palettes, and structured layouts.
Beyond simple file generation, this skill integrates a full rendering pipeline. It utilizes a Python-based rendering engine and Playwright to convert diagrams into high-resolution PNGs and PDFs. This ensures that every diagram delivered is visually inspected for alignment, text clipping, and professional spacing, meeting the high standards required for technical documentation and presentations.
Excalidraw Diagram Creator Use Cases
- Creating system architecture diagrams and cloud infrastructure visualizations.
- Designing logic flowcharts and decision trees for complex software workflows.
- Visualizing API event sequences and data transformation pipelines.
- Generating evidence artifacts like code snippets and JSON schemas within a visual context.
- Mapping out user journeys and UI mockups for frontend development planning.
How Excalidraw Diagram Creator Works
- Depth Assessment: The skill determines if the request requires a Quick Path (DSL) for simple flows or a Full Path (JSON) for complex architecture.
- Generation: It generates the diagram source code, utilizing a library of visual patterns (Fan-out, Convergence, Timelines) and specific shape meanings.
- Local Rendering: The system runs a headless browser via Playwright to render the .excalidraw file into a high-resolution PNG.
- Visual Validation: The agent inspects the rendered image to ensure text fits within containers and no elements overlap.
- Refinement: If issues are detected, the skill iteratively adjusts coordinates and spacing in the source file and re-renders.
- Export: Final assets are provided as .excalidraw, PNG, or PDF files based on user requirements.
Excalidraw Diagram Creator Setup
To initialize the Excalidraw environment within Openclaw Skills, run the following commands:
# Navigate to the skill directory
cd ~/.openclaw/skills/excalidraw-diagram
# Build the local Excalidraw bundle
bash setup.sh
# Sync Python dependencies and install browser binaries
uv sync && uv run playwright install chromium
Excalidraw Diagram Creator Data Schema & Taxonomy
The skill organizes data through a structured JSON schema and a specific file hierarchy:
| Component | Description |
|---|---|
| .excalidraw | The source JSON file containing elements, appState, and versioning. |
| .png | High-resolution 2x (or 3x) scale export for visual consumption. |
| References | Includes color-palette.md, element-templates.md, and layout-rules.md for consistency. |
| Metadata | Tracks required binaries (python3, uv, node, npm) for cross-platform compatibility. |
Excalidraw Diagram Creator Advanced Features
- DSL Support: Quick-start syntax for rapid flowcharting using
[Process],{Decision}, and->operators. - Multi-Zoom Strategy: Capability to create layered diagrams from high-level summaries to deep-dive technical details.
- Evidence Artifacts: Specialized rendering for dark-themed code blocks and syntax-highlighted data structures.
- Automated Validation Loop: Mandatory render-and-fix cycle to ensure 100% professional output without manual intervention.
- Custom Export Scaling: Support for up to 3x scale PNGs and automated PDF conversion via ImageMagick.
SKILL.md
Loading
Related Openclaw Skills
Google Calendar Skill
A powerful integration that allows AI agents to manage Google Calendar events using OAuth 2.0 authentication.
Short Video Pacing & Rhythm Guide
A specialized guide for mastering video editing rhythms, cut timing, and energy mapping to maximize viewer retention across social platforms.
Intellectia Stock Forecast
A professional-grade AI trading assistant for US stocks and crypto that provides technical ratings, entry/exit points, and long-term price predictions.
Google Docs Read Document
An atomic CLI skill for AI agents to instantly extract plain text from any Google Document.
College Admission Assistant
A comprehensive AI-driven advisor for China's college entrance examination, streamlining subject selection, university research, and admission planning.
Google Sheets AI Integration
A powerful AI agent skill for seamless interaction with Google Sheets via the official API and OAuth 2.0.
Featured*
