Agent skill · design visual · sundial-org
excalidraw-flowchart
Create Excalidraw flowcharts from descriptions. Use when user asks to "create a flowchart", "draw a diagram", "visualize a process", "make a flow diagram", "architecture diagram", or discusses workflow/process visualization. Supports DSL, DOT/Graphviz, and JSON formats.
Why this skill is useful
Provides specific DSL syntax and commands for generating Excalidraw flowcharts that the AI wouldn't reliably generate on its own.
What it needs
Requires @swiftlysingh/excalidraw-cli installed locally. About 5k tokens when loaded. Last updated 2026-03-07. 639 stars on the source repository.
What this skill does
Excalidraw Flowchart Skill Create professional flowcharts and diagrams as Excalidraw files that can be opened in Excalidraw. When to Use This Skill User asks to create a flowchart or diagram User wants to visualize a process or workflow User needs an architecture diagram User mentions "excalidraw" or "flow diagram" User wants to document decision trees Prerequisites The @swiftlysingh/excalidraw-cli tool must be installed: Or use via npx (no installation needed): How to Create a Flowchart Step 1: Analyze the Request Identify from the user's description: What are the main steps/nodes? What are the decision points? What is the flow direction? Are there any loops or branches? Step 2: Write the DSL Use this DSL syntax to describe the flowchart: Syntax Element Use For -------- --------- --------- [Label] Rectangle Process steps, actions {Label?} Diamond Decisions, conditionals (Label) Ellipse Start/End points [[Label]] Database Data storage ![path] Image Inline images Sized Image Images with explicit dimensions -> Arrow Connections -> "text" -> Labeled Arrow Connections with labels --> Dashed Arrow Optional/alternative paths DSL Directives Directive Description Example ----------- ------------- --------- @direction Set flow direction @direction LR @spacing Set node spacing @spacing 60 @image Position image @image logo.png at 100,50 @decorate Attach decoration to node @decorate icon.png top-right @sticker Add sticker from library @sticker checkmark at 200,100 @library Set sticker library path @library ./assets/stickers @scatter Scatter images on canvas @scatter star.png count:5 Step 3: Generate the File Run the CLI to create the .excalidraw file: Or for multi-line DSL, use a heredoc: Step 4: Inform the User Tell the user: 1. The file was created at the specified path 2. They can open it in Excalidraw (https://excalidraw.com) via File > Open 3. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills sundial-org/excalidraw-flowchart