alexknowshtml

alexknowshtml / drawbridge

Public

Claude Code skill + real-time diagram server. Ask Claude to draw flowcharts, architecture diagrams, and dependency maps — watch them appear live on an Excalidraw canvas.

58
3
100% credibility
Found Feb 13, 2026 at 45 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

Drawbridge connects AI chat helpers to a shared web drawing board so diagrams like flowcharts and architectures appear live as you describe them.

How It Works

1
🔍 Hear about Drawbridge

You discover Drawbridge while looking for a fun way to let your AI helper draw pictures of ideas like flowcharts right in your browser.

2
💻 Download and prepare it

You grab the free tool from the internet and get it ready on your computer with a few simple steps.

3
🚀 Turn it on

You click to launch the diagram maker, and it starts sharing drawings instantly.

4
🌐 Open the drawing board

You go to a web page in your browser and pick a name for your shared canvas, like 'my-project'.

5
🧑‍🎨 Teach your AI the trick

You copy a special guide into your AI chat folder so it knows exactly how to send drawings to your canvas.

6
✨ Watch magic happen

You tell your AI 'Draw a three-layer app diagram' and see boxes, arrows, and labels appear live with fun pencil sounds!

7
✏️ Edit and share

You tweak the diagram yourself, add friends to watch together, or save pictures of it anytime.

🎉 Perfect diagrams ready

Now your ideas come alive as beautiful, editable drawings that update in real time whenever the AI adds more.

Sign up to see the full architecture

6 more

Sign Up Free

Star Growth

See how this repo grew from 45 to 58 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is drawbridge?

Drawbridge runs a TypeScript server bridging AI like Claude to live Excalidraw canvases—ask for flowcharts, architectures, or dependency maps, and elements appear in real-time via WebSocket. Install the Claude Code skill for free claude code install, point it at your server, and watch diagrams build progressively with labels, arrows, and bindings. Expose a simple HTTP API for POSTing elements, with Docker Compose for one-command deploys and PNG/SVG export scripts.

Why is it gaining traction?

Real-time streaming with pencil sounds and auto-framing hooks devs tired of screenshots; persistence via snapshots/logs survives restarts, plus undo and multi-client collab. Claude Code skills handle claude code free diagramming out-of-box, no claude code pro needed, and it slots into claude github actions or claude github integration for PR reviews. Beats manual Excalidraw by letting scripts or claude code ollama push visuals directly.

Who should use this?

AI agentsmiths prompting Claude for claude code web diagrams during architecture spikes. Backend teams doing claude github pr review or claude github private repo docs needing live flowcharts. Devs wiring claude github copilot or claude github mcp into workflows for instant visuals.

Verdict

Worth a spin for Claude-heavy shops—quickstart and API docs punch above 44 stars and 1.0% credibility score, but low maturity means test persistence in prod. Strong for prototypes, skip if you need bulletproof scale.

(187 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.