Skip to content
Get packs

Excalidraw Diagram Sketcher

Sketch and edit hand-drawn diagrams on a live Excalidraw canvas and share them as links or files.

Source Download skill
Repository
danielmiessler/LifeOS
Stars
19,682
Licence
MIT
Files
8 files

What it does

Once installed, the agent can draw hand-drawn style diagrams on a local Excalidraw canvas that you can watch update in your browser and edit yourself. It can also read a rough diagram you drew on that canvas back into structured data, convert Mermaid diagrams, embed screenshots, check that text is readable, and produce shareable excalidraw.com links or .excalidraw files.

Great for

  • People who want quick whiteboard-style architecture or flow sketches created from a description
  • Developers who already use Excalidraw and want an agent to tidy or extend their diagrams
  • Anyone who wants a sketch they can keep editing by hand rather than a polished image

Skip it if

  • Polished final artwork or marketing visuals, which the skill itself says should go to a different skill (Art) because hand-drawn canvases are not meant as final art
  • Sharing sensitive diagrams by link without thought, since links upload scene content to excalidraw.com
  • Machines where you cannot run Bun and let a local server bind to port 3579

Try asking

  • “Sketch a diagram of my microservice architecture on the canvas”
  • “Read my canvas and turn my rough whiteboard into a cleaner organized layout”
  • “Convert this Mermaid flowchart to an Excalidraw diagram and give me a share link”
  • “Embed this dashboard screenshot as a node in my system diagram”
Step-by-step guide: how to use Excalidraw Diagram SketcherInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 8 original files, the MIT licence and an attribution note.

    Excalidraw.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip Excalidraw.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip Excalidraw.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Open http://127.0.0.1:3579 to watch the diagram draw and make manual edits; treat the local canvas as a preview, since its text can render mis-sized.
  • For diagrams with screenshots, share the exported .excalidraw file rather than a link, because embedded images do not survive share links.
  • Run the contrast check script before accepting a diagram, and review shared-link files carefully since opening a link can overwrite your current excalidraw.com scene.

What's inside

  • Intents/RefineDiagram.md
  • Intents/SketchDiagram.md
  • References/Cheatsheet.md
  • SKILL.md
  • Tools/AddImage.ts
  • Tools/Canvas.ts
  • Tools/ContrastCheck.ts
  • Tools/Share.ts

Redistributed unmodified from danielmiessler/LifeOS under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.