tell the model, get the diagram
Why • Map Types • Install • Skill • Schema • ER
A local-first, schema-driven viewer for LLM-authored diagrams. Hand a model the authoring skill, it returns a JSON document, and the viewer renders it on a pannable, zoomable canvas — mindmap, tree, flowchart, graph, ER diagram, concept map, or timeline, auto-laid-out per type. No account. No cloud. No drag-pixels-by-hand.
I never found a truly open-source, zero vendor lock-in way to take a mind map or technical diagram and just view it. Every option pulled me into a SaaS account, a proprietary file format, a paywalled export, or a dialect of someone else's DSL. So Diagrammer: one tiny JSON schema, a static viewer that runs in your browser, no backend, no signup, no lock-in. Your data stays your data — paste it, drop it, export it, host the whole thing yourself in a dist/ folder.
Pick by type. Layout is automatic.
|
|
|
|
|
|
|
|
- No coordinates — auto-layout per
type. Drag if you must, viewer writes positions back. - Local-first — recents in
localStorage, paste/drop JSON, no upload. - Edit mode — drag nodes, connect handles, double-click rename, side panel for shape/color/emphasis/edge style.
- Examples — one of every layout type, including ER, in the in-app menu.
- Theme — light, dark, system. Light by default.
cd web
bun install
bun run devOpen http://localhost:5173.
Build: cd web && bun run build → static web/dist/. Drop on any host.
Live: diagrammer.idra.app.
Drop the Diagrammer authoring skill into your editor of choice:
# macOS / Linux / WSL / Git Bash
bash install.sh --all # install every supported agent
bash install.sh --only cursor # just one
bash install.sh # autodetect from your $PWD
# Windows (PowerShell)
./install.ps1 -All
./install.ps1 -Only cursor
./install.ps1| Agent | Lands in |
|---|---|
| Cursor | .cursor/rules/diagrammer.mdc |
| Windsurf | .windsurf/rules/diagrammer.md |
| Cline | .clinerules/diagrammer.md |
| Codex | .codex/{config.toml,hooks.json} |
| Claude Code | .claude-plugin/{plugin,marketplace}.json |
| Gemini CLI | gemini-extension.json |
| Generic | AGENTS.md (any agent that reads AGENTS.md at root) |
All variants reference the canonical skills/diagrammer/SKILL.md. For ChatGPT / Copilot Chat / any web UI without a skill format, paste skills/diagrammer/SKILL.md into the system prompt or custom instructions.
| Layer | Tool |
|---|---|
| Bundler | Vite |
| UI | React 19 + TypeScript |
| Styling | Tailwind CSS v4 |
| Primitives | Radix UI in shadcn-style wrappers |
| Canvas | React Flow (@xyflow/react) |
| Compiler | React Compiler |
skills/diagrammer/SKILL.md is the contract LLMs follow to produce diagrams this viewer can render. It documents the schema, when to use each type (incl. ER), visual conventions, worked examples, and anti-patterns.
The home page exposes a Copy authoring skill button — paste it into your model's system prompt, a Claude Code skill file, a Cursor rule, or any other instruction surface.
"Make me an ER for an order-management DB" → JSON → drop on canvas → done.
{
"version": "1",
"type": "mindmap",
"title": "Untitled",
"description": "Optional one-liner",
"nodes": [
{ "id": "root", "label": "Center", "emphasis": "strong" },
{ "id": "a", "label": "Branch A", "color": "blue" }
],
"edges": [{ "from": "root", "to": "a", "label": "optional" }]
}| Field | Type | Notes |
|---|---|---|
version |
"1" |
Schema version. Always "1". |
type |
enum | mindmap · tree · flowchart · graph · concept · timeline. |
nodes[].shape |
enum | rectangle · rounded · ellipse · diamond · hexagon · pill. |
nodes[].color |
enum | default · slate · blue · green · amber · rose · violet · cyan. |
nodes[].emphasis |
enum | normal · strong · subtle. |
edges[].style |
enum | solid · dashed · dotted. |
edges[].direction |
enum | forward · backward · both · none. |
Full reference: skills/diagrammer/SKILL.md.
ER diagrams render as type: "graph". The schema covers the common case without dedicated attribute lists:
| Concept | Convention |
|---|---|
| Entity | shape: "rectangle", label: "**Name**", description: "id (PK), col1, col2_id (FK), ...". |
| Primary | color: "blue" + emphasis: "strong". |
| Lookup / weak | color: "slate" + emphasis: "subtle". |
| Relationship | edge with label: "verb (1—N)", direction: "both". |
| Chen-style | Intermediate shape: "diamond" node when relationship has its own attributes. |
| Cardinality | Pick one: 1—1 / 1—N / M—N (or 0..N / 1..*). Stay consistent. |
Worked ER example shipped in the in-app Examples menu (Order management ER).
In-app Examples menu carries one of each layout type:
- 🧠 Launching a SaaS — mindmap with workstream branches
- 🌳 Web platform — tree of HTML, CSS, JS, Web APIs
- 🔀 Pull request lifecycle — flowchart w/ CI and review branches
- 🗄️ Order management ER — entity–relationship diagram w/ cardinalities
- 💡 Functional programming — concept map w/ bidirectional links
- 📅 Web platform milestones — timeline 1991 → today
Drop any *.json from web/examples/ onto the canvas, or paste straight from clipboard.
Important
No persistent storage / no backend — for now. Diagrammer currently has
zero server-side persistence. Everything (recents, prefs, the active map)
lives in your browser's localStorage. Clear the site data, lose the maps.
Export your maps if you care.
Persistent storage (cloud sync / accounts / shared workspaces) is planned but not the next milestone. The current focus is hardening the viewer + authoring schema first; persistence will land once the foundations are solid. Until then, treat Diagrammer as a stateless renderer over JSON files you own.
In rough order of what I'm working on:
- Now — polish the schema, layouts, edit-mode UX, and authoring skill. Multi-group canvas, edge markers, ER conventions, better packing.
- Next — additional map types and finer-grained per-group styling (background, label, collapse).
- Later — optional persistent storage backend (self-hostable). No account walls, no proprietary format. Stays opt-in; the local-first JSON workflow remains the default.
If you want a feature pulled forward, open an issue.
Read CONTRIBUTING.md before opening a PR. TL;DR: local-first stays local-first, the schema is a public contract, skills/diagrammer/SKILL.md and web/src/lib/skill.ts move together, and bun run lint + bun run build must pass.
If Diagrammer save you mass clicking — leave mass star. ⭐
MIT — by IdraDev. Free like a blank canvas.