An automated diagramming skill for AI coding agents to design, configure, and output production-ready hand-drawn Excalidraw charts.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install hermes-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 hermes-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 Skill?
The Excalidraw Diagram Skill enables AI agents to generate structured, professional-grade hand-drawn charts without relying on bloated external rendering tools or cloud API accounts. It is designed to work natively as part of the broader Openclaw Skills ecosystem, giving developer agents an elegant way to express complex software architectures, workflow pipelines, and data topologies in clear, human-readable diagrams.
By programmatically generating standard Excalidraw JSON files, this skill maintains extreme layout precision. It enforces structural grid arrangements, uniform element sizes, and strict text-to-box sizing calculations to eliminate layout bugs like overlapping text, clipped labels, or crossing connector lines. The generated files can be imported directly into Excalidraw or shared securely.
Excalidraw Diagram Skill Use Cases
- System Architecture Mapping: Easily design multi-tiered software architectures with backend, API, and frontend boundaries using layered visual zones.
- Workflow and Process Mapping: Lay out multi-step logic workflows or business process flows with clear start, decision, and success routes.
- Sequence Diagrams: Generate step-by-step lifelines illustrating complex interactions between multiple system actors, users, and APIs.
- Technical Documentation: Automatically attach high-quality visual documentation to repositories during developer agent code generations and updates.
How Excalidraw Diagram Skill Works
- Determine Layout and Grid: The skill maps out all components onto a virtual grid (e.g., columns of 240px and rows of 120px) to prevent messy, unaligned boxes.
- Select Semantic Color Code: A designated color palette (such as Flow, Layered Architecture, or Comparison) is chosen to convey functional meaning rather than random decoration.
- Formulate JSON Elements: Shape and text elements are defined in logical z-order sequences, binding text tags directly to their container shapes to keep text centered.
- Pre-flight Dimension Verification: The model automatically audits the length of all text labels, scaling box widths and connector line coordinates using safe math multipliers to ensure text fits inside shapes.
- File Export: The completed JSON structure is written to a local
.excalidrawfile. - Secure Upload & Sharing: An integrated encryption script processes the file client-side using AES-GCM, uploads it anonymously to Excalidraw, and outputs a secure, shareable URL.
Excalidraw Diagram Skill Setup
Ensure your local environment has the required dependencies. As with other Openclaw Skills, installation is straightforward and designed to work cleanly with minimal package overhead:
# Install required client-side encryption dependencies
pip install cryptography
Once the dependencies are installed, you can generate a secure shareable link by executing the direct upload script on any local .excalidraw file:
python ~/.hermes/skills/creative/excalidraw/scripts/upload.py ~/diagrams/my_diagram.excalidraw
Excalidraw Diagram Skill Data Schema & Taxonomy
The diagram skill organizes its JSON configuration using standard element nodes. Every diagram file conforms to the structural schema outlined below.
Essential Sizing Rules
| Characters in Label | Minimum Box Width | Font Size |
|---|---|---|
| 1 to 8 chars | 120 px | 16 (Virgel) |
| 9 to 14 chars | 160 px | 16 (Virgel) |
| 15 to 20 chars | 200 px | 16 (Virgel) |
| 21 to 28 chars | 240 px | 16 (Virgel) |
Sizing Calculation Formula
To prevent overflow and ensure text is perfectly legible, box dimensions are calculated dynamically using: box_width >= (text_length * 9.5) (at standard fontSize 16).
Element Definitions
- Shape Containers:
rectangle,ellipse, ordiamondobjects containing unique ID, position metadata, and visual configuration values. - Bound Labels: Child
textelements bound explicitly to their parent containers viacontainerIdandboundElementsproperties. Do not use raw, invalid label properties on container shapes. - Connector Arrows: Directional paths utilizing start and end bindings (
startBinding,endBinding) targeting specific shape handles to maintain connections even during layout updates.
Excalidraw Diagram Skill Advanced Features
- AES-GCM Secure Sharing: Uploads are encrypted locally inside the Python script before leaving your server, ensuring secure cloud sharing without API keys.
- Vision-Based Auto-Correction: Seamlessly integrates with standard headless browser utilities in the Openclaw Skills suite to capture, verify, and auto-correct alignment issues using AI vision models.
- Structured Semantic Theming: Pre-defined color palettes built specifically for architectural tiers or system flows prevent messy, multi-colored outputs.
- Dynamic Container Binding: Replaces invalid
labelattributes with exact parent-child bound elements to ensure persistent text centering and proper scaling.
SKILL.md
Loading
Related Openclaw Skills
Enlightenment Now - Steven Pinker's Progress Toolkit
A data-driven cognitive toolkit to combat societal pessimism and analyze global progress using the core tenets of reason, science, humanism, and progress.
Chrome Extension Maintainer
An automated operating workflow and validation rubric designed to ensure Chrome extensions meet Web Store policies, privacy promises, and high-quality release standards.
Pexo Launch Video Agent Skill
A specialized AI agent skill that communicates with the Pexo platform to draft scripts, generate scenes, and render publish-ready launch videos for startups and products.
Startup Video - Pexo
An AI-powered video generation skill that automates scriptwriting, shot selection, voiceovers, and music production to deliver polished, startup-ready intro videos.
chrome-devtools-axi
An advanced CLI-based browser automation skill that wraps chrome-devtools-mcp for high-performance and token-efficient AI agent web interactions.
SJZL AI OKC
An advanced automation skill for the SJZL platform that enables ecommerce sellers to perform one-click product listing, automatic URL identification, and configuration management.
Featured*
