菜单
Create Excalidraw diagram JSON files that make visual arguments. Use when the user wants to visualize workflows, architectures, or concepts.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Use when the user wants to file GitHub issues from a planning document, build spec, brainstorm output, or any structured source. Triggers include "create issues for this spec", "file these as issues", "seed this project on GitHub", "break this plan into issues". Drives issue creation only — sets titles, bodies, acceptance criteria, labels, and parent/sub-issue hierarchy. Does NOT implement, does NOT open PRs, does NOT pick what to work on next.
Use when the user provides a GitHub issue number or URL and asks to implement it end-to-end. Triggers include "implement issue
Use when running as the dispatch recommender for a single GitHub repo. Triggers when invoked by middle-management with a state issue number and rate-limit context. The recommender's sole job is to rewrite the state issue body with a ranked dispatch plan and a needs-human digest, conforming to the agent-queue state issue schema. NEVER writes code, NEVER modifies non-state issues, NEVER opens PRs. If asked for anything other than a recommender run, decline and state this skill is recommender-only.
Use when filing or auditing GitHub issues to check their acceptance criteria demand integration into the running product, not just green unit tests. Defines the integration rubric and drives `mm audit-issues`. Triggers include "audit these issues", "do the acceptance criteria hold up", "harden this issue's requirements", and the second pass inside creating-github-issues. Suggests rewrites; does NOT implement, does NOT silently edit issues.
Use when writing or revising any documentation in this repo — README, docs/ guides, TSDoc on public exports, module-index frontmatter, per-folder CLAUDE.md, or prose the Docs-harvester bot generates. Enforces Diátaxis (every doc is exactly one of tutorial / how-to / reference / explanation), the repo's voice (Google + Microsoft style guides), an LLM-ism blocklist, and the accuracy rule that code samples come from working source. Triggers include "write docs for X", "document this package", "audit the docs", "fix the README", "add a how-to". Authoring + audit only — does NOT change code behavior, does NOT open PRs.
| name | excalidraw-diagram |
| description | Create Excalidraw diagram JSON files that make visual arguments. Use when the user wants to visualize workflows, architectures, or concepts. |
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.
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.
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.
Omit meaningless bookends. Do NOT add terminal "start" and "end" nodes — the rounded ( start ) / ( end ) circles, or context-only labels like render, canvas, Sprite atlas, input, output, user, done. The reader already knows the surrounding context; these nodes carry no information, waste space, and pad the diagram's footprint. Begin the diagram at the first node that actually does something and end it at the last meaningful step. A pipeline starts at its first real stage and ends at its last real stage — not at a decorative terminal. (Genuine intermediate artifacts that the pipeline transforms — a buffer, a render target, a distance field — are real nodes and stay; the rule is specifically about content-free entry/exit terminals.)
Before designing, determine what level of detail this diagram needs:
Use abstract shapes when:
Use concrete examples when:
For technical diagrams, you MUST include evidence artifacts (see below).
Before drawing anything technical, research the actual specifications.
If you're diagramming a protocol, API, or framework:
Bad: "Protocol" → "Frontend" Good: "AG-UI streams events (RUN_STARTED, STATE_DELTA, A2UI_UPDATE)" → "CopilotKit renders via createA2UIMessageRenderer()"
Research makes diagrams accurate AND educational.
Evidence artifacts are concrete examples that prove your diagram is accurate and help viewers learn. Include them in technical diagrams.
Types of evidence artifacts (choose what's relevant to your diagram):
| Artifact Type | When to Use | How to Render |
|---|---|---|
| Code snippets | APIs, integrations, implementation details | Dark rectangle + syntax-colored text (see color palette for evidence artifact colors) |
| Data/JSON examples | Data formats, schemas, payloads | Dark rectangle + colored text (see color palette) |
| Event/step sequences | Protocols, workflows, lifecycles | Timeline pattern (line + dots + labels) |
| UI mockups | Showing actual output/results | Nested rectangles mimicking real UI |
| Real input content | Showing what goes IN to a system | Rectangle with sample content visible |
| API/method names | Real function calls, endpoints | Use actual names from docs, not placeholders |
Example: For a diagram about a streaming protocol, you might show:
Example: For a diagram about a data transformation pipeline:
The key principle: show what things actually look like, not just what they're called.
Comprehensive diagrams operate at multiple zoom levels simultaneously. Think of it like a map that shows both the country borders AND the street names.
A simplified overview showing the full pipeline or process at a glance. Often placed at the top or bottom of the diagram.
Example: Input → Processing → Output or Client → Server → Database
Labeled regions that group related components. These create visual "rooms" that help viewers understand what belongs together.
Example: Grouping by responsibility (Backend / Frontend), by phase (Setup / Execution / Cleanup), or by team (User / System / External)
Evidence artifacts, code snippets, and concrete examples within each section. This is where the educational value lives.
Example: Inside a "Backend" section, you might show the actual API response format, not just a box labeled "API Response"
For comprehensive diagrams, aim to include all three levels. The summary gives context, the sections organize, and the details teach.
| Bad (Displaying) | Good (Arguing) |
|---|---|
| 5 equal boxes with labels | Each concept has a shape that mirrors its behavior |
| Card grid layout | Visual structure matches conceptual structure |
| Icons decorating text | Shapes that ARE the meaning |
| Same container for everything | Distinct visual vocabulary per concept |
| Everything in a box | Free-floating text with selective containers |
| Simple Diagram | Comprehensive Diagram |
|---|---|
| Generic labels: "Input" → "Process" → "Output" | Specific: shows what the input/output actually looks like |
| Named boxes: "API", "Database", "Client" | Named boxes + examples of actual requests/responses |
| "Events" or "Messages" label | Timeline with real event/message names from the spec |
| "UI" or "Dashboard" rectangle | Mockup showing actual UI elements and content |
| ~30 seconds to explain | ~2-3 minutes of teaching content |
| Viewer learns the structure | Viewer learns the structure AND the details |
Simple diagrams are fine for abstract concepts, quick overviews, or when the audience already knows the details. Comprehensive diagrams are needed for technical architectures, tutorials, educational content, or when you want the diagram itself to teach.
Not every piece of text needs a shape around it. Default to free-floating text. Add containers only when they serve a purpose.
| Use a Container When... | Use Free-Floating Text When... |
|---|---|
| It's the focal point of a section | It's a label or description |
| It needs visual grouping with other elements | It's supporting detail or metadata |
| Arrows need to connect to it | It describes something nearby |
| The shape itself carries meaning (decision diamond, etc.) | Typography alone creates sufficient hierarchy |
| It represents a distinct "thing" in the system | It's a section title, subtitle, or annotation |
Typography as hierarchy: Use font size, weight, and color to create visual hierarchy without boxes. A 28px title doesn't need a rectangle around it.
The container test: For each boxed element, ask "Would this work as free-floating text?" If yes, remove the container.
Before anything else, determine if this needs to be:
If comprehensive: Do research first. Look up actual specs, formats, event names, APIs.
Read the content. For each concept, ask:
For each concept, find the visual pattern that mirrors its behavior:
| If the concept... | Use this pattern |
|---|---|
| Spawns multiple outputs | Fan-out (radial arrows from center) |
| Combines inputs into one | Convergence (funnel, arrows merging) |
| Has hierarchy/nesting | Tree (lines + free-floating text) |
| Is a sequence of steps | Timeline (line + dots + free-floating labels) |
| Loops or improves continuously | Spiral/Cycle (arrow returning to start) |
| Is an abstract state or context | Cloud (overlapping ellipses) |
| Transforms input to output | Assembly line (before → process → after) |
| Compares two things | Side-by-side (parallel with contrast) |
| Separates into phases | Gap/Break (visual separation between sections) |
For multi-concept diagrams: each major concept must use a different visual pattern. No uniform cards or grids.
Before JSON, mentally trace how the eye moves through the diagram. There should be a clear visual story.
Only now create the Excalidraw elements. See below for how to handle large diagrams.
After generating the JSON, you MUST run the render-view-fix loop until the diagram looks right. This is not optional — see the Render & Validate section below for the full process.
For comprehensive or technical diagrams, you MUST build the JSON one section at a time. Do NOT attempt to generate the entire file in a single pass. This is a hard constraint — Claude Code has a ~32,000 token output limit per response, and a comprehensive diagram easily exceeds that in one shot. Even if it didn't, generating everything at once leads to worse quality. Section-by-section is better in every way.
Phase 1: Build each section
type, version, appState, files) and the first section of elements."trigger_rect", "arrow_fan_left") so cross-section references are readable.boundElements array at the same time.Phase 2: Review the whole
After all sections are in place, read through the complete JSON and check:
Fix any alignment or binding issues before rendering.
Phase 3: Render & validate
Now run the render-view-fix loop from the Render & Validate section. This is where you'll catch visual issues that aren't obvious from JSON — overlaps, clipping, imbalanced composition.
Plan your sections around natural visual groupings from the diagram plan. A typical large diagram might split into:
Each section should be independently understandable: its elements, internal arrows, and any cross-references to adjacent sections.
Central element with arrows radiating to multiple targets. Use for: sources, PRDs, root causes, central hubs.
○
↗
□ → ○
↘
○
Multiple inputs merging through arrows to single output. Use for: aggregation, funnels, synthesis.
○ ↘
○ → □
○ ↗
Parent-child branching with connecting lines and free-floating text (no boxes needed). Use for: file systems, org charts, taxonomies.
label
├── label
│ ├── label
│ └── label
└── label
Use line elements for the trunk and branches, free-floating text for labels.
Elements in sequence with arrow returning to start. Use for: feedback loops, iterative processes, evolution.
□ → □
↑ ↓
□ ← □
Overlapping ellipses with varied sizes. Use for: context, memory, conversations, mental states.
Input → Process Box → Output with clear before/after. Use for: transformations, processing, conversion.
○○○ → [PROCESS] → □□□
chaos order
Two parallel structures with visual contrast. Use for: before/after, options, trade-offs.
Visual whitespace or barrier between sections. Use for: phase changes, context resets, boundaries.
Use lines (type: line, not arrows) as primary structural elements instead of boxes:
Timeline: Tree:
●─── Label 1 │
│ ├── item
●─── Label 2 │ ├── sub
│ │ └── sub
●─── Label 3 └── item
Lines + free-floating text often creates a cleaner result than boxes + contained text.
Choose shape based on what it represents—or use no shape at all:
| Concept Type | Shape | Why |
|---|---|---|
| Labels, descriptions, details | none (free-floating text) | Typography creates hierarchy |
| Section titles, annotations | none (free-floating text) | Font size/weight is enough |
| Markers on a timeline | small ellipse (10-20px) | Visual anchor, not container |
| Start, trigger, input | ellipse | Soft, origin-like |
| End, output, result | ellipse | Completion, destination |
| Decision, condition | diamond | Classic decision symbol |
| Process, action, step | rectangle | Contained action |
| Abstract state, context | overlapping ellipse | Fuzzy, cloud-like |
| Hierarchy node | lines + text (no boxes) | Structure through lines |
Rule: Default to no container. Add shapes only when they carry meaning. Aim for <30% of text elements to be inside containers.
Colors encode information, not decoration. Every color choice should come from references/color-palette.md — the semantic shape colors, text hierarchy colors, and evidence artifact colors are all defined there.
Key principles:
Do not invent new colors. If a concept doesn't fit an existing semantic category, use Primary/Neutral or Secondary.
For clean, professional diagrams:
roughness: 0 — Clean, crisp edges. Use for modern/technical diagrams.roughness: 1 — Hand-drawn, organic feel. Use for brainstorming/informal diagrams.Default to 0 for most professional use cases.
strokeWidth: 1 — Thin, elegant. Good for lines, dividers, subtle connections.strokeWidth: 2 — Standard. Good for shapes and primary arrows.strokeWidth: 3 — Bold. Use sparingly for emphasis (main flow line, key connections).Always use opacity: 100 for all elements. Use color, size, and stroke width to create hierarchy instead of transparency.
Instead of full shapes, use small dots (10-20px ellipses) as:
The most important element has the most empty space around it (200px+).
Guide the eye: typically left→right or top→bottom for sequences, radial for hub-and-spoke.
Position alone doesn't show relationships. If A relates to B, there must be an arrow.
CRITICAL: The JSON text property contains ONLY readable words.
{
"id": "myElement1",
"text": "Start",
"originalText": "Start"
}
Settings: fontSize: 16, fontFamily: 3, textAlign: "center", verticalAlign: "middle"
{
"type": "excalidraw",
"version": 2,
"source": "https://excalidraw.com",
"elements": [...],
"appState": {
"viewBackgroundColor": "#ffffff",
"gridSize": 20
},
"files": {}
}
See references/element-templates.md for copy-paste JSON templates for each element type (text, line, dot, rectangle, arrow). Pull colors from references/color-palette.md based on each element's semantic purpose.
The single biggest cause of broken diagrams — labels overrunning their box, text clipping at the diagram edge, labels sitting on top of shapes — is free-floating text. When a piece of text belongs inside a shape (a node, a cell, a titled box), make it bound text on that shape. Do not position a separate label on top of the shape.
Why this is the difference between first-try success and an endless overflow-fix loop:
width makes the text spill past the diagram's own viewBox and clip on the page.How to bind text to a shape:
containerId: "<shape-id>".boundElements: "boundElements": [{ "id": "<text-id>", "type": "text" }].textAlign (left/center) and verticalAlign (top/middle) on the text.Excalidraw then wraps the text to container.width − 10 and reflows the container height. Size the container to the content you want; let wrapping do the rest — never reverse-engineer the text width.
// container — sized to taste; height will grow to fit the wrapped text
{ "id": "cellSys", "type": "rectangle", "x": 100, "y": 100, "width": 220, "height": 70,
"boundElements": [{ "id": "cellSys-label", "type": "text" }] }
// bound label — wraps inside cellSys automatically, no manual newlines
{ "id": "cellSys-label", "type": "text", "containerId": "cellSys",
"text": "instanceSystem vec4 — floats 8..11 — flipX, flipY, sysFlags, enableBits",
"fontSize": 14, "textAlign": "center", "verticalAlign": "middle" }
When free-floating text is acceptable: true open-space annotations — the diagram title, a section header, a caption in genuinely empty space. Even then, keep them short and single-purpose, and over-declare their width by ~15–20% so a metric mis-guess never clips them. A finished diagram is mostly bound text with a handful of free labels — not the inverse. If you find yourself authoring dozens of positioned labels, stop and bind them to the shapes they belong to.
Heuristic: if a label's center sits inside a box, it should almost certainly be bound to that box.
The render pipeline forces ALL text to JetBrains Mono (references/diagram-font.woff2) for layout, and rewrites the exported SVG to reference JetBrains Mono — because the docs page renders inlined-SVG text in JetBrains Mono regardless of Excalidraw's own font. If the diagram were laid out in Excalidraw's default (narrower) font, the wider docs font would overflow every baked label position on the page. You don't configure this per diagram — it's automatic — but know that all text is monospace JetBrains Mono, so size boxes and estimate widths accordingly (mono ≈ 0.6em per character). To retarget another project's font, replace references/diagram-font.woff2 and the family name in render_excalidraw.py's rewrite_fonts + render_template.html's swapInDocsFont.
You cannot judge a diagram from JSON alone. After generating or editing the Excalidraw JSON, you MUST render it to PNG, view the image, and fix what you see — in a loop until it's right. This is a core part of the workflow, not a final check.
Validate as you go, not just at the end. After you finish each major section or cluster, render and lint it. Catching a sizing/overflow problem in one section is cheap; discovering ten of them after the whole diagram is laid out is not.
cd .claude/skills/excalidraw-diagram/references && uv run python render_excalidraw.py <path-to-file.excalidraw>
This outputs a PNG next to the .excalidraw file. Then use the Read tool on the PNG to actually view it.
Flags:
--svg --output <path>.svg — emit embeddable SVG markup (self-contained: baked background + embedded fonts) instead of a PNG raster. Use this for the final deliverable when the diagram is embedded in a web page.--strict — exit non-zero (3) if the automatic overflow lint (below) finds any spill. Use it as a hard gate in a fix loop: keep rendering until the command exits 0.Every render runs a geometric overflow check and prints to stderr any bound text (text with a containerId) whose measured size spills outside its container box:
⚠ TEXT OVERFLOW: 1 text element(s) spill outside their container:
- 'instanceSystem vec4 floats 8..11 · flipX, …' (+62px horizontal)
Fix: widen/raise the container box, lower fontSize, or split the label across lines.
This catches the most common defects and is genuinely easy to miss by eye, so do not rely on visual inspection alone for it. The check has several parts:
width/height. A free label with a too-small declared width renders past its box and can clip at the export bound, so these are checked too.Treat any ⚠ TEXT OVERFLOW line as a must-fix. Fix order matters: first try splitting the label across more lines, then shortening/truncating it (an ellipsis is fine). Widening the box is a last resort — it bloats the diagram's overall footprint, and a diagram that keeps growing wider to fit text is a design smell. Keep an eye on total width: prefer wrapping tall over sprawling wide. Re-render until the warning is gone (or --strict exits 0).
After generating the initial JSON, run this cycle:
1. Render & View — Run the render script, then Read the PNG.
2. Audit against your original vision — Before looking for bugs, compare the rendered result to what you designed in Steps 1-4. Ask:
3. Check for visual defects:
4. Fix — Edit the JSON to address everything you found. Common fixes:
x/y coordinates to fix spacing and alignmentpoints arrays to route around elements5. Re-render & re-view — Run the render script again and Read the new PNG.
6. Repeat — Keep cycling until the diagram passes both the vision check (Step 2) and the defect check (Step 3). Typically takes 2-4 iterations. Don't stop after one pass just because there are no critical bugs — if the composition could be better, improve it.
Do not report a diagram as finished until every item passes. This is a hard gate, not a suggestion:
uv run python render_excalidraw.py <file> --strict exits 0. If it prints any ⚠ TEXT OVERFLOW, you are not done — fix and re-run.Only when all five pass do you export the SVG and report done. If you cannot honestly check item 3 or 4, say so rather than claiming success.
The loop is done when the self-validation gate above passes AND:
If the render script hasn't been set up yet:
cd .claude/skills/excalidraw-diagram/references
uv sync
uv run playwright install chromium
text contains only readable wordsfontFamily: 3roughness: 0 for clean/modern (unless hand-drawn style requested)opacity: 100 for all elements (no transparency)