agent-canvas

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Agent Canvas

A CLI tool to interact with an Excalidraw canvas for creating diagrams and visualizations.

一款可与Excalidraw画布交互的CLI工具，用于创建图表和可视化内容。

Installation

安装

Before using, check if CLI is installed:

bash

which agent-canvas && agent-canvas --version

If not installed: Ask the user which package manager they prefer (bun or npm), then install:
bash
```
bun add -g @agent-canvas/cli@0.9.3
# or
npm install -g @agent-canvas/cli@0.9.3
```
If installed but version differs from 0.9.3: Upgrade using the same package manager:
- Path contains
```
.bun
```
  →
```
bun add -g @agent-canvas/cli@0.9.3
```
- Otherwise →
```
npm install -g @agent-canvas/cli@0.9.3
```
After install/upgrade: Verify with
```
agent-canvas --version
```
to confirm version is 0.9.3

使用前，请检查CLI是否已安装：

bash

which agent-canvas && agent-canvas --version

若未安装：询问用户偏好的包管理器（bun或npm），然后执行安装：
bash
```
bun add -g @agent-canvas/cli@0.9.3
# or
npm install -g @agent-canvas/cli@0.9.3
```
若已安装但版本不是0.9.3：使用相同的包管理器进行升级：
- 路径包含
```
.bun
```
  →
```
bun add -g @agent-canvas/cli@0.9.3
```
- 其他情况 →
```
npm install -g @agent-canvas/cli@0.9.3
```
安装/升级完成后：执行
```
agent-canvas --version
```
验证，确认版本为0.9.3

Quick Start

快速开始

Start the canvas (opens in browser):
bash
```
agent-canvas start
```
Use CLI commands to draw on the canvas.

启动画布（在浏览器中打开）：
bash
```
agent-canvas start
```
使用CLI命令在画布上绘图。

Commands Reference

命令参考

Start Canvas

启动画布

bash

agent-canvas start                    # Start server and open browser

bash

agent-canvas start                    # 启动服务器并打开浏览器

Load File

加载文件

bash

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

When loading from file: Remember the file path and save back to it with

agent-canvas save <original-file>

bash

agent-canvas load file.excalidraw     # 将.excalidraw文件加载到当前画布

从文件加载时：请记住文件路径，后续使用

agent-canvas save <original-file>

保存回原文件。

Canvas Management

画布管理

The canvas supports multiple canvases. Each canvas is stored independently and can be switched between.

bash

agent-canvas list                     # List all canvases (* marks active)
agent-canvas new -n "Name" [--use]    # Create new canvas, optionally switch to it
agent-canvas use "Name"               # Switch to canvas by name
agent-canvas rename "New Name"        # Rename current canvas

Notes:

Canvas names are case-insensitive and must be unique
Delete canvases via UI (hover over canvas in sidebar, click "..." menu)
Each canvas has its own scene data; switching automatically saves current canvas

画布支持多画布功能。每个画布独立存储，可在不同画布间切换。

bash

agent-canvas list                     # 列出所有画布（*标记当前激活的画布）
agent-canvas new -n "Name" [--use]    # 创建新画布，可选择直接切换到该画布
agent-canvas use "Name"               # 通过名称切换到对应画布
agent-canvas rename "New Name"        # 重命名当前画布

注意事项：

画布名称不区分大小写且必须唯一
通过UI删除画布（将鼠标悬停在侧边栏的画布上，点击“...”菜单）
每个画布有独立的场景数据；切换画布时会自动保存当前画布

Add Text

添加文本

bash

agent-canvas add-text -t "<text>" --ax <x> --ay <y> [options]

Options:

--font-size <size>

--text-align <left|center|right>

-a/--anchor <anchor>

--stroke-color <hex>

-n/--note <text>

Font sizes: S=16, M=20 (default), L=28, XL=36

Anchor (

-a

): Since text size is unknown until rendered, anchor gives you precise positioning control by specifying which point of the text bounding box aligns to (--ax, --ay). Default:

bottomLeft

Anchor	Common Text Types
`topLeft`	Badge, Tag, Icon label
`topCenter`	Subtitle, Description below shape
`topRight`	Timestamp, Version, Status
`leftCenter`	Side annotation (right of shape)
`center`	Centered title, Main label
`rightCenter`	Side annotation (left of shape)
`bottomLeft`	Footnote, Note
`bottomCenter`	Title, Header above shape
`bottomRight`	Footnote, Signature

