Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub ยท Content Creation
Excalidraw Creator
Create hand-drawn style Excalidraw diagrams, flowcharts, and architecture visuals as PNG images
skill openclawclawhub Free
Create hand-drawn style Excalidraw diagrams, flowcharts, and architecture visuals as PNG images
โฌ 0 downloads โ
0 stars Unverified but indexed
Install for OpenClaw
Quick setup
- Download the package from Yavira.
- Extract the archive and review SKILL.md first.
- Import or place the package into your OpenClaw setup.
Package facts
- Download mode
- Yavira redirect
- Package format
- ZIP package
- Source platform
- Tencent SkillHub
- What's included
- references/element-schema.md, scripts/package-lock.json, scripts/package.json, scripts/render.js, scripts/setup.sh, SKILL.md
Validation
- Use the Yavira download entry.
- Review SKILL.md after the package is downloaded.
- Confirm the extracted package contains the expected setup assets.
Install with your agent
Agent handoff
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
- Download the package from Yavira.
- Extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the extracted folder.
New install
I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete.
Upgrade existing
I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run.
Trust & source
Release facts
- Source
- Tencent SkillHub
- Verification
- Indexed source record
- Version
- 1.0.0
Provenance
- Publisher
- plgonzalezrx8
- Source page
- View original listing
- Canonical URL
- Open canonical page
Documentation
Excalidraw Creator
Generate beautiful hand-drawn style diagrams rendered as PNG images.
Workflow
Generate JSON โ Write Excalidraw element array based on what the user wants Save to file โ Write JSON to /tmp/<name>.excalidraw Render โ node <skill_dir>/scripts/render.js /tmp/<name>.excalidraw /tmp/<name>.png Send โ Send the PNG via message tool with filePath
Quick Reference
node <skill_dir>/scripts/render.js input.excalidraw output.png
Element Types
TypeShapeKey PropsrectangleBoxx, y, width, heightellipseOvalx, y, width, heightdiamondDecisionx, y, width, heightarrowArrowconnects shapes (see Arrow Binding below)lineLinex, y, points: [[0,0],[dx,dy]]textLabelx, y, text, fontSize, fontFamily (1=hand, 2=sans, 3=code)
Styling (all shapes)
{ "strokeColor": "#1e1e1e", "backgroundColor": "#a5d8ff", "fillStyle": "hachure", "strokeWidth": 2, "roughness": 1, "strokeStyle": "solid" } fillStyle: hachure (diagonal lines), cross-hatch, solid roughness: 0=clean, 1=hand-drawn (default), 2=very sketchy
Arrow Binding (IMPORTANT)
Always use from/to bindings for arrows. The renderer auto-calculates edge intersection points โ no manual coordinate math needed.
Simple arrow (straight, between two shapes)
{"type":"arrow","id":"a1","from":"box1","to":"box2","strokeColor":"#1e1e1e","strokeWidth":2,"roughness":1} That's it. No x, y, or points needed. The renderer computes start/end at shape edges.
Multi-segment arrow (routed path with waypoints)
For arrows that need to go around obstacles, use absolutePoints with intermediate waypoints: { "type":"arrow","id":"a2","from":"box3","to":"box1", "absolutePoints": true, "points": [[375,500],[30,500],[30,127],[60,127]], "strokeColor":"#1e1e1e","strokeWidth":2,"roughness":1 } First point = near source shape edge (will snap to actual edge) Last point = near target shape edge (will snap to actual edge) Middle points = absolute waypoint coordinates for routing
Arrow labels
Place a separate text element near the arrow midpoint: {"type":"text","id":"label","x":215,"y":98,"width":85,"height":16,"text":"sends data","fontSize":10,"fontFamily":1,"strokeColor":"#868e96"}
Arrow styles
"strokeStyle":"dashed" โ dashed line "startArrowhead": true โ bidirectional arrow
Template: Flowchart with Bindings
{ "type": "excalidraw", "version": 2, "elements": [ {"type":"rectangle","id":"start","x":150,"y":50,"width":180,"height":60,"strokeColor":"#1e1e1e","backgroundColor":"#b2f2bb","fillStyle":"hachure","strokeWidth":2,"roughness":1}, {"type":"text","id":"t1","x":200,"y":65,"width":80,"height":30,"text":"Start","fontSize":20,"fontFamily":1,"strokeColor":"#1e1e1e"}, {"type":"arrow","id":"a1","from":"start","to":"decision","strokeColor":"#1e1e1e","strokeWidth":2,"roughness":1}, {"type":"diamond","id":"decision","x":140,"y":170,"width":200,"height":120,"strokeColor":"#1e1e1e","backgroundColor":"#ffec99","fillStyle":"hachure","strokeWidth":2,"roughness":1}, {"type":"text","id":"t2","x":185,"y":215,"width":110,"height":30,"text":"Condition?","fontSize":18,"fontFamily":1,"strokeColor":"#1e1e1e","textAlign":"center"}, {"type":"arrow","id":"a2","from":"decision","to":"process","strokeColor":"#1e1e1e","strokeWidth":2,"roughness":1}, {"type":"rectangle","id":"process","x":150,"y":350,"width":180,"height":60,"strokeColor":"#1e1e1e","backgroundColor":"#a5d8ff","fillStyle":"hachure","strokeWidth":2,"roughness":1}, {"type":"text","id":"t3","x":190,"y":365,"width":100,"height":30,"text":"Process","fontSize":20,"fontFamily":1,"strokeColor":"#1e1e1e"} ] }
Layout Guidelines
Node size: 140-200 ร 50-70 px Diamond: 180-200 ร 100-120 px (taller for text) Vertical spacing: 60-100 px between nodes Horizontal spacing: 80-120 px between nodes Text: Position inside shape manually (offset ~15-30px from top-left of shape) Arrow labels: Place as separate text elements near midpoint of arrow path
Color Palette
Fills: #a5d8ff (blue), #b2f2bb (green), #ffec99 (yellow), #ffc9c9 (red), #d0bfff (purple), #f3d9fa (pink), #fff4e6 (cream) Strokes: #1e1e1e (dark), #1971c2 (blue), #2f9e44 (green), #e8590c (orange), #862e9c (purple) Labels: #868e96 (gray, for annotations)
Tips
Every element needs a unique id (required for binding!) Use from/to on arrows โ don't calculate coordinates manually roughness:0 for clean diagrams, 1 for sketchy feel Text fontFamily:1 for hand-drawn, 3 for code Group related elements spatially, color-code by type For nested layouts, use a large background rectangle as a container
Category context
Writing, remixing, publishing, visual generation, and marketing content production.
Source: Tencent SkillHub
Largest current source with strong distribution and engagement signals.
Package contents
Included in package
2 Docs2 Scripts2 Config
- SKILL.md
- references/element-schema.md
- scripts/render.js
- scripts/setup.sh
- scripts/package-lock.json
- scripts/package.json