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
Shapes: rectangle, ellipse, diamond, polygon
Text with 9 anchor points for precise positioning
Arrows: sharp, round (curved), elbow (90° turns)
Element manipulation: move, rotate, group, delete
Import/export: .excalidraw files, PNG export

Usage

Start Canvas

agent-canvas start
agent-canvas start -f diagram.excalidraw  # Load existing file

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

# 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