erd
Every table, and how they hang together
Columns, PK and FK badges, crow’s-foot cardinality that knows nullable from not, and bounded contexts drawn as their own blocks.
from Prisma · GraphQL SDL · TypeORM · SQL
Everything the ERD draws →NEVER STALE. NEVER LEAVES.
Your architecture diagram is a lie.
vibeX is a Claude Code / Cursor skill with a CLI underneath. It reads your Prisma schema, OpenAPI document or GraphQL SDL — or, when there isn't one, the source — and renders the diagram from it. ERDs, C4 models, API catalogues, state machines — and the documentation that goes with them, which fails CI when the code moves underneath it.
One standalone HTML file. No server. The HTML it writes makes zero outbound requests.
Open the live demo $ cd ~ && npx skills add Raja0sama/vibex
MIT · Node 18+ · zero dependencies · no build step
/ search · t theme · 0 fit
Generated from a Prisma schema. Click any table for its columns and relationships — every node has its own URL.
THE DIAGRAM YOU HAVE RIGHT NOW
a whiteboard photo in a Slack threada Confluence page last touched in 2023a Miro board nobody can finda Mermaid block that stopped renderingthe one guy who knows
one command, run against the schema that actually ships
SEE IT RUN
WHY VIBEX
- vibe
- How code gets written now. Fast, AI-assisted, more of it than anyone can hold in their head.
- X
- The crossings. Which table joins which. Which service calls which. What happens after approval.
You vibed it into existence. vibeX shows you what you actually built.
The mark is the same idea: two edges crossing. Everything interesting in a system is a line between two things, not the things themselves.
4diagram types
3schema importers
1file per diagram
0outbound requests
Four diagrams. One source of truth.
Each is a validated JSON spec plus a rendered viewer. The spec is the artifact you keep; the HTML is disposable. Documentation and changes are two more views over the same specs — six panels in all.
c4
Who talks to what, and over which protocol
Persons, systems, containers, components, datastores and queues, each with its own fill, inside tinted nested boundaries. Edges crossing a gap get their own lane instead of stacking labels in one column.
from compose · k8s · modules · SDK imports
Everything C4 draws →endpoints
The whole API surface, on one page
REST routes, GraphQL operations and the events you publish, grouped by resource, with method badges, auth, parameters and status codes. Each one links to the tables it touches.
from OpenAPI 2/3 · GraphQL SDL · NestJS · Express
Everything the catalogue shows →lifecycle
Settles the “can it go back to pending?” argument
Every state a parcel can reach and every legal move between them, with the actor, the event, the guard and the side effect written on the arrow. Dead ends get flagged.
from status enums · guards · state tables
Everything a lifecycle draws →DOCUMENTATION
Prose that can’t quietly go stale
An AI wrote the sentence once. Arithmetic checks it forever.
A diagram can’t drift from the schema, because it’s generated from it. Prose can, and always does. So vibeX documents a system the same way it draws one — the unit isn’t a page, it’s a claim: one sentence with a source attached.
The check itself uses fs, path, crypto and git — no model, no network.
Computed from the spec
One of ten fixed generators reads a diagram spec and writes the sentence. It cannot disagree with the diagram beside it, because it is the diagram.
Pinned to a file and a symbol
Held by a content hash of the lines that prove it. Change those lines and the claim flags itself, and the build fails.
A person’s decision, dated
For what no file can prove. Carries the name and the date, and it expires — so “we decided this in March” can’t pass for fact forever.
What it does not do
It catches drift, not initial error. If the first draft misreads the code, the hash still matches, CI stays green, and a wrong claim can stay verified indefinitely. Reviewing the spec once, at authoring time, is the only thing that establishes truth.
The honest version of the pitch: you get a reviewable first draft in one pass, and after you have read it once, arithmetic keeps it honest.
Three commands. No config file.
Point it at a schema you already have. If there isn't one, it reads the code — NestJS controllers, GraphQL resolvers, TypeORM entities — and writes the spec itself.
Import
Your schema becomes a draft spec in one pass. Then you edit it like a human — rename groups, drop the health check.
$ vibex import prisma
schema.prisma db.erd.json
Validate
Dangling references are errors that name the field. Unreachable states, dead ends and layout gripes are warnings that never block you.
$ vibex validate db.erd.json
0 error(s), 0 warning(s)
Render
One HTML file, CSS and JS inlined, spec embedded. Or roll every spec in a folder into a single dashboard.
$ vibex render db.erd.json
db.erd.html
INSTALL IT AS A SKILL
Stop learning flags
vibeX is a Claude Code / Cursor skill first and a CLI second. Installed as a skill, the whole command surface collapses into a sentence — Claude reads SKILL.md, finds your schema, picks the type, writes the spec and renders it.
> show me the data model
wrote db.erd.json · db.erd.html
> now the endpoints
wrote api.endpoints.json · api.endpoints.html
> what happens after approval?
wrote request.lifecycle.json · .html
> document Relay, fail CI when it drifts
wrote relay.docs.json · 153 claims,
150 verified
AROUND THE DIAGRAMS
One file, what changed, and who to tell
Every spec in a folder, one HTML file
A sidebar of every diagram, the documents and the changelog, with the links between tables, endpoints and C4 levels worked out.
Dashboard →Release notes that know what they touched
Built from commit history, plus which diagrams each commit moved and which claims were written, reworded or removed.
Changelog →Wrong? Fix it from where you found it.
Every claim and node has a report link that opens an issue already naming what the reader was looking at. Triage answers it either way, and nothing merges without a person.
Intake →Install it once, then ask
No config file, no account, no sign-up wall between you and the thing. The skill drives the CLI, so you can read exactly what it ran — and run it yourself. The only optional dependency is a YAML parser, and only if your OpenAPI document is YAML.
While the skill writes a spec from your source, it runs inside Claude Code or Cursor, so that source goes to your model provider like any other prompt. The generated HTML makes no requests at all.
Full walkthrough → — install, first diagram, the drift check in CI, and what to do when it does not work.
Next: request workflows, monorepos, one map across many repositories, and a GitHub Action that runs in your own CI. Say which one matters →
# install the skill, once
$ cd ~ && npx skills add Raja0sama/vibex
# then, in Claude Code or Cursor
> show me the data model
# what the skill ran for you
$ vibex import prisma \
prisma/schema.prisma docs/db.erd.json
$ vibex render docs/db.erd.json --open
Never stale. Never leaves.
Re-run it and the diagram is current again. Host it yourself and the schema never goes anywhere.