Drawbridge — скилл

---
name: drawbridge
description: |
  Generate Excalidraw diagrams with a hand-drawn aesthetic using Drawbridge.
  Use when user asks for: flowcharts, dependency diagrams, project visualization,
  task maps, or "make a diagram of this". Pushes elements to a live Excalidraw
  canvas via HTTP API, or renders to PNG/SVG.
---

# Drawbridge Diagram Skill

Generate hand-drawn style diagrams as Excalidraw JSON. Uses the simplified element format with `convertToExcalidrawElements` handling all the heavy lifting (text measurement, container binding, arrow routing).

## Element Format (Simplified)

Only specify what matters. `convertToExcalidrawElements` fills in all required internal properties (groupIds, frameId, seeds, versions, etc.).

### Required Fields (all elements)
`type`, `id` (unique string), `x`, `y`

### Defaults (skip these)
strokeColor="#1e1e1e", backgroundColor="transparent", fillStyle="solid", strokeWidth=2, roughness=1, opacity=100

### Labeled Shapes (PREFERRED)

Add `label` to any shape for auto-centered text. No separate text elements needed:

```json
{ "type": "rectangle", "id": "r1", "x": 100, "y": 100, "width": 200, "height": 80,
  "roundness": { "type": 3 }, "backgroundColor": "#a5d8ff", "fillStyle": "solid",
  "label": { "text": "API Server", "fontSize": 20 } }
```

- Works on rectangle, ellipse, diamond
- Text auto-centers and container auto-resizes to fit
- Always include `"roundness": { "type": 3 }` for rounded corners

### Standalone Text (titles, annotations only)

```json
{ "type": "text", "id": "t1", "x": 150, "y": 50, "text": "System Architecture", "fontSize": 28 }
```

- `x` is the LEFT edge of the text
- To center text at position cx: `x = cx - (text.length * fontSize * 0.5) / 2`
- `textAlign` does NOT control horizontal position — it only affects multi-line wrapping

### Arrows

```json