Diagrammer

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.

Why

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.

Map Types

Pick by type. Layout is automatic.

🧠 mindmap

Branches radiate from one central topic. Brainstorm, outline, taxonomy of ideas.

🌳 tree

Strict hierarchy. Org chart, file tree, taxonomy with one parent per child.

🔀 flowchart

Directed process w/ decision diamonds. Pipelines, state machines, runbooks.

🕸️ graph

Arbitrary network: deps, citations, ER diagrams, knowledge graphs.

💡 concept

Concept map w/ labelled, often bidirectional links. Reinforcing ideas, not hierarchies.

📅 timeline

Linear sequence of events. Roadmaps, history, milestones.

🗄️ ER (as graph)

Entities = shape: "rectangle" + bold label + attributes in description w/ (PK)/(FK) markers. Edges carry verb + cardinality (places (1—N)).

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

Install

Web viewer

cd web
bun install
bun run dev

Open http://localhost:5173.

Build: cd web && bun run build → static web/dist/. Drop on any host.

Live: diagrammer.idra.app.

Skill (Cursor / Windsurf / Cline / Codex / Claude Code / Gemini)

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

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.

Stack

Authoring Skill

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.

Schema

{
  "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" }]
}

Full reference: skills/diagrammer/SKILL.md.

ER Diagrams

ER diagrams render as type: "graph". The schema covers the common case without dedicated attribute lists:

Worked ER example shipped in the in-app Examples menu (Order management ER).

Examples

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.

Roadmap

In rough order of what I'm working on:

1. Now — polish the schema, layouts, edit-mode UX, and authoring skill. Multi-group canvas, edge markers, ER conventions, better packing.
2. Next — additional map types and finer-grained per-group styling (background, label, collapse).
3. 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.

🛠️ Contributing

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.

Star This Repo

If Diagrammer save you mass clicking — leave mass star. ⭐

License

MIT — by IdraDev. Free like a blank canvas.