excalidraw

Q: How do I install excalidraw?

Run npx skills add https://github.com/kv0906/cc-skills --skill excalidraw in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/excalidraw/ (personal) or .claude/skills/excalidraw/ (project).

by kv0906Code Quality & Workflow

Create Excalidraw diagrams as JSON files for flowcharts, user journeys, system architectures, wireframes, and visual documentation. Use when the user asks to create diagrams, flowcharts, visual representations, architecture diagrams, mind maps, or any Excalidraw-compatible visualizations. Outputs .excalidraw.json files that can be opened in excalidraw.com or any Excalidraw-compatible app.

Installs: 50
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/kv0906/cc-skills --skill excalidraw

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads excalidraw automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Excalidraw Diagram Generator

Create Excalidraw-compatible JSON diagrams. Output .excalidraw.json files.

JSON Schema

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [],
  "appState": {
    "gridSize": null,
    "viewBackgroundColor": "#ffffff"
  },
  "files": {}
}

Coordinate System

Origin: Top-left corner (0, 0)
X-axis: Increases rightward
Y-axis: Increases downward
Unit: Pixels

Grid-Based Layout System

Use a 20px grid for alignment. Standard positions:

GRID_UNIT = 20
COLUMN_WIDTH = 200    # Element + gap
ROW_HEIGHT = 150      # Element + gap

Position formula:
  x = START_X + (column * COLUMN_WIDTH)
  y = START_Y + (row * ROW_HEIGHT)

Recommended START_X = 50, START_Y = 100

Standard Element Sizes

Element	Width	Height	Use Case
Small box	120	60	Labels, simple steps
Standard box	160	80	Process steps
Large box	200	100	Detailed nodes
Wide box	240	80	Long text
Diamond	100	100	Decision points
Circle	80	80	Start/End nodes
Icon circle	90	80	With emoji

Text Centering Formula

CRITICAL: To center text inside a shape:

text_x = shape_x + (shape_width - text_width) / 2
text_y = shape_y + (shape_height - text_height) / 2

Text Size Reference

Font Size	Char Width	Line Height	Use
11	~6px	15px	Labels, annotations
12	~7px	16px	Secondary text
14	~8px	18px	Body text
16	~9px	20px	Primary text
18	~10px	24px	Headings
20	~11px	26px	Titles
28	~16px	35px	Icons/Emoji

Estimate text_width: char_count * char_width Estimate text_height: line_count * line_height

Centering Example

Shape: x=100, y=100, width=160, height=80
Text: "Process" (7 chars), fontSize=16

text_width = 7 * 9 = 63
text_height = 1 * 20 = 20
text_x = 100 + (160 - 63) / 2 = 148.5 ≈ 148
text_y = 100 + (80 - 20) / 2 = 130

Element Types

Common Properties (required for all)

{
  "id": "unique-id",
  "type": "rectangle",
  "x": 100,
  "y": 100,
  "width": 160,
  "height": 80,
  "strokeColor": "#1e1e1e",
  "backgroundColor": "transparent",
  "fillStyle": "solid",
  "strokeWidth": 2,
  "roughness": 1,
  "opacity": 100,
  "angle": 0,
  "seed": 100,
  "version": 1,
  "isDeleted": false,
  "boundElements": null,
  "link": null,
  "locked": false
}

Type-Specific Properties

Rectangle: Add "roundness": {"type": 3} for rounded corners

Text:

{
  "type": "text",
  "text": "Content\nLine 2",
  "fontSize": 16,
  "fontFamily": 1,
  "textAlign": "center",
  "verticalAlign": "middle"
}

fontFamily: 1=Virgil (hand), 2=Helvetica, 3=Cascadia (mono)

Arrow/Line:

{
  "type": "arrow",
  "points": [[0, 0], [100, 0]],
  "startArrowhead": null,
  "endArrowhead": "arrow"
}