Returns:
```
Text created (id: <id>, x: <x>, y: <y>, <width>x<height>)
```
— actual top-left position and dimensions for precise layout

bash

agent-canvas add-text -t "<text>" --ax <x> --ay <y> [options]

可选参数：

--font-size <size>

、

--text-align <left|center|right>

、

-a/--anchor <anchor>

、

--stroke-color <hex>

、

-n/--note <text>

字体大小：S=16，M=20（默认），L=28，XL=36

锚点(

-a

)：由于文本大小在渲染前未知，锚点可通过指定文本边界框的哪个点与（--ax, --ay）对齐，来实现精确定位。默认值：

bottomLeft

。

锚点	常见文本类型
`topLeft`	徽章、标签、图标说明
`topCenter`	副标题、形状下方的描述
`topRight`	时间戳、版本号、状态标识
`leftCenter`	侧边注释（形状右侧）
`center`	居中标题、主要标签
`rightCenter`	侧边注释（形状左侧）
`bottomLeft`	脚注、备注
`bottomCenter`	标题、形状上方的页眉
`bottomRight`	脚注、签名

返回结果：
```
Text created (id: <id>, x: <x>, y: <y>, <width>x<height>)
```
—— 实际的左上角位置和尺寸，用于精确布局

Add Drawing Elements

添加绘图元素

All drawing commands share common style options:

Stroke:

--stroke-color <hex>

