excalidraw-ai_skill

Overview

This skill generates professional Excalidraw diagrams by producing Excalidraw JSON directly. It supplies the JSON schema reference, element property guidance, color palettes, layout rules, and ready-to-use icon libraries so an AI agent can build diagrams autonomously without templates. Use it to programmatically compose architecture diagrams, flowcharts, mind maps, and system visuals with pixel-level control.

How this skill works

The skill outputs a complete Excalidraw JSON object containing elements, appState, and files. It knows element types (rectangle, ellipse, diamond, text, arrow, line), required properties (position, size, colors, styles), library components, and binding rules for connections. Agents embed library items, compute positions using layout guidelines, generate unique IDs and seeds, and return a .excalidraw/.json payload ready for import or export to PNG/SVG.

When to use it

• Automating architecture diagrams from code analysis or infrastructure descriptions
• Generating flowcharts or decision diagrams from business logic or documentation
• Building mind maps or brainstorming visuals programmatically
• Embedding diagrams in docs or web apps where reproducible JSON output is required
• Creating custom visuals with exact layout, color, and styling control

Best practices

• Generate unique element IDs (UUIDs or deterministic hashes) and set seed: hash(id) for consistent rendering
• Group related shapes and labels with groupIds to preserve layout when moving components
• Use startBinding/endBinding on arrows to keep connections stable during edits
• Follow the color palette mapping for component types to maintain visual clarity
• Respect spacing and layer guidelines (horizontal 240px, vertical 180px) for readable architecture layouts

Example use cases

• Produce a multi-layer system architecture JSON with CDN, gateway, services, and data layers positioned by the layout rules
• Convert service dependency graphs into Excalidraw JSON with arrows bound to service elements
• Generate a flowchart from a sequence of steps where diamonds represent decisions and rectangles processes
• Assemble a reusable diagram by pulling components from the aws-architecture and system-design icon libraries
• Create a radial mind map by computing child node angles and inserting text/ellipse elements around a central node