← ClaudeAtlas

excalidrawlisted

Create and revise editable `.excalidraw` diagrams as Excalidraw JSON for architecture diagrams, flowcharts, sequence diagrams, concept maps, and other hand-drawn explainers.
HybridAIOne/hybridclaw · ★ 108 · AI & Automation · score 85
Install: claude install-skill HybridAIOne/hybridclaw
# Excalidraw Use this skill when the user wants an editable diagram, not just a rendered image. Typical requests: - architecture or system diagrams - flowcharts and process maps - sequence diagrams - concept maps and explainers - hand-drawn style visuals that should stay editable in Excalidraw Excalidraw files are plain JSON. The default deliverable is a `*.excalidraw` file in the workspace. The user can drag that file into [excalidraw.com](https://excalidraw.com) to view, edit, or export it. ## Default Workflow 1. Plan the diagram before writing JSON: title, nodes, connectors, groups, and rough canvas size. 2. Write a valid Excalidraw `elements` array. 3. Wrap the array in the standard file envelope. 4. Save the result as `*.excalidraw`. 5. If the user wants a shareable browser link, run: ```bash node skills/excalidraw/scripts/upload.mjs diagram.excalidraw ``` The upload helper encrypts the diagram client-side and prints the Excalidraw share URL. ## File Envelope Use this shape unless you are editing an existing file and need to preserve more fields: ```json { "type": "excalidraw", "version": 2, "source": "hybridclaw", "elements": [], "appState": { "viewBackgroundColor": "#ffffff" }, "files": {} } ``` When editing an existing `.excalidraw` file, preserve `appState`, `files`, and any other existing top-level keys unless the user asked for a deliberate reset. ## Rules - Use Excalidraw JSON, not SVG or HTML, unless the user explicitly asked for a