Use to produce hand-drawn style Excalidraw JSON diagrams for architectures, flows and sequences. Covers library elements, positioning, arrows, styling and PNG/S
Secure checkout via Stripe
Works with the AI tools you already use
See it in action
You say
Create an Excalidraw diagram for a serverless API flow: Gateway to Lambda to DynamoDB. Use hachure fill for the DB and blue arrows.
Your agent does
{ "type": "excalidraw", "version": 2, "elements": [ {"type": "rectangle", "id": "gw", "x": 100, "y": 100, "width": 140, "height": 60, "strokeColor": "#1e1e1e"}, {"type": "arrow", "x": 240, "y": 130, "points": [[0,0], [100,0]], "strokeColor": "#1971c2", "startBinding": {"elementId": "gw"}} ] }
What you get
About this skill
The problem
Standard architectural diagrams often look too rigid for early-stage docs, while manual whiteboarding is time-consuming to align and update. Generating structured, editable "hand-drawn" diagrams programmatically is difficult due to coordinate math and element binding requirements.
What it does
- Generates valid Excalidraw JSON files for system architectures, sequence diagrams, and UI wireframes.
- Calculates grid-based positioning and gutters to prevent overlapping elements automatically.
- Binds arrows to shapes using element IDs so connections persist when you move boxes in the editor.
- Applies customizable visual styles including hachure fills, roughness levels, and stroke weights.
- Includes headless export instructions for converting JSON to PNG or SVG via CLI.
Frameworks & tools
Excalidraw, JSON, jq, and excalidraw-cli for headless rendering.
Why this beats prompting it yourself
Generic LLM prompts often produce invalid JSON or messy, overlapping shapes without proper z-index or coordinate logic. This skill enforces specific grid math, label centering, and element binding, ensuring the output is actually usable in a whiteboard editor immediately.
Use cases
- Visualizing microservices architecture for engineering design docs.
- Creating sequence diagrams for complex authentication or data flows.
- Drafting low-fidelity UI wireframes for rapid prototyping feedback.
- Generating mind maps for brainstorming sessions that stay editable.
Known limitations
Not suitable for strict UML with exact class relations or statistical charts. Requires a JSON-compatible editor or the Excalidraw CLI for viewing and export.
How to install
Drop the file into your AI Agent. Works with Claude, Cursor, ChatGPT, and 20+ more.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
30-day refund
Not a fit? Get your money back
Trust & safety
Security scanned
Verified clean today
- 30-day refund guarantee
- One-time purchase, yours forever
- Secure checkout via Stripe
Creator
771+ total installs · 63 skills on Agensi
Frequently Asked Questions
Browse More Skills
Prompt Dataset Builder
Build and curate high-quality prompt datasets for fine-tuning and eval — deduped and labeled.
Incident Postmortem
Structured post-incident reviews: timeline, root cause, action items, and blameless write-ups.
Dependency Upgrade Planner
Safe dependency upgrade plans: changelog-aware risk scoring, test hints, and rollback paths.
Cli Ux Doc Builder
Design CLI tools with the right flags, help text, and error messages users actually understand.