diagrammer

Diagrammer

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.

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

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.

Stack