mcpField
E
excalidraw

excalidraw

github.com/softaworks设计与 UI2.6k794 次安装34 周前更新
代码仓库

关于 excalidraw

指导 Agent 将 Excalidraw 图表任务交给子 Agent 处理,避免在主上下文加载图表 JSON。涵盖提取、创建、修改和比较,并要求返回简洁的文本摘要。

主要功能

  1. 01委派所有 Excalidraw 文件任务
  2. 02提取标签与关系
  3. 03创建和修改图表
  4. 04比较图表结构
  5. 05返回纯文本摘要

适用场景

  1. 01解释架构图
  2. 02添加组件及其连接
  3. 03根据描述创建流程图
  4. 04比较两种图表设计

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/softaworks/agent-toolkit --skill excalidraw

安装后在 Claude Code 中输入/excalidraw确认已加载。

附带文件README.md

详细介绍

Excalidraw 子 Agent 委派

概述

核心原则: 主 Agent 绝不直接读取 Excalidraw 文件。始终委派给子 Agent,以隔离上下文消耗。

Excalidraw 文件是 JSON,token 成本高但信息密度低。单个文件范围为 4k-22k token(最大的可能超出读取工具限制)。读取多个图表会迅速耗尽上下文预算(7 个文件 = 67k token = 预算的 33%)。

问题所在

Excalidraw JSON 结构:

  • 每个形状有 20+ 个属性(x、y、width、height、strokeColor、seed、version 等)
  • 大多数属性是视觉元数据(定位、样式、粗糙度)
  • 实际内容:文本标签和元素关系(<文件的 10%)
  • 信噪比极低

示例:14 个元素的图表 = 596 行,16K,约 4k token。79 个元素的图表 = 2,916 行,88K,约 22k token(超出读取限制)。

何时使用

以下任一情况即触发:

  • 文件路径包含 .excalidraw 或 .excalidraw.json
  • 用户请求:“解释/更新/创建图表”、“展示架构”、“可视化流程”
  • 用户提及:“流程图”、“架构图”、“Excalidraw 文件”
  • 涉及视觉产物的架构/设计文档任务

即使对于以下情况也要使用委派:

  • “小”文件(最小的也有 4k token —— 仍然可观)
  • “快速检查”(检查组件名称仍会加载完整 JSON)
  • 单个文件操作(隔离可防止上下文污染)
  • 修改(无需在主上下文中理解完整格式)

委派模式

主 Agent 职责

绝不:

  • ❌ 对 *.excalidraw 文件使用 Read 工具
  • ❌ 在主上下文中解析 Excalidraw JSON
  • ❌ 加载多个图表进行比较
  • ❌ 检查文件以“理解格式”

始终:

  • ✅ 将所有 Excalidraw 操作委派给子 Agent
  • ✅ 向子 Agent 提供清晰的任务描述
  • ✅ 请求纯文本摘要(而非原始 JSON)
  • ✅ 将图表分析与主工作隔离
子 Agent 任务模板
读取/理解操作
Task: Extract and explain the components in [file.excalidraw.json]

Approach:
1. Read the Excalidraw JSON
2. Extract only text elements (ignore positioning/styling)
3. Identify relationships between components
4. Summarize architecture/flow

Return:
- List of components/services with descriptions
- Connection/dependency relationships
- Key insights about the architecture
- DO NOT return raw JSON or verbose element details
修改操作
Task: Add [component] to [file.excalidraw.json], connected to [existing-component]

Approach:
1. Read file to identify existing elements
2. Find [existing-component] and its position
3. Create new element JSON for [component]
4. Add arrow elements for connections
5. Write updated file

Return:
- Confirmation of changes made
- Position of new element
- IDs of created elements
创建操作
Task: Create new Excalidraw diagram showing [description]

Approach:
1. Design layout for [number] components
2. Create rectangle elements with text labels
3. Add arrows showing relationships
4. Use consistent styling (colors, fonts)
5. Write to [file.excalidraw.json]

Return:
- Confirmation of file created
- Summary of components included
- File location
比较操作
Task: Compare architecture approaches in [file1] vs [file2]