(default: #1e1e1e),

--stroke-width <1-4>

(default: 2),

--stroke-style <solid|dashed|dotted>

(default: solid)

Fill (shapes only):

--background-color <hex>

(default: transparent),

--fill-style <solid|hachure|cross-hatch>

(default: solid)

Meta:
```
-n/--note <text>
```
- semantic description for the element. Use liberally - notes help understand diagram intent when reading back later.

Recommended Colors (from Excalidraw palette):

Color	Stroke (dark)	Background (light)
Red	#e03131	#ffc9c9
Blue	#1971c2	#a5d8ff
Green	#2f9e44	#b2f2bb
Yellow	#f08c00	#ffec99
Cyan	#0c8599	#99e9f2
Violet	#6741d9	#b197fc
Gray	#495057	#dee2e6

所有绘图命令共享以下通用样式参数：

描边：
```
--stroke-color <hex>
```
（默认值：#1e1e1e）、
```
--stroke-width <1-4>
```
（默认值：2）、
```
--stroke-style <solid|dashed|dotted>
```
（默认值：solid）
填充（仅形状可用）：
```
--background-color <hex>
```
（默认值：transparent）、
```
--fill-style <solid|hachure|cross-hatch>
```
（默认值：solid）
元数据：
```
-n/--note <text>
```
- 元素的语义描述。请大量使用 - 备注有助于后续阅读时理解图表意图。

推荐颜色（来自Excalidraw调色板）：

颜色	深色描边	浅色背景
红色	#e03131	#ffc9c9
蓝色	#1971c2	#a5d8ff
绿色	#2f9e44	#b2f2bb
黄色	#f08c00	#ffec99
青色	#0c8599	#99e9f2
紫色	#6741d9	#b197fc
灰色	#495057	#dee2e6

Shapes

形状

bash

agent-canvas add-shape -t <type> -x <x> -y <y> [-w <width>] [-h <height>] [-l <label>]

Types:
```
rectangle
```
,
```
ellipse
```
,
```
diamond
```
Use
```
-l/--label
```
to add text inside the shape (fontSize: 16 by default),
```
--label-font-size <n>
```
to adjust
Label color inherits from
```
--stroke-color
```
by default; use
```
--label-stroke-color <hex>
```
to override
Returns:
```
Shape created (id: <id> x=<x> y=<y> w=<width> h=<height>)
```
— actual dimensions after auto-sizing for labels

⚠️ Label Sizing - CRITICAL: Calculate BEFORE drawing

If shape size is too small, Excalidraw auto-expands, breaking arrow coordinates. You MUST:

Calculate minimum dimensions using the formulas below
Use the calculated values directly — NEVER estimate or use smaller values

Step 1: Calculate text dimensions (fontSize=16 by default)
  textWidth = charCount × fontSize × 0.6  (English/numbers)
  textWidth = charCount × fontSize        (CJK characters)
  textHeight = lineCount × fontSize × 1.35

Step 2: Calculate minimum shape size (use these values, not smaller!)
  rectangle: width = textWidth + 50,  height = textHeight + 50
  ellipse:   width = textWidth × 1.42 + 55,  height = textHeight × 1.42 + 55
  diamond:   width = textWidth × 2 + 60,  height = textHeight × 2 + 60

Example: Label "Message Queue" (13 chars) in ellipse

textWidth = 13 × 16 × 0.6 = 124.8
textHeight = 1 × 16 × 1.35 = 21.6
ellipse width = 124.8 × 1.42 + 55 = 232
ellipse height = 21.6 × 1.42 + 55 = 86
→ Use: -w 232 -h 86 (or round up to -w 240 -h 90)

Tip: For long labels, insert

\n

manually, then recalculate with updated lineCount.

bash

agent-canvas add-shape -t <type> -x <x> -y <y> [-w <width>] [-h <height>] [-l <label>]

类型：
```
rectangle
```
、
```
ellipse
```
、
```
diamond
```
使用
```
-l/--label
```
在形状内部添加文本（默认字体大小：16），使用
```
--label-font-size <n>
```
调整大小
标签颜色默认继承
```
--stroke-color
```
；使用
```
--label-stroke-color <hex>
```
可覆盖默认设置
返回结果：
```
Shape created (id: <id> x=<x> y=<y> w=<width> h=<height>)
```
—— 为标签自动调整尺寸后的实际大小

⚠️ 标签尺寸 - 关键提示：绘制前务必计算

如果形状尺寸过小，Excalidraw会自动扩展，导致箭头坐标错位。您必须：

使用以下公式计算最小尺寸
直接使用计算值 —— 切勿估算或使用更小的值

步骤1：计算文本尺寸（默认字体大小=16）
  textWidth = 字符数 × 字体大小 × 0.6 （英文/数字）
  textWidth = 字符数 × 字体大小        （CJK字符）
  textHeight = 行数 × 字体大小 × 1.35

步骤2：计算形状最小尺寸（请使用这些值，不要更小！）
  rectangle: width = textWidth + 50,  height = textHeight + 50
  ellipse:   width = textWidth × 1.42 + 55,  height = textHeight × 1.42 + 55
  diamond:   width = textWidth × 2 + 60,  height = textHeight × 2 + 60

示例：在椭圆中添加标签“Message Queue”（13个字符）

textWidth = 13 × 16 × 0.6 = 124.8
textHeight = 1 × 16 × 1.35 = 21.6
ellipse width = 124.8 × 1.42 + 55 = 232
ellipse height = 21.6 × 1.42 + 55 = 86
→ 使用：-w 232 -h 86（或向上取整为 -w 240 -h 90）

提示：对于长标签，手动插入

\n

换行，然后根据更新后的行数重新计算。

Lines & Arrows

线条与箭头

bash

agent-canvas add-line -x <x1> -y <y1> --end-x <x2> --end-y <y2>
agent-canvas add-arrow -x <x1> -y <y1> --end-x <x2> --end-y <y2>

Arrow-specific:
```
--start-arrowhead
```
,
```
--end-arrowhead
```
(arrow, bar, dot, triangle, diamond, none)

Arrow Types (

--arrow-type

Type	Description	Use Case
`sharp`	Straight line (default)	Direct connections
`round`	Curved line with control point	Organic flows, avoiding overlaps
`elbow`	Right-angle turns (90°)	Flowcharts, circuit diagrams

Intermediate Points (

--via

): Use

--via

to specify intermediate points as absolute coordinates in format

"x1,y1;x2,y2;..."

bash

undefined

bash

agent-canvas add-line -x <x1> -y <y1> --end-x <x2> --end-y <y2>
agent-canvas add-arrow -x <x1> -y <y1> --end-x <x2> --end-y <y2>

箭头专属参数：
```
--start-arrowhead
```
、
```
--end-arrowhead
```
（可选值：arrow、bar、dot、triangle、diamond、none）

箭头类型(

--arrow-type

)：

类型	描述	使用场景
`sharp`	直线（默认）	直接连接
`round`	带控制点的曲线	自然流程、避免重叠
`elbow`	直角转弯（90°）	流程图、电路图

中间点(

--via

)：使用

--via

指定中间点，格式为绝对坐标

"x1,y1;x2,y2;..."

：

bash

undefined

Round arrow: one control point determines curve direction

弧形箭头：一个控制点决定曲线方向

Vertical arrow curving left (control point at x=50, left of the line)

向左弯曲的垂直箭头（控制点位于线条左侧x=50处）

agent-canvas add-arrow -x 100 -y 100 --end-x 100 --end-y 300 --arrow-type round --via "50,200"

Elbow arrow: multiple points for 90° turns

直角箭头：多个点定义90°转弯

Loop back pattern: down → left → up (for flowchart iterations)

折返模式：向下 → 向左 → 向上（用于流程图循环）

agent-canvas add-arrow -x 175 -y 520 --end-x 175 --end-y 280 --arrow-type elbow --via "120,520;120,280"


**Tips**:
- For `round`: curve bends toward the control point (offset from straight path)
- For `elbow`: points define the corners of the 90° path

agent-canvas add-arrow -x 175 -y 520 --end-x 175 --end-y 280 --arrow-type elbow --via "120,520;120,280"


**提示**：
- 对于`round`类型：曲线向控制点方向弯曲（偏离直线路径）
- 对于`elbow`类型：点定义了90°路径的拐角

Polygon

多边形

bash

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

bash

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

Image

图片

bash

agent-canvas add-image -f <path> -x <x> -y <y> [-w <width>] [-h <height>] [-n <note>]

Supported formats: PNG, JPEG, GIF, SVG, WebP
Width/height default to original image dimensions; specify one to scale proportionally
Image data is embedded as base64 in the canvas (stored in browser IndexedDB)

Returns:

Image added (id: <id>, x: <x>, y: <y>, <width>x<height>)

bash

agent-canvas add-image -f <path> -x <x> -y <y> [-w <width>] [-h <height>] [-n <note>]

支持格式：PNG、JPEG、GIF、SVG、WebP
宽度/高度默认为图片原始尺寸；指定其中一个值可按比例缩放
图片数据以base64格式嵌入画布（存储在浏览器IndexedDB中）

返回结果：

Image added (id: <id>, x: <x>, y: <y>, <width>x<height>)

Manipulate Elements

元素操作

bash

agent-canvas delete-elements -i <id1>,<id2>,...
agent-canvas rotate-elements -i <id1>,<id2>,... -a <degrees>
agent-canvas move-elements -i <id1>,<id2>,... --delta-x <dx> --delta-y <dy>
agent-canvas resize-elements -i <id1>,<id2>,... [--top <n>] [--bottom <n>] [--left <n>] [--right <n>]
agent-canvas group-elements -i <id1>,<id2>,...
agent-canvas ungroup-element -i <id>

Resize Elements (

resize-elements

): Expand or contract element edges (rectangle, ellipse, diamond, image). Values are in element's local coordinate system (respects rotation).

Examples:

bash

undefined

bash

agent-canvas delete-elements -i <id1>,<id2>,...
agent-canvas rotate-elements -i <id1>,<id2>,... -a <degrees>
agent-canvas move-elements -i <id1>,<id2>,... --delta-x <dx> --delta-y <dy>
agent-canvas resize-elements -i <id1>,<id2>,... [--top <n>] [--bottom <n>] [--left <n>] [--right <n>]
agent-canvas group-elements -i <id1>,<id2>,...
agent-canvas ungroup-element -i <id>

调整元素大小(

resize-elements

)：扩展或收缩元素边缘（矩形、椭圆、菱形、图片）。数值基于元素的局部坐标系（考虑旋转）。

示例：

bash

undefined

Expand bottom edge by 50px (increase height)

将底部边缘扩展50px（增加高度）

agent-canvas resize-elements -i abc123 --bottom 50

Expand both right and bottom (like dragging bottom-right corner)

同时扩展右侧和底部边缘（类似拖动右下角）

agent-canvas resize-elements -i abc123 --right 50 --bottom 30

Contract left edge by 20px (decrease width)

将左侧边缘收缩20px（减少宽度）

agent-canvas resize-elements -i abc123 --left -20

Expand all sides uniformly

均匀扩展所有边缘

agent-canvas resize-elements -i abc123 --top 25 --bottom 25 --left 25 --right 25

undefined

agent-canvas resize-elements -i abc123 --top 25 --bottom 25 --left 25 --right 25

undefined

Read Scene

读取场景

bash

agent-canvas read                # TOON format (compact, ~7% of JSON size)
agent-canvas read --with-style   # Include stroke/bg colors
agent-canvas read --json         # Raw Excalidraw scene JSON

TOON output structure:

shapes[N]{id,type,x,y,w,h,angle,labelId,note}       # rectangle, ellipse, diamond, polygon
lines[N]{id,type,x,y,endX,endY,via,angle,note}      # line, arrow
labels[N]{id,containerId,content,x,y,w,h}           # text bound to shapes (via labelId)
texts[N]{id,content,x,y,w,h,angle,note}              # standalone text elements
groups[N]{id,elementIds}                             # element groupings

```
labelId
```
in shapes links to
```
id
```
in labels
```
via
```
shows intermediate points in same format as
```
--via
```
input (
```
"x1,y1;x2,y2"
```
or
```
null
```
if none)
```
--with-style
```
adds
```
stroke
```
,
```
bg
```
fields
```
--json
```
returns full Excalidraw format (use with
```
jq
```
to query specific elements)

bash

agent-canvas read                # TOON格式（紧凑，约为JSON大小的7%）
agent-canvas read --with-style   # 包含描边/背景颜色
agent-canvas read --json         # 原始Excalidraw场景JSON

TOON输出结构：

shapes[N]{id,type,x,y,w,h,angle,labelId,note}       # rectangle、ellipse、diamond、polygon
lines[N]{id,type,x,y,endX,endY,via,angle,note}      # line、arrow
labels[N]{id,containerId,content,x,y,w,h}           # 绑定到形状的文本（通过labelId关联）
texts[N]{id,content,x,y,w,h,angle,note}              # 独立文本元素
groups[N]{id,elementIds}                             # 元素分组

形状中的
```
labelId
```
关联到标签中的
```
id
```
```
via
```
以与
```
--via
```
输入相同的格式显示中间点（
```
"x1,y1;x2,y2"
```
，无则为
```
null
```
）
```
--with-style
```
参数会添加
```
stroke
```
、
```
bg
```
字段
```
--json
```
返回完整的Excalidraw格式（可与
```
jq
```
配合查询特定元素）

Save, Export and Clear

保存、导出与清空

bash

agent-canvas save file.excalidraw
agent-canvas export -o out.png [--scale 2] [--dark] [--no-background]
agent-canvas clear                # Clear all elements from the canvas

Note: Before running

clear

, ask the user if they want to save or export the current canvas first.

bash

agent-canvas save file.excalidraw
agent-canvas export -o out.png [--scale 2] [--dark] [--no-background]
agent-canvas clear                # 清空画布上的所有元素

注意：执行

clear

前，请询问用户是否要先保存或导出当前画布。

Design Philosophy

设计理念

You are a perfectionist. If it looks slightly off, it IS off. Fix it.

Core principle: Consistency reflects meaning.

Same relationship → Same alignment & spacing
- Elements with the same relationship should share identical alignment
- Gaps between same-level elements should be equal throughout
- Snap to grid (e.g., 10px units) for precision
Same type → Same color & size
- Same-type nodes share identical dimensions
- Same color = same meaning; max 3-4 colors; less is more
- Important elements = larger size
Details matter
- Arrows connect precisely to shape edges
- Review via
```
export
```
  and fix any imperfections

您是完美主义者。只要看起来稍有偏差，就是有问题的。请修正它。

核心原则：一致性反映含义。

相同关系 → 相同对齐方式与间距
- 具有相同关系的元素应采用完全相同的对齐方式
- 同级元素之间的间隙应在整个图表中保持一致
- 对齐到网格（例如10px单位）以保证精度
相同类型 → 相同颜色与尺寸
- 同类型节点使用完全相同的尺寸
- 相同颜色代表相同含义；最多使用3-4种颜色；越少越好
- 重要元素使用更大尺寸
细节至关重要
- 箭头精确连接到形状边缘
- 通过
```
export
```
  导出后检查，修正任何不完美之处

IMPERATIVE GUIDE

操作指南

Coordinates: Origin (0,0) is top-left. X→right, Y→down. Colors in hex (
```
#FF5733
```
) or
```
transparent
```
.
Workflow: Read canvas → Plan layout → Draw shapes → Add arrows/lines(if necessary) → Adjust.
- IMPORTANT: Canvas content is auto-saved to browser localStorage. Always run
```
agent-canvas read
```
  first to check for existing content before drawing.
- If old content exists, ask the user whether to: (a) continue editing, (b) clear and start fresh, or (c) save/export first then clear.
- Shapes define the layout and provide exact coordinates
- Arrow endpoints depend on shape positions — drawing arrows first leads to misalignment
- Adjust: After initial draft, run
```
read
```
  and
```
export
```
  to review. Check against Design Philosophy:
  - Alignment issues? →
```
move-elements
```
    to snap to grid
  - Inconsistent spacing? →
```
move-elements
```
    to equalize gaps
  - Overlapping elements? →
```
move-elements
```
    or
```
delete-elements
```
    and redraw
  - Wrong sizes? →
```
delete-elements
```
    and redraw
  - Misaligned arrows? →
```
delete-elements
```
    and redraw with correct endpoints
  - Container size issue? →
```
resize-elements
```
    to adjust to perfect size
Progressive Canvas Reading:
- ```
read
```
  - Start here. Compact TOON format (~7% of JSON size)
- ```
read --with-style
```
  - Add color info when styling matters
- ```
export -o canvas.png
```
  + view image - For visual/spatial understanding
- ```
read --json | jq '.elements[] | select(.id=="<id>")'
```
  - Query specific element details

Batch Commands: Chain with

&&

for efficiency. DO NOT WRITE BASH COMMENT IN DRAWING COMMANDS

bash

agent-canvas add-shape -t rectangle -x 100 -y 100 -l "A" && \
agent-canvas add-shape -t rectangle -x 300 -y 100 -l "B" && \
agent-canvas add-arrow -x 220 -y 130 --end-x 300 --end-y 130

坐标系统：原点(0,0)位于左上角。X轴向右，Y轴向下。颜色使用十六进制格式（
```
#FF5733
```
）或
```
transparent
```
。
工作流程：读取画布 → 规划布局 → 绘制形状 → 添加箭头/线条（如有需要） → 调整。
- 重要提示：画布内容会自动保存到浏览器localStorage。绘图前务必先执行
```
agent-canvas read
```
  检查现有内容。
- 如果存在旧内容，请询问用户选择：(a) 继续编辑，(b) 清空并重新开始，或(c) 先保存/导出再清空。
- 形状定义布局并提供精确坐标
- 箭头端点依赖于形状位置 —— 先绘制箭头会导致错位
- 调整：初稿完成后，执行
```
read
```
  和
```
export
```
  进行检查。对照设计理念：
  - 对齐问题？→ 使用
```
move-elements
```
    对齐到网格
  - 间距不一致？→ 使用
```
move-elements
```
    统一间隙
  - 元素重叠？→ 使用
```
move-elements
```
    或
```
delete-elements
```
    后重绘
  - 尺寸错误？→ 使用
```
delete-elements
```
    后重绘
  - 箭头错位？→ 使用
```
delete-elements
```
    后用正确端点重绘
  - 容器尺寸问题？→ 使用
```
resize-elements
```
    调整到完美尺寸
渐进式画布读取：
- ```
read
```
  - 从这里开始。紧凑的TOON格式（约为JSON大小的7%）
- ```
read --with-style
```
  - 当样式重要时添加颜色信息
- ```
export -o canvas.png
```
  + 查看图片 - 用于视觉/空间理解
- ```
read --json | jq '.elements[] | select(.id=="<id>")'
```
  - 查询特定元素详情

批量命令：使用

&&

链式执行以提高效率。请勿在绘图命令中添加BASH注释

bash

agent-canvas add-shape -t rectangle -x 100 -y 100 -l "A" && \
agent-canvas add-shape -t rectangle -x 300 -y 100 -l "B" && \
agent-canvas add-arrow -x 220 -y 130 --end-x 300 --end-y 130

Drawing Tutorials

绘图教程

Before drawing, identify the diagram type and check for tutorials:

Determine what type of diagram the user wants (flowchart, architecture, mindmap, UI mockup, etc.)
Read references/REFERENCE.md — this is the tutorial index listing all available diagram tutorials
If a matching tutorial exists: Read the specific tutorial FIRST before drawing — tutorials contain type-specific rules, layout patterns, and best practices
Apply the tutorial guidelines while drawing

绘图前，请确定图表类型并查阅教程：

确定用户需要的图表类型（流程图、架构图、思维导图、UI原型等）
阅读references/REFERENCE.md —— 这是教程索引，列出了所有可用的图表教程
如果有匹配的教程：绘图前先阅读特定教程 —— 教程包含类型特定的规则、布局模式和最佳实践
绘图时遵循教程指南