Back to Skills

diagramming

verified

Generate Excalidraw diagrams. Use when creating flowcharts, ER diagrams, sequence diagrams, block diagrams, or any .excalidraw files.

View on GitHub

Marketplace

tenzir

tenzir/claude-plugins

Plugin

excalidraw

Repository
Verified Org

tenzir/claude-plugins
2stars

plugins/excalidraw/skills/diagramming/SKILL.md

Last Verified

January 22, 2026

Install Skill

Select agents to install to:

Scope:
npx add-skill https://github.com/tenzir/claude-plugins/blob/main/plugins/excalidraw/skills/diagramming/SKILL.md -a claude-code --skill diagramming

Installation paths:

Claude
.claude/skills/diagramming/
Powered by add-skill CLI

Instructions

# Diagramming with Excalidraw

Generate valid `.excalidraw` JSON files.

## File Format

```json
{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [],
  "appState": {
    "viewBackgroundColor": "#ffffff"
  },
  "files": {}
}
```

| Field      | Type   | Description                           |
| ---------- | ------ | ------------------------------------- |
| `type`     | string | Always `"excalidraw"`                 |
| `version`  | number | Schema version (currently `2`)        |
| `source`   | string | Origin URL                            |
| `elements` | array  | All diagram elements                  |
| `appState` | object | Canvas settings (background, etc.)    |
| `files`    | object | Binary files keyed by fileId (images) |

## Workflow

1. **Plan** - Choose diagram type, layout, colors
2. **Generate** - Create elements with proper structure
3. **Validate** - Check bindings and structure before writing

## Validation Checklist

Before writing a diagram, verify:

### Bindings

- Arrows connecting shapes have both `startBinding` and `endBinding` set
- Arrow `x,y` sits at the source shape's edge, not floating in space
- Shapes list connected arrows in their `boundElements` (bidirectional)
- Text labels have `containerId` pointing to their container
- Containers have `boundElements` referencing their text

### Polygons

- Polygon labels use `groupIds` (not `containerId`)
- Text positioned manually at polygon center
- **Polygons cannot have arrow bindings** - bind to grouped text label instead
- Polygon's `boundElements` must be `null`

### Layout

- Elements don't overlap unexpectedly
- Arrows route around shapes, not through them
- Minimum 40px between sibling elements
- All IDs are unique
- Label text matches actual names (verify spelling)

### Text

- Use standard font sizes: S (16), M (20), L (28), XL (36)
- Bound text: set `containerId`, `textAlign: "center"`, `verticalAlign: "middle"`
- Position bound text at con

Validation Details

Front Matter
Required Fields
Valid Name Format
Valid Description
Has Sections
Allowed Tools
Instruction Length:
3202 chars