mcpField
E
excalidraw

excalidraw

github.com/davila7设计与 UI33.0k804 次安装1 天前更新
代码仓库

关于 excalidraw

excalidraw 是用于处理 Excalidraw 图表的技能,要求 Agent 将读取、编辑、创建和比较任务委派给子 Agent,以文本摘要代替在主上下文中加载图表 JSON。

主要功能

  1. 01将图表操作委派给子 Agent
  2. 02提取文本标签与组件关系
  3. 03支持读取、编辑、创建和比较图表
  4. 04避免原始 JSON 占用主 Agent 上下文

适用场景

  1. 01解释 Excalidraw 文件中的组件与流程
  2. 02为现有图表添加组件和连接
  3. 03根据架构描述创建图表
  4. 04比较两张图表的结构

安装

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

$npx skills add https://github.com/davila7/claude-code-templates --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