← ClaudeAtlas

excalidrawlisted

Create sketch-style, hand-drawn-look architecture diagrams as Excalidraw files. Use when the user asks for an excalidraw diagram, a whiteboard-style or sketchy diagram, or wants a .excalidraw file created or edited. Works with or without the Excalidraw MCP tools - when the MCP tools are unavailable, author the .excalidraw JSON scene directly. Covers the scene JSON schema, element and arrow-binding essentials, an offline headless render-and-lint loop that screenshots a scene and names its defects, and export to SVG/PNG.
hsb3/dotfiles-agents · ★ 0 · AI & Automation · score 70
Install: claude install-skill hsb3/dotfiles-agents
# Excalidraw Diagrams Excalidraw produces sketch-style diagrams — the hand-drawn look that reads as "proposal, not blueprint". Good for early architecture sketches and workshop-style visuals; for precise or GitHub-rendered diagrams use the siblings (`mermaid`, `diagrams` — see the selection guide in the `diagrams` skill). ## Tooling availability — check first Some sessions expose Excalidraw MCP tools (create_view, export_to_excalidraw, checkpoints). Discover the callable names; client prefixes differ. **They are NOT always available.** 1. **MCP tools present** → use them: create the view, iterate visually, and export/checkpoint through the tools. 2. **MCP tools absent** (the common case in terminal sessions) → **author the `.excalidraw` JSON directly** with the schema below. Do not stall or tell the user it can't be done — the file format is plain JSON and fully authorable. The user opens the result at excalidraw.com (File → Open), in the VS Code Excalidraw extension, or in Obsidian's Excalidraw plugin. ## The .excalidraw file format A scene file is JSON: ```json { "type": "excalidraw", "version": 2, "source": "https://excalidraw.com", "elements": [], "appState": { "viewBackgroundColor": "#ffffff", "gridSize": null }, "files": {} } ``` ### Elements Every element needs: unique `id`, `type`, `x`, `y`, `width`, `height`, plus boilerplate the app expects. Safe defaults: ```json { "id": "api-box", "type": "rectangle", "x": 100, "y": 100, "width": 180, "h