词元星图TokenAtlas
返回技能库

精选 Skill · Agent 自动化 / 工程接入与部署

Excalidraw 图解生成 Skill 实践

标题由系统整理

作者： Liushenwuzhu-Alpaca

原题：Excalidraw Diagram Skill

该技能为编码代理提供从自然语言描述生成Excalidraw图表的能力。核心特色包括：使用形状隐喻（扇出、时间线、汇聚）进行视觉论证；在技术图表中嵌入真实代码片段和JSON载荷作为证据；基于Playwright的渲染管线实现自动视觉验证，可循环修复布局问题；支持通过单一颜色文件进行品牌自定义。…

Skill 速读

README.md完整说明了技能安装、设置（含两种方式）、使用示例、自定义颜色方法及文件结构。SKILL.md进一步阐述了核心设计哲学（视觉论证而非展示）、深度评估方法（简单/技术图表区分）以及具体的形状构建原则，提供了可操作的指导。技能功能明确，依赖清晰（Playwright），具备实用价值。 建议从 「Excalidraw Diagram Skill」、「What Makes This Different」、「Installation」、「Setup」 进入正文，先确认用途、依赖、触发方式和适用边界。

  • 重点看 可直接集成到支持.claude/skills/的编码代理中、品牌颜色自定义仅需修改单一文件references/color-palette.md、自动渲染和视觉验证机制可提升图表质量。结合 Agent 自动化 / 工程接入与部署 / 图表生成 / 视觉论证 和「需要使用Excalidraw进行技术架构可视化的开发者、希望代理自动生成高质量图表的AI代理用户、内容创作者（如YouTube教程作者）需要教学级图表」，它更适合作为接入前的能力说明与复用清单。
  • 正文目录和原始材料仍然是判断依据；导读只帮助你更快定位阅读重点。
先看什么
What Makes This Different
读者
需要使用Excalidraw进行技术架构可视化的开发者、希望代理自动生成高质量图表的AI代理用户、内容创作者（如YouTube教程作者）需要教学级图表
复用
可直接集成到支持.claude/skills/的编码代理中
结构
7 个目录入口

原文内容

中文译文由词元计划内置翻译在构建流程生成，模型：deepseek-v4-flash-ascend

Excalidraw Diagram Skill

A coding agent skill that generates beautiful and practical Excalidraw diagrams from natural language descriptions. Not just boxes-and-arrows - diagrams that argue visually.

Compatible with any coding agent that supports skills. For agents that read from .claude/skills/ (like Claude Code and OpenCode), just drop it in and go.

What Makes This Different

  • Diagrams that argue, not display. Every shape/group of shapes mirrors the concept it represents — fan-outs for one-to-many, timelines for sequences, convergence for aggregation. No uniform card grids.
  • Evidence artifacts. As an example, technical diagrams include real code snippets and actual JSON payloads.
  • Built-in visual validation. A Playwright-based render pipeline lets the agent see its own output, catch layout issues (overlapping text, misaligned arrows, unbalanced spacing), and fix them in a loop before delivering.
  • Brand-customizable. All colors and brand styles live in a single file (references/color-palette.md). Swap it out and every diagram follows your palette.

Installation

Clone or download this repo, then copy it into your project’s .claude/skills/ directory:

git clone https://github.com/coleam00/excalidraw-diagram-skill.git
cp -r excalidraw-diagram-skill .claude/skills/excalidraw-diagram

Setup

The skill includes a render pipeline that lets the agent visually validate its diagrams. There are two ways to set it up:

Option A: Ask your coding agent (easiest)

Just tell your agent: “Set up the Excalidraw diagram skill renderer by following the instructions in SKILL.md.” It will run the commands for you.

Option B: Manual

cd .claude/skills/excalidraw-diagram/references
uv sync
uv run playwright install chromium

Usage

Ask your coding agent to create a diagram:

“Create an Excalidraw diagram showing how the AG-UI protocol streams events from an AI agent to a frontend UI”

The skill handles the rest — concept mapping, layout, JSON generation, rendering, and visual validation.

Customize Colors

Edit references/color-palette.md to match your brand. Everything else in the skill is universal design methodology.

File Structure

excalidraw-diagram/
  SKILL.md                          # Design methodology + workflow
  references/
    color-palette.md                # Brand colors (edit this to customize)
    element-templates.md            # JSON templates for each element type
    json-schema.md                  # Excalidraw JSON format reference
    render_excalidraw.py            # Render .excalidraw to PNG
    render_template.html            # Browser template for rendering
    pyproject.toml                  # Python dependencies (playwright)

返回顶部