Pick a tech stack. Get a diagram. Get the prompt.
A static SPA for sketching a system's tech stack — choose one tech per category (frontend, runtime, database, auth, …), see it rendered as a layered architecture diagram, and copy a ready-to-paste LLM prompt describing the stack.
No backend. Selections live in the URL hash (so any link is a share link). Saved stacks live in localStorage.
- Layered diagram — categories grouped into Client / Hosting / Application / Data / Services / Observability, with compatibility hints when picks clash.
- Prompt generator — customizable template with
{{stack_list}}and per-category tokens ({{frontend}},{{database}}, …) for handing the stack to an LLM. - Share via URL — selections serialize to the hash; copy the URL to share.
- Save locally — name and persist stacks in
localStorage. - Export — download the diagram as SVG or PNG.
- Light / dark theme — toggled, persisted.
- SvelteKit 2 + Svelte 5 (runes)
- Tailwind CSS 4
- TypeScript
- Vite 6
- simple-icons for brand logos, lucide-svelte for UI icons
- @floating-ui/dom for tooltips
@sveltejs/adapter-static— fully static output, deployable to any CDN
bun install
bun run devOpen http://localhost:5173.
| Script | What it does |
|---|---|
bun run dev |
Vite dev server |
bun run build |
Production build (static output) |
bun run preview |
Preview the built site |
bun run check |
svelte-check + TypeScript |
Static output goes to build/. Configured for Vercel via vercel.json, but any static host works (Netlify, GitHub Pages, Cloudflare Pages, S3 + CloudFront, …).
src/
lib/
components/ # Svelte components (sidebar, diagram, prompt panel, …)
data/ # categories, layers, compatibility rules
state/ # picker.svelte.ts — central runes-based store
utils/ # prompt rendering, URL hash, SVG/PNG export
routes/ # SvelteKit routes (single-page)
static/ # favicon and static assets
The data model is in src/lib/data/categories.ts — to add a new category or tech, edit that file plus src/lib/data/layers.ts (which row it sits on).
MIT.