Points are relative to element's x,y
Arrowheads: null, "arrow", "bar", "dot", "triangle"

Arrow Positioning

Horizontal Arrow (Left to Right)

From shape at (x1, y1, w1, h1) to shape at (x2, y2, w2, h2):

arrow_x = x1 + w1           # Right edge of source
arrow_y = y1 + h1/2         # Vertical center
gap = x2 - (x1 + w1)        # Space between shapes
points = [[0, 0], [gap, 0]]

Vertical Arrow (Top to Bottom)

arrow_x = x1 + w1/2         # Horizontal center
arrow_y = y1 + h1           # Bottom edge of source
gap = y2 - (y1 + h1)
points = [[0, 0], [0, gap]]

Diagonal/Curved Arrow

points = [[0, 0], [dx/2, dy], [dx, dy]]  # Curved path

Color Palette

Color	Stroke	Background	Use
Blue	#1971c2	#a5d8ff	Primary, info
Green	#2f9e44	#b2f2bb	Success, start
Orange	#e8590c	#ffc9c9	Warning, action
Red	#e03131	#ffc9c9	Error, end
Purple	#9c36b5	#eebefa	Special, loop
Yellow	#f08c00	#ffec99	Highlight
Teal	#099268	#96f2d7	Secondary
Gray	#868e96	#dee2e6	Neutral, labels
Black	#1e1e1e	-	Text, borders

Z-Order (Element Array Order)

Elements render in array order. First = back, last = front.

Correct order:

Background shapes (containers, frames)
Connection lines/arrows
Foreground shapes (nodes, boxes)
Text labels
Icons/overlays

Layout Patterns

Horizontal Flow (Left to Right)

COL_GAP = 60  # Gap between elements

Element 1: x=50,  y=100, w=160, h=80
Arrow 1:   x=210, y=140, points=[[0,0],[60,0]]
Element 2: x=270, y=100, w=160, h=80
Arrow 2:   x=430, y=140, points=[[0,0],[60,0]]
Element 3: x=490, y=100, w=160, h=80

Vertical Flow (Top to Bottom)

ROW_GAP = 50

Element 1: x=100, y=50,  w=160, h=80
Arrow 1:   x=180, y=130, points=[[0,0],[0,50]]
Element 2: x=100, y=180, w=160, h=80

Decision Branch (Diamond)

Diamond:    x=300, y=200, w=100, h=100
Center:     (350, 250)

Yes path (up-right):
  arrow_x=350, arrow_y=200
  points=[[0,0], [0,-50], [100,-50]]

No path (down-right):
  arrow_x=350, arrow_y=300
  points=[[0,0], [0,50], [100,50]]

Feedback Loop (Return Arrow)

From bottom-right back to left:
  Start: (800, 400)
  points=[
    [0, 0],        # Start
    [0, 80],       # Down
    [-400, 80],    # Left
    [-400, -150]   # Up to target
  ]

Complete Node Example

[
  {
    "id": "node1-box",
    "type": "rectangle",
    "x": 100, "y": 100, "width": 160, "height": 80,
    "strokeColor": "#1971c2",
    "backgroundColor": "#a5d8ff",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "roughness": 1,
    "opacity": 100,
    "angle": 0,
    "seed": 100,
    "version": 1,
    "isDeleted": false,
    "boundElements": [{"id": "arrow1", "type": "arrow"}],
    "roundness": {"type": 3},
    "link": null,
    "locked": false
  },
  {
    "id": "node1-text",
    "type": "text",
    "x": 130, "y": 130,
    "width": 100, "height": 20,
    "text": "Process Step",
    "fontSize": 16,
    "fontFamily": 1,
    "textAlign": "center",
    "verticalAlign": "middle",
    "strokeColor": "#1e1e1e",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "roughness": 1,
    "opacity": 100,
    "angle": 0,
    "seed": 101,
    "version": 1,
    "isDeleted": false,
    "boundElements": null,
    "link": null,
    "locked": false
  }
]

