Ideas to diagrams.
A modern, responsive web app for drawing architecture diagrams and whiteboard-style models. Think a lightweight draw.io, tuned to my own workflow. It works on phone, tablet and laptop, runs entirely in the browser with no backend, and has optional AI features (generate, summarise, review and annotate diagrams) powered by Claude using your own Anthropic API key.
Boxes, shapes, connectors and notes on a crisp canvas, with a chalk-on-slate look: a deep slate blackboard in dark mode and clean paper in light mode. Diagrams save as JSON that diffs cleanly in git, and export to PNG, SVG or PDF.
Built in small slices, each usable on its own. Here's what's in the app today.
Tap or drag shapes onto the canvas, edit labels in place, resize, and link them with connectors. Connectors attach to each shape's outline, route around other shapes, and can be pinned to a side or docking point. Select, Pan and Link modes make it all work by touch.
React FlowTouch-firstBasics, flowchart shapes, Networking (firewall, load balancer, API gateway, CDN), Architecture (cache, message bus, microservice, object storage) and AI & ML (LLM, vector DB, guardrails, agents, MCP client/server). Palette search matches what a shape is for, so "rag" or "pub-sub" finds the right one.
Shape registryFill, border, text colour and theme-aware colour presets. Connector line shapes, arrowheads, dashes and labels. Five fonts with bold, italic, underline and alignment. Every shape and connector can carry notes.
Design tokensGroups with nesting and collapse, swimlane pools, layers (hide, lock, reorder), align and distribute, smart guides while dragging, and one-click auto-arrange using ELK in a Web Worker.
ELK auto-layoutLayersStart from templates such as three-tier, microservices, event-driven, data pipeline, CI/CD or network zones. Save any selection as a reusable stencil, and import or export your library. There's also a built-in generic AI gateway stencil.
7 templatesAutosave in the browser, JSON open and save, and export to PNG, SVG and PDF. All three exporters are written in-house with no extra dependencies. Also 100-step undo and redo, copy and paste between tabs, and a full backup and restore.
Hand-written PDF writerSearch labels and notes, nudge with arrow keys, and use a full shortcuts page. You can Tab through shapes in reading order, and screen readers announce the selection, mode changes and undo.
AccessibilityGenerate a diagram from a description, summarise a diagram (or just a selection) as a short summary, component list or documentation, or review it for single points of failure, missing components, naming and data-flow issues, with findings that highlight the shapes involved, or suggest notes for up to five selected shapes, which you edit, accept or dismiss before anything is written. Free local checks run without a key. AI calls go straight from your browser to Anthropic using your own API key, with Claude Haiku 4.5 by default and Claude Sonnet 5.5 for generating diagrams and for Deeper review. Every request is an explicit button, shows a check step with the model and estimated size first, and reports the tokens used afterwards.
BYO Anthropic keyClaudeVite, React and strict TypeScript, with Zustand for state, Zod for the diagram format, Tailwind with shadcn/ui and Lucide for the interface, and Vitest for tests. It's plain static files deployed to GitHub Pages, so it can move to another host later.
A diagram is a JSON document defined by one Zod schema, and every type is inferred from it. The store must always pass validation. Each format change bumps schemaVersion and ships a tested migration (now at v5), so old diagrams keep opening. Diagrams that use a shape this version doesn't know still load and save unchanged.
The phone layout came first: a bottom drawer for the palette, a bottom sheet for properties, and a thumb-reachable toolbar. Tablet gets a side rail and desktop gets persistent panels. Every touch target is at least 44px, nothing depends on hover, and long-press replaces right-click. Each slice is checked at 360, 768 and 1280px in both themes.
ResponsiveLight + darkAI features came last and follow strict rules. There's no proxy or server: you bring your own Anthropic API key, and requests go directly from the browser to Anthropic. Nothing runs on its own. Only compact JSON is sent, never screenshots. Notes and hidden layers stay out unless you include them. The key stays in memory for the session unless you choose to remember it, and it never ends up in exports or backups. Summaries, reviews and suggested notes use the cheapest model that does the job well, and the token counts Anthropic reports are shown after each request.
Explicit actions onlyDevelopment happens on a Raspberry Pi 5 (arm64) in VS Code, with no local browser. Every change has to pass tsc --noEmit, the Vitest suite and a production build, and CI runs the same checks before each deploy. Visual testing happens on a real phone and laptop against the live Pages URL.
Each phase has its own branch and can ship on its own. Every merged slice bumps the minor version and gets a plain-language entry in the in-app "What's new".
Scaffold, design tokens with contrast tests, light/dark themes, Zod schema, fixtures, CI and the Pages deploy.
DonePan, zoom, minimap, palette, labels, resize, connectors, multi-select, snap-to-grid, adaptive layouts.
DoneProperties panel, colour presets, edge styles and labels, notes everywhere, connector sides and obstacle-aware routing.
DoneAutosave, JSON open/save, PNG/SVG/PDF export, undo/redo, copy/paste, duplicate.
DoneAlign and distribute, groups and swimlanes, auto-arrange, shape packs, layers, smart guides, stencils and templates.
DoneHelp and What's new, find, shortcuts, accessibility, text styling, settings and backup, and performance are done. Still to come: a read-only share view, PWA install and optional .drawio import.
Bring-your-own Anthropic key setup, text-to-diagram, diagram summaries, a review assistant that combines local checks with an AI review, and suggested notes that you approve one by one.
DoneBuilt with Claude Code. Each phase is planned in chat and then built with Claude Code. The repo's CLAUDE.md holds the working rules: one phase at a time, store and schema before UI, no hard-coded colours, and a definition of done that every slice must meet before it stops for review.
No sign-up and nothing to install. Your diagrams stay in your browser unless you export them.