$ show Ovyerus/prismaliser
Prismaliser is a fully client-side single-page application that visualizes Prisma database schemas as interactive entity-relationship diagrams. It runs entirely in the browser: the user pastes a Prisma schema into a Monaco editor, the app parses it client-side via a vendored WASM module from Prisma's own schema parser, and renders the models, enums, and relations (1-1, 1-n, m-n) as an interactive React Flow graph. The app has no backend server – it is a static Vite SPA that can be self-hosted (Docker image provided). Recently, AT Protocol (Bluesky) integration was added allowing users to publish immutable snapshots of their diagrams (schema + node positions) to their own AT repository, share via canonical AT links, and manage published snapshots. OAuth login is browser-native using the atcute library family. The codebase is TypeScript strict, thoroughly tested (Vitest), and follows modern React patterns with Tailwind CSS v4 and CSS modules. The architecture is modular: a util layer handles Prisma parsing, graph generation, and layout (elkjs), while a dedicated atproto/ module handles OAuth, record creation, public retrieval, and share link parsing. The UI is built with React 19, using local state and hooks (no global state management). The project is actively maintained with recent commits and open issue triage.
The LLM identified 4 files worth highlighting for reuse:
A reusable accessible native HTML dialog wrapper using the `<dialog>` element with `showModal()`. It provides focus restoration on close, aria-labelledby/describedby, close on Escape (with prevention of duplicate state transitions), and a visible close button pattern. Could be extracted into any React project needing native modal dialogs.
Pure utility functions for capturing, applying, and comparing node positions in a graph. `captureNodePositions` normalizes and sorts positions; `applyNodePositions` maps saved positions onto generated nodes by ID; `sameNodePositions` compares two position sets with integer rounding and order independence. These functions are isolated, well-tested, and could be reused in any React Flow or graph visualization project that needs to persist and restore node layouts.
Implements the core AT Protocol share record contract for Prismaliser's `app.prismaliser.schema` collection. Provides `parseShareRecord` (validates a record against the generated atcute lexicon, enforces blob MIME/size, byte ceiling, duplicate positions) and `createShareRecord` (constructs a validated record from a draft with normalised positions). The validation logic is clearly separated (`validateSchemaBlob`) and could be reused in any AT Protocol application that needs to create and validate immutable schema snapshots.
Client-side wrapper around Prisma's schema WASM module. It fetches and initializes the `prisma_schema_build_bg.wasm` binary once (eagerly on page load), provides `getDMMF` (Prisma schema → DMMF datamodel) and `formatSchema`, and handles error unwrapping (WASM error JSON → structured `PrismaSchemaError` with per-line diagnostics for Monaco markers). The panic-registry polyfill and browser-compatible init pattern are a reusable blueprint for integrating Node-targeted WASM packages into browser applications.