excalidraw-diagram-skill README

The project's README from github.com/coleam00/excalidraw-diagram-skill. As one markdown file: README.md.

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

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)

excalidraw-diagram-skill (coleam00/excalidraw-diagram-skill)

Searching Database…

5K ·GitHub
Excalidraw-diagram-skill
这是什么？这是一个技能，让 Claude Code（或任何支持技能的编码代理）能够根据自然语言描述生成 Excalidraw 图表，布局能真正体现概念（扇出、时间线、汇聚），而不是千篇一律的方框。
这是一个独立应用，还是加到我编码代理上的东西？它是一组放进代理技能文件夹的技能文件，不是独立应用。从 .claude/skills/ 读取技能的代理（如 Claude Code 和 OpenCode）会自动识别它。
在代理能渲染图表之前需要配置什么吗？需要，渲染管线需要一次性设置；你可以让编码代理替你运行 SKILL.md 中的设置命令，也可以手动完成。
图表是盲生成出来的，还是代理会检查自己的成果？该技能使用基于 Playwright 的渲染管线，让代理能看到自己的输出，发现文字重叠、箭头错位等问题，并在交付最终图表前循环修复。
实际怎么让它画一张图？你只需用平实的语言描述想要的内容，例如“创建一个 Excalidraw 图表，展示 AG-UI 协议如何把事件从 AI 代理流式传输到前端 UI”，技能会完成概念映射、布局、JSON 生成和渲染。
可以修改图表的颜色和品牌风格吗？可以，所有颜色和品牌样式都集中在一个文件 references/color-palette.md 中，编辑它就会改变该技能产出的每一张图表。
除了形状和箭头还包含什么？图表可以包含真实的代码片段和实际的 JSON 载荷等证据素材，而不只是泛泛的方框。
它只能配合 Claude Code 使用吗？不是，它适用于任何支持技能的编码代理；从 .claude/skills/ 文件夹读取技能的代理（如 Claude Code 和 OpenCode）可以直接使用。
What are similar projects?live-panel-skill, huashu-art-motion, drawio-skill, claude-ads, archify, procedural-film, geo-sleuth, guizang-product-video-skill
Which topics is it in?diagrams-as-code, diagram, claude-code-skill, playwright, opencode, visualization, design, json, skill, agent-skills, agent, claude-code
Creator
coleam00
Size
<0.1 MB
Stars
5K
Updated
CommitMar 01
Age
7mo
Commits · 90 Days