Excalidraw Diagram Skill

Установка

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

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Скилл генерирует JSON-файлы Excalidraw, где форма элементов отражает смысл: веер для связи один ко многим, таймлайн для последовательности. В технические схемы добавляются реальные фрагменты кода и JSON. Встроенный рендер на Playwright позволяет агенту увидеть результат, найти наложения и перекосы и исправить их до выдачи. Цвета и стиль бренда задаются в одном файле references/color-palette.md.

Для кого. Разработчики и авторы технического контента, которым нужны наглядные схемы процессов и архитектуры.

Пример запроса к агенту

Создай диаграмму Excalidraw, как протокол AG-UI передает события от агента во фронтенд

Ограничения

Для визуальной проверки нужно настроить рендер: uv sync и установка Chromium через Playwright. Установка только ручная, копированием в .claude/skills.

Как отключить. Удалите папку .claude/skills/excalidraw-diagram.

Проверка безопасности

• Рендер запускает Python-скрипт и браузер Chromium

Коротко о README

Короткий README о скилле для диаграмм Excalidraw, совместимом с агентами, которые читают .claude/skills, например Claude Code и OpenCode. Описаны установка копированием, два варианта настройки рендера и пример запроса. Приведена структура файлов со справочниками по шаблонам элементов и схеме JSON.

SKILL.md

---
name: excalidraw-diagram
description: Create Excalidraw diagram JSON files that make visual arguments. Use when the user wants to visualize workflows, architectures, or concepts.
---

# Excalidraw Diagram Creator

Generate `.excalidraw` JSON files that **argue visually**, not just display information.

**Setup:** If the user asks you to set up this skill (renderer, dependencies, etc.), see `README.md` for instructions.

## Customization

**All colors and brand-specific styles live in one file:** `references/color-palette.md`. Read it before generating any diagram and use it as the single source of truth for all color choices — shape fills, strokes, text colors, evidence artifact backgrounds, everything.

To make this skill produce diagrams in your own brand style, edit `color-palette.md`. Everything else in this file is universal design methodology and Excalidraw best practices.

---

## Core Philosophy

**Diagrams should ARGUE, not DISPLAY.**

A diagram isn't formatted text. It's a visual argument that shows relationships, causality, and flow that words alone can't express. The shape should BE the meaning.

**The Isomorphism Test**: If you removed all text, would the structure alone communicate the concept? If not, redesign.

**The Education Test**: Could someone learn something concrete from this diagram, or does it just label boxes? A good diagram teaches—it shows actual formats, real event names, concrete examples.

---

## Depth Assessment (Do This First)

Before designing, determine what level of detail this diagram needs:

### Simple/Conceptual Diagrams
Use abstract shapes when:
- Explaining a mental model or philosophy
- The audience doesn't need technical specifics
- The concept IS the abstraction (e.g., "separation of concerns")

### Comprehensive/Technical Diagrams
Use concrete examples when:
- Diagramming a real system, protocol, or architecture
- The diagram will be used to teach or explain (e.g., YouTube video)
- The audience needs to understand what things actually look like
- You're showing how multiple technologies integrate

**For technical diagrams, you MUST include evidence artifacts** (see below).

---

## Research Mandate (For Technical Diagrams)

**Before drawing anything technical, research the actual specifications.**

If you're diagramming a protocol, API, or framework:
1. Look up the actual JSON/data formats
2. Find the real event names, method names, or API endpoints
3. Understand how the pieces actually connect

Похожие