Approach:
1. Read both files
2. Extract text labels from each
3. Identify structural differences
4. Compare component relationships

Return:
- Key differences in architecture
- Components unique to each approach
- Relationship/flow differences
- DO NOT return full element details from both files

常见合理化借口(停下来,改为委派)

借口现实该怎么做
“直接读取最高效”不必要地消耗 4k-22k token委派给子 Agent
“直接读取更省 token”基线测试显示使用 9-45% 预算始终委派
“这对一次性分析是最优的”“一次性”仍会污染主上下文子 Agent 隔离
“JSON 很直白”简单 ≠ token 高效无论如何都要委派
“我需要理解格式”主 Agent 不需要理解格式子 Agent 处理格式
“在合理范围内”(18k token)“合理”是主观的合理化借口硬性规则:委派
“只是快速检查组件”“快速检查”仍会加载完整 JSON通过子 Agent 提取文本
“文件很小(16K)”4k token 并不算小大小阈值无关紧要

危险信号 —— 停下来并委派

发现你自己即将:

  • 对 .excalidraw 文件使用 Read 工具
  • “快速检查”存在哪些组件
  • 在修改前“理解结构”
  • 加载文件以“看看里面有什么”
  • 并排比较多个图表
  • 解析 JSON 以“只提取文本”

所有这些都意味着:改用带子 Agent 的 Task 工具。

快速参考

操作主 Agent 动作子 Agent 返回
理解图表用“提取并解释”模板委派组件列表 + 关系
修改图表用“添加连接到 [Y] 的 [X]”模板委派确认 + 所做更改
创建图表用“创建展示 [描述] 的图表”模板委派文件位置 + 摘要
比较图表用“比较 [A] 与 [B]”模板委派关键差异(而非原始 JSON)

Token 分析(为什么这很重要)

基线测试的真实数据:

场景不委托委托节省
单个大文件22k tokens(45% 预算)~500 tokens(子 Agent 摘要)98%
双文件对比18k tokens(9% 预算)~800 tokens(diff 摘要)96%
修改任务14k tokens(7% 预算)~300 tokens(确认)98%

上下文污染的影响:

  • 阅读全部 7 个项目图表:67k tokens(200k 预算的 33%)
  • 委托后:~2k tokens(隔离在子 Agent 中)
  • 节省:保留了 97% 的上下文预算

实现示例

❌ 错误(直接读取):

User: "What architecture is shown in detailed-architecture.excalidraw.json?"
Agent: Let me read that file... [reads 22k tokens into main context]

✅ 正确(子 Agent 委托):

User: "What architecture is shown in detailed-architecture.excalidraw.json?"
Agent: I'll use a subagent to extract the architecture details.

[Dispatches Task tool with general-purpose subagent]
Task: Extract and explain components in .ryanquinn3/ticketing/detailed-architecture.excalidraw.json

[Receives ~500 token summary with component list and relationships]
[Responds to user with architecture explanation, main context preserved]

为什么“直白的 JSON”并不重要

Agent 常常自我辩解:“格式很简单,我直接读就行。”

问题不在于复杂度,而在于冗长程度:

  • 简单结构,每个元素却有 20+ 个属性
  • 重复的元数据(seed、version、nonce、roughness)
  • 定位数据(x、y、width、height)在语义上没有用处
  • 视觉样式(strokeColor、opacity、fillStyle)与内容无关

Token 成本来自数据量,而不是复杂度。

即使是“直白”的 JSON 也会消耗 4k-22k tokens,因为:

  • 79 个元素 × 每个元素约 280 tokens = 22k tokens
  • 大部分 token 都是元数据噪声
  • 只有文本标签和关系才重要(约占内容的 10%)

铁律

主 Agent 绝不读取 Excalidraw 文件。没有例外。

不适用于:

  • “快速检查”
  • “小文件”
  • “理解格式”
  • “一次性分析”
  • “最优效率”

始终委托。通过子 Agent 实现隔离是零成本的。

评论

支持 Markdown