SkillFoxx

Drawbridge skill

A skill plus a local server: Claude Code draws flowcharts and architecture diagrams that appear live on an Excalidraw canvas.

  • 73 ★ on the repository
  • Last commit
Skill

Extended access

Why this level

  • The skill makes the agent send requests to a local HTTP server.
  • API authentication is not documented: an open port would let any network client alter canvases.
All reasons and checks

alexknowshtml/drawbridgeAuthor:alexknowshtml

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/drawbridge

Detects the agents on your machine, shows the access level and pins the version.

Other ways to install

Access and checks

How we review

Extended accessThe tool runs code or makes network calls and only reads external data.

  • The skill makes the agent send requests to a local HTTP server.
  • API authentication is not documented: an open port would let any network client alter canvases.

This is third-party code. Review the repository files before installing.

What it does

Drawbridge is a Claude Code skill and a small diagram server. The agent sends simplified shape descriptions over HTTP, the server relays them over WebSocket to a browser, where Excalidraw turns them into full elements with font loading and text measurement. The diagram grows in front of the user. The skill teaches Claude the element format, a palette with semantic colors, sizing rules and font minimums, a drawing order for streaming, and PNG or SVG export. Sessions are keyed by the page URL hash and changes are kept in a log, so undo, clear and camera control are available through the API.

Who it is for. Developers who ask Claude Code to draw an architecture or dependency map and want to see the result at once, without exporting.

Good fit when

  • You need a process flowchart the agent keeps drawing during the conversation.
  • A multi-tier architecture is shown to a team on a shared canvas.
  • A project dependency map is built and exported to PNG or SVG.
  • A script or agent must publish a diagram over HTTP from a pipeline.

Not a fit when

  • You need a Mermaid or PlantUML diagram, while the server draws on Excalidraw.
  • A local Node.js server cannot be run.
  • A diagram must be produced without a browser and without a human.

Example request

Draw a three-tier web application diagram on Drawbridge and add blocks as you explain.

Limitations

Run the server yourself with `npm install`, `npm run build` and `npm start`: it listens on port 3062 for HTTP and 3061 for WebSocket, and any static server serves the frontend. Images dropped on the canvas do not survive a page reload until DigitalOcean Spaces storage is configured through the `DO_SPACES_*` variables. The API documents no authentication, so keep the port closed to the network. The repository has no license file, so terms of use are not defined.

How to disable. Delete `.claude/skills/drawbridge` from the project and stop the server. Remove the `data` folder with saved sessions separately.

FAQ

How do I add the skill to a project?

Create `.claude/skills/drawbridge` and copy `skills/SKILL.md` from the repository there. Claude then invokes the skill on diagram requests.

How do I open the canvas?

Open `http://localhost:3000/#my-session` after starting the frontend with `npx serve dist`. The part after the hash sets the session ID.

Which requests does the API accept?

`POST /api/session/:id/elements` replaces all elements, `append` adds new ones, `clear` wipes, `undo` reverts the last operation and `viewport` moves the camera.

Are diagrams persisted?

Yes, change history is written to a log in `DRAWBRIDGE_DATA_DIR`, `./data` by default. Images are stored separately and need Spaces configured.

Can the server run in a container?

Yes. `podman-compose up -d` builds and starts the server on port 5050, and a systemd service example covers autostart.

Discussion

No questions or reviews yet.

Skills
Official

Excaliself is a self-hosted Excalidraw whiteboard whose built-in MCP lets agents find, read, create and export drawings.

MCP serverExtended access153

Excalidraw MCP

Excalidraw MCP App Server

Official

MCP server that draws hand-drawn Excalidraw diagrams inside the chat: streaming render, fullscreen editing, export

MCP serverExtended access5.7K

About a hundred skills for Claude Code: meetings, research, publishing, TDD, Telegram, email and personal analytics

PluginBroad access413

A set of Claude Code skills and hooks: brainstorming, worker-led project leadership, a wiki, and a book pipeline.

SkillExtended access137

daymade Skills Marketplace

Claude Code Skills Marketplace

A plugin marketplace for Claude Code and Codex: documents, audio, GitHub, session history, finance, macOS and a hardened skill-creator

PluginBroad access1.5K

Second Brain Skills

Claude Code Second Brain Skills

A set of Claude Code skills for knowledge work: brand and voice, an MCP client, PPTX slides, Remotion video, SOPs and a skill creator

SkillExtended access846

README in short

The repository includes an Express server, an Excalidraw frontend and the skill file. The author credits the projects the canvas is built on. The README documents the element format, palette, sizing rules, drawing order and complete diagram examples.

README badge

Original SKILL.md

---
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

Report a problem