Positioning Checklist

Before generating:

☐ Define grid: START_X, START_Y, COLUMN_WIDTH, ROW_HEIGHT
☐ List all elements with row/column positions
☐ Calculate exact x,y using formulas
☐ Calculate text positions using centering formula
☐ Calculate arrow start points and relative endpoints
☐ Order elements correctly for z-order
☐ Assign unique IDs and incrementing seeds

Templates

Basic flowchart: assets/flowchart-template.excalidraw.json
Processing loop: references/processing-loop-template.md
Element specs: references/elements.md

Output

Save as .excalidraw.json
Copy to /mnt/user-data/outputs/
Tell user: "Open at excalidraw.com → Menu → Open"

FAQ

What does the excalidraw skill do?

How do I install excalidraw?

Run npx skills add https://github.com/kv0906/cc-skills --skill excalidraw in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/excalidraw/ (personal) or .claude/skills/excalidraw/ (project).

Which AI agents can use excalidraw?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is excalidraw safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains excalidraw?

It is published by kv0906 in kv0906/cc-skills. It has 50 recorded installs.

More from kv0906/cc-skills

View all →

premium-frontend-design

kv0906/cc-skills

Create award-winning, cinematic frontend interfaces that feel ALIVE. Combines 10+ years of creative frontend experience with technical excellence. Specializes in WebGL, custom shaders, premium animations, and distinctive aesthetics that would win on Awwwards. Use when building landing pages, dashboards, platforms, or any interface where "generic AI slop" is unacceptable.

Frontend & Design1.4K installs

svg-art

kv0906/cc-skills

Create SVG graphics through programmatic code generation. Use this skill when the user asks to create icons, logos, illustrations, diagrams, data visualizations, generative art, patterns, fractals, or any vector graphics. Provides executable Python scripts for grids, radial patterns, fractals, waves, particles, charts, icons, and optimization.

Media & Creative510 installs

ralph

kv0906/cc-skills

Set up and run Ralph Wiggum loop - autonomous AI coding with clean slate iterations, PRD-driven features, and CI quality gates. Use for long-running autonomous coding tasks.

DevOps & Cloud43 installs

Popular code quality & workflow skills

View category →

grill-me

mattpocock/skills

A relentless interview to sharpen a plan or design.

Code Quality & Workflow1.4M installs

improve-codebase-architecture

mattpocock/skills

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

Code Quality & Workflow1.2M installs

handoff

mattpocock/skills

Compact the current conversation into a handoff document for another agent to pick up.

Code Quality & Workflow1.1M installs

domain-modeling

mattpocock/skills

Build and sharpen a project's domain model. Use when discussing codebase terminology, writing or editing a GLOSSARY.md, or recording or editing an ADR.

Code Quality & Workflow890.6K installs

codebase-design

mattpocock/skills

Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.

Code Quality & Workflow863.8K installs

diagnosing-bugs

mattpocock/skills

Diagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.

Code Quality & Workflow848.4K installs

excalidraw

Install

Install

Describe the task

Review the result

SKILL.md

Excalidraw Diagram Generator

JSON Schema

Coordinate System

Grid-Based Layout System

Standard Element Sizes

Text Centering Formula

Text Size Reference

Centering Example

Element Types

Common Properties (required for all)

Type-Specific Properties

Arrow Positioning

Horizontal Arrow (Left to Right)

Vertical Arrow (Top to Bottom)

Diagonal/Curved Arrow

Color Palette

Z-Order (Element Array Order)

Layout Patterns

Horizontal Flow (Left to Right)

Vertical Flow (Top to Bottom)

Decision Branch (Diamond)

Feedback Loop (Return Arrow)

Complete Node Example

Positioning Checklist

Templates

Output

FAQ

More from kv0906/cc-skills

Popular code quality & workflow skills