Excalidraw Diagram Skill

npx degit xstongxue/best-skills/skills/excalidraw-diagram ~/.claude/skills/excalidraw-diagram

excalidraw-diagram produces standard .excalidraw JSON files that open directly in Excalidraw, Obsidian’s Excalidraw plugin, or the VS Code extension. The output is fully editable, not a flattened image.

Diagram types

• System architecture — clients, frontends, services, databases, externals
• Business flow / sequence-ish — top-down or left-to-right step ordering
• Data structure / module dependency — entity relationships
• Free whiteboard — research framework, task breakdown, mind-mapping

How it composes

The skill expects (or guides you to provide) a structured input:

【Diagram type】: architecture / flow / structure / freeform
【Source】: free description / paper outline / code structure / API list
【Nodes】: list of modules / entities / steps (groupable)
【Edges】: who connects whom, direction, label
【Layout】: top-down / left-right / layered
【Color rules】: per-type color preferences

It builds an abstract model first (nodes + edges + layers), then produces coordinates with a simple readable layout — no fancy auto-routing, just “clean enough.”

Where it shines

• Hand-drawn vibe matters — informal team docs, README diagrams, research notes
• Iteration friendly — you’ll edit the diagram by hand after
• Cross-tool portability — .excalidraw works everywhere

Pairs with

• drawio-diagram — when formal styling matters (use that instead)
• Obsidian / Logseq notebooks — drop the file straight into your vault

→ Install on GitHub

Use excalidraw-diagram to draw the architecture of a typical RAG pipeline:
user → frontend → API gateway → embedder → vector DB → LLM. Use top-down
layout, group by layer (client / API / data).