Agent skill · design visual · agents365-ai
excalidraw
Use when user requests diagrams, flowcharts, architecture charts, or visualizations. Also use proactively when explaining systems with 3+ components, complex data flows, or relationships that benefit from visual representation. Generates .excalidraw files and exports to PNG/SVG via Kroki API or locally using excalidraw-brute-export-cli.
Why this skill is useful
Generates .excalidraw files and provides specific export commands for visualizations that the AI wouldn't reliably create on its own.
What it needs
Requires curl, npm installed locally. About 12k tokens when loaded. Last updated 2026-08-05. 29 stars on the source repository.
What this skill does
Excalidraw Diagrams Overview Generate .excalidraw JSON files and export to PNG/SVG. Two export options: Kroki API (curl) — zero install, SVG output only excalidraw-brute-export-cli — local Firefox-based, PNG + SVG Supported formats: PNG (local CLI only), SVG (both options). PDF is NOT supported. When to Use Explicit triggers: user says "画图", "diagram", "visualize", "flowchart", "draw", "架构图", "流程图" Proactive triggers: Explaining a system with 3+ interacting components Describing a multi-step process or decision tree Comparing architectures or approaches side by side Skip when: a simple list or table suffices, or user is in a quick Q&A flow When NOT to use it — route elsewhere: Polished, precise diagrams, strict UML, or branded vendor icons → drawio. Diagrams-as-code in git, auto-laid-out from text → mermaid (general) or plantuml (UML). An infinite-canvas whiteboard or programmatic freehand strokes → tldraw. Prerequisites Option A: Kroki API (recommended — zero install, SVG only) No additional setup. SVG rendered via https://kroki.io. Option B: Local CLI (required for PNG) The CLI uses Firefox (not Chromium). Check and install: macOS patch (one-time, required): Windows/Linux: No patch needed. Workflow 1. Check deps — use Kroki (curl) for SVG; use local CLI for PNG 2. Plan — pick the visual metaphor (see Relationship-to-layout map), then the diagram type and color palette 3. Generate — write .excalidraw JSON file (section-by-section for large diagrams) 4. Export — run Kroki or CLI command 5. Verify the render — view the exported PNG, fix any defects, re-export (see Verify the Render) 6. Review loop — show the image to the user, apply the minimal .excalidraw edit per request, re-export until approved (see Review Loop) 7. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills agents365-ai/excalidraw-skill