excalidraw-architect_skill

Overview

This skill programmatically creates clean diagrams, flowcharts, and system architecture visuals in Excalidraw. It acts as a solutions architect that injects a control script into excalidraw.com, then adds, updates, binds, groups, and frames elements using Excalidraw’s JSON model. The output is a production-ready canvas organized for clarity, alignment, and hierarchy.

How this skill works

First the skill injects a content script into the main Excalidraw window to obtain an API bridge. The script listens for commands to get scene elements, add elements, update elements, delete elements, or clear the canvas. Elements are created as lightweight skeletons (shapes, text, arrows, frames) and relationships (containerId, boundElements, startBinding/endBinding, groupIds, frameId) are established via subsequent updates to ensure correct bidirectional links.

When to use it

• When a user asks “create diagram”, “draw flowchart”, or “architecture diagram”.
• When the user mentions Excalidraw, visualization, or system design.
• When you need programmatic, repeatable diagram generation from a spec or text description.
• When you want neatly aligned, framed, and color-coded architecture diagrams for documentation or slides.

Best practices

• Always inject the script into MAIN before sending any commands.
• Pre-assign unique IDs to all core elements and text nodes to simplify bindings.
• Create shapes and text first, then call updateElement to establish boundElements/containerId pairs.
• Use Frames to partition large architectures and set frameId on contained elements.
• Use 2–3 colors for layers (external, backend, database) and consistent sizes for element types.

Example use cases

• Generate a microservices architecture diagram with framed layers (frontend, backend, data) and bound arrows.
• Produce a sequence or flowchart where arrows are bound to steps and routed to avoid overlaps.
• Create a deployment topology showing load balancers, app servers, caches, and databases with clear color coding.
• Convert a textual system design into an editable Excalidraw canvas with grouped subsystems and labeled components.