Package Exports

@agent-canvas/cli
@agent-canvas/cli/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@agent-canvas/cli) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@agent-canvas/cli

CLI tool for drawing on Excalidraw canvas. Designed for AI agents but works great for humans too.

Part of Agent Canvas — an AI agent skill for drawing diagrams.

Installation

npm install -g @agent-canvas/cli
# or
bun add -g @agent-canvas/cli

Features

Real-time canvas in browser via WebSocket
Multi-canvas support: manage multiple diagrams with sidebar or CLI
Shapes: rectangle, ellipse, diamond, polygon
Text with 9 anchor points for precise positioning
Arrows: sharp, round (curved), elbow (90° turns)
Element manipulation: move, rotate, resize, group, delete
Import/export: .excalidraw files, PNG export

Usage

Start Canvas

agent-canvas start

Load File

agent-canvas load diagram.excalidraw  # Load into current canvas

Canvas Management

# List all canvases (* marks active)
agent-canvas list

# Create new canvas
agent-canvas new -n "Flowchart"
agent-canvas new -n "Architecture" --use  # Create and switch to it

# Switch to canvas by name
agent-canvas use "Flowchart"

# Rename current canvas
agent-canvas rename "New Name"

Drawing

# Add shapes
agent-canvas add-shape -t rectangle -x 100 -y 100 -w 200 -h 100 --background-color "#FFA07A" -l "My Box"
agent-canvas add-shape -t ellipse -x 300 -y 100 -w 100 -h 100
agent-canvas add-shape -t diamond -x 500 -y 100 -w 100 -h 100

# Add text (--ax/--ay = anchor point, -a = anchor type)
agent-canvas add-text -t "Hello World" --ax 100 --ay 300 --font-size 24
agent-canvas add-text -t "Centered" --ax 200 --ay 250 -a center
# Anchors: topLeft, topCenter, topRight, leftCenter, center, rightCenter, bottomLeft, bottomCenter (default), bottomRight

# Add lines and arrows
agent-canvas add-line -x 100 -y 400 --end-x 300 --end-y 400
agent-canvas add-arrow -x 100 -y 500 --end-x 300 --end-y 500

# Arrow types: sharp (default), round, elbow
agent-canvas add-arrow -x 100 -y 100 --end-x 100 --end-y 300 --arrow-type round --via "50,200"
agent-canvas add-arrow -x 175 -y 520 --end-x 175 --end-y 280 --arrow-type elbow --via "120,520;120,280"

# Add polygon
agent-canvas add-polygon -p '[{"x":0,"y":0},{"x":100,"y":0},{"x":50,"y":100}]'

Element Manipulation

# Delete elements (supports batch)
agent-canvas delete-elements -i <id1>,<id2>,<id3>

# Rotate elements (degrees, positive = clockwise)
agent-canvas rotate-elements -i <id1>,<id2> -a 45

# Move elements
agent-canvas move-elements -i <id1>,<id2> --delta-x 50 --delta-y 100

# Resize shapes (expand/contract edges)
agent-canvas resize-elements -i <id> --bottom 50              # Expand bottom by 50px
agent-canvas resize-elements -i <id> --right 30 --bottom 20   # Expand right-bottom corner
agent-canvas resize-elements -i <id> --left -20               # Contract left edge by 20px

# Group/ungroup
agent-canvas group-elements -i <id1>,<id2>,<id3>
agent-canvas ungroup-element -i <element-id>

Read & Export

# Read scene (TOON format - token efficient)
agent-canvas read

# Read scene (JSON format)
agent-canvas read --json

# Save to file
agent-canvas save diagram.excalidraw

# Export to PNG
agent-canvas export -o output.png
agent-canvas export -o output.png --scale 2 --dark --no-background

# Clear canvas
agent-canvas clear