A specialized tool for transforming natural-language process descriptions into editable, sketch-style Excalidraw diagrams and PNG exports.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install handdraw-flowchart
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 handdraw-flowchart 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 Handdraw Flowchart?
Handdraw Flowchart is a powerful utility designed for developers and architects who need to visualize complex logic without the clinical look of standard diagrams. By leveraging Mermaid syntax as an intermediary, it allows AI agents and users to generate strictly validated flowcharts, sequence diagrams, and class diagrams that are converted into native Excalidraw scenes. This unique approach combines the precision of code-based diagramming with the aesthetic appeal of hand-drawn sketches.
As a standout member of the Openclaw Skills ecosystem, this tool ensures that your process visualizations are not only beautiful but also fully editable. Whether you are documenting business logic or system architectures, the skill manages the entire lifecycle from text to high-quality PNG export, ensuring that every diagram meets strict structural validation rules before completion.
Handdraw Flowchart Use Cases
- Creating hand-drawn style business process maps and decision trees from simple text descriptions.
- Visualizing actor and system interactions using sequence diagrams for technical documentation.
- Mapping domain objects and entity relationships via class diagrams during the design phase.
- Converting existing Mermaid files into editable Excalidraw scenes for collaborative whiteboarding.
- Automating the generation of sketch-style PNG assets for README files and presentations.
How Handdraw Flowchart Works
- The skill parses natural-language input to generate validated Mermaid code for flowcharts, sequence diagrams, or class diagrams.
- The raw Mermaid source is saved as a .mmd file, adhering to specific generation rules to ensure compatibility.
- A specialized Node.js renderer script performs a strict syntax validation gate to prevent rendering errors.
- Upon validation, the script uses a headless browser environment to convert the Mermaid definitions into native Excalidraw elements.
- The system outputs three distinct files: the normalized Mermaid source, an editable .excalidraw scene, and a final rendered PNG image.
Handdraw Flowchart Setup
To get started with this entry in the Openclaw Skills library, ensure you have Node.js and npm installed. Follow these steps to configure the environment:
# Navigate to the skill directory
cd handdraw-flowchart
# Install the necessary dependencies
npm install
# Run the renderer with your Mermaid file
node scripts/render-mermaid-handdraw.mjs --input /path/to/diagram.mmd --out-dir /path/to/output --name my-diagram
Handdraw Flowchart Data Schema & Taxonomy
The skill maintains a structured output format for every processed diagram to ensure data integrity and ease of use:
| File Extension | Description | Purpose |
|---|---|---|
.mmd |
Normalized Mermaid Source | The raw code definition of the diagram. |
.excalidraw |
Editable Scene File | A JSON-based file that can be opened in Excalidraw for manual tweaks. |
.png |
Rendered Image | A high-resolution export for immediate use in documents. |
image-fallback |
Metadata Flag | Indicates when a classDiagram is rendered as a static image within Excalidraw. |
Handdraw Flowchart Advanced Features
- Strict Validation Mode: Use the --validate-only flag to perform rapid syntax checks without triggering a full render.
- Native Element Mapping: Specifically optimized for flowcharts to ensure they convert into fully manipulatable Excalidraw shapes rather than static images.
- Headless Browser Integration: Automatically detects local Chrome or Chromium paths via CHROME_PATH for environment-agnostic rendering.
- Stable Node Identification: Enforces ASCII-stable IDs while supporting localized labels for multi-language documentation.
- Error-Resistant Contracts: Rejects unsupported Mermaid types early to maintain high output quality across the Openclaw Skills collection.
SKILL.md
Loading
Related Openclaw Skills
PopAI PowerPoint PPTX
A sophisticated AI presentation assistant that generates researched, high-fidelity PowerPoint decks from simple text prompts or reference files.
1688 Item One-Click Assistant
A professional automation tool for 1688 sellers to perform one-click modifications to product titles, main images, and member dynamics.
After Eight Skill
A specialized research skill for analyzing the market positioning, historical evolution, and commercial success of Nestlé's iconic after-dinner mint brand.
Airheads: Candy Market Analysis
A comprehensive research skill for analyzing the business evolution and food science behind the Airheads aerated candy brand.
TCM Li-Fa-Fang-Yao Formula Study
A professional TCM learning agent that deconstructs medical formulas by deriving treatments directly from disease logic and herbal properties.
1688 Shop Health Diagnosis
A professional diagnostic tool for 1688 merchants to analyze shop health, compare performance against industry peers, and identify growth bottlenecks.
Featured*
