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
