// the find
dalibo/pev2
Postgres Explain Visualizer 2
PEV2 is a Vue 3 component (also shippable as a single dependency-free HTML file) that turns a PostgreSQL EXPLAIN plan into an interactive graphical diagram with per-node cost, timing, and buffer breakdowns. It's for anyone debugging slow queries who'd rather click through a plan tree than eyeball a wall of indented text.
The test suite is the real signal here: dozens of fixture-driven specs cover parallel workers, CTEs, JIT, partitioning, WAL stats, and I/O timings, plus a dedicated folder of the same plan captured from psql in every combination of aligned/unaligned, ascii/unicode, and single/double quoting — someone actually got burned by client-specific formatting and fixed it for good. It ships three integration paths (standalone HTML, CDN script tag, npm package) so it works for a one-off debugging session or a permanently embedded component. The diagram view colors nodes by cost/duration/rows and surfaces sort/buffer/worker detail per node, which is the actual useful part of reading a plan — finding the one bad node in a forty-node tree.
It hard-depends on Bootstrap 5 CSS for the component styles, so dropping it into a Tailwind or unstyled app means pulling in a stylesheet you don't otherwise want. It's Vue-only — no React or Svelte build — so non-Vue apps are stuck using the standalone HTML page rather than a native embed. The parser is fundamentally regex/heuristic-based text scraping of psql's pretty-printed output, and the fixture-heavy test suite is really evidence of how much whack-a-mole that approach requires; an unusual client or a psql formatting change can still slip through. The README documents exactly three props (plan-source, plan-query, plan-comment) with nothing on styling hooks, events, or theming — you're reading source for anything beyond the basic case.