Skip to content

README.md

Latest commit

 

History

History
85 lines (59 loc) · 2.37 KB

README.md

File metadata and controls

85 lines (59 loc) · 2.37 KB
Raw

Excalidraw Flowchart Skill

A Claude Code skill for creating Excalidraw flowcharts and diagrams from natural language descriptions.

Installation

Prerequisites

Install the CLI tool first:

npm i @swiftlysingh/excalidraw-cli

Install the Skill

Clone this repo to your Claude Code skills directory:

git clone https://github.com/swiftlysingh/excalidraw-skill ~/.claude/skills/excalidraw-flowchart

Or manually copy the SKILL.md file to ~/.claude/skills/excalidraw-flowchart/SKILL.md.

Usage

Once installed, Claude Code will automatically use this skill when you ask it to:

  • "Create a flowchart for the login process"
  • "Draw a diagram showing the API request flow"
  • "Visualize this workflow as an Excalidraw file"
  • "Make a flow diagram for user registration"

How It Works

  1. You describe what you want in natural language
  2. Claude analyzes your request and identifies nodes, connections, and flow
  3. Claude generates DSL syntax for the flowchart
  4. Claude runs excalidraw-cli to create the .excalidraw file
  5. You open the file in Excalidraw to view/edit

DSL Syntax Quick Reference

Syntax Element
[Label] Rectangle (process step)
{Label?} Diamond (decision)
(Label) Ellipse (start/end)
[[Label]] Database
![path] Image
-> Arrow
-> "text" -> Labeled arrow
--> Dashed arrow

New in v1.1.0

  • DOT/Graphviz support - Use existing .dot files or DOT syntax
  • Image nodes - Include images in your flowcharts with ![path]
  • Decorations - Attach icons/badges to nodes with @decorate
  • Stickers - Use a library of reusable images with @sticker
  • Scatter - Distribute images across the canvas with @scatter

Example

Request: "Create a flowchart for error handling with retry logic"

Generated DSL:

(Start) -> [Execute Operation] -> {Success?}
{Success?} -> "yes" -> [Return Result] -> (End)
{Success?} -> "no" -> {Retries < 3?}
{Retries < 3?} -> "yes" -> [Increment Retry] -> [Execute Operation]
{Retries < 3?} -> "no" -> [Log Error] -> (Failed)

Output: error-handling.excalidraw

Related

License

MIT