ES

    Excalidraw Sketcher

    by Edric Vale

    1

    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

    0 installsSecurity scanned

    Works with the AI tools you already use

    CClaude CodeCCursorCCodex CLIGGitHub CopilotGGemini CLIVVS CodeWWindsurfMManus+14 more

    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

    Generate editable architecture diagrams for READMEs and design docs.Create sequence diagrams with sticky arrows that stay connected when moved.Automate the scaffolding of UI wireframes using hand-drawn aesthetics.Produce PNG/SVG exports of system flows via headless CLI workflows.

    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

    Listedtoday

    Creator

    Edric Vale
    Edric Vale

    771+ total installs · 63 skills on Agensi

    Frequently Asked Questions

    Browse More Skills