精选案例 · Agent / 实践案例

Excalidraw Diagram Skill

这个案例围绕「Excalidraw Diagram Skill」记录了一条真实 AI 实践线索，正文重点集中在「What Makes This Different」「Installation」，适合先按任务意图阅读再判断复用。

案例速读

README 标题「Excalidraw Diagram Skill」下已经出现运行/配置路径、脚本或接口线索，正文重点集中在「What Makes This Different」「Installation」，比纯概念介绍更适合进入精选阅读流。这篇案例的阅读价值在于，它把真实任务、模型辅助过程和可迁移做法放在同一个上下文里，读者可以从「Excalidraw Diagram Skill」、「What Makes This Different」、「Installation」、「Setup」进入正文。

建议重点看可参考其中的运行与配置路径、包含可迁移的命令、脚本或接口线索、继续补充结果证据后推荐度会更高。结合 Agent / 实践案例和「任务驱动用户、AI 实践者」这一受众定位，它更适合作为任务检索后的精读材料，而不是只看一句短摘要后快速跳过。
正文目录和原始材料仍然是判断依据；导读只帮助你更快定位阅读重点。

看点: Excalidraw Diagram Skill
读者: 任务驱动用户、AI 实践者
复用: 可参考其中的运行与配置路径
结构: 7 个目录入口

原文内容

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)

返回顶部