@wzo/regex-diagram

It parses a regex into an AST, lays it out as a railroad diagram, and renders a self-contained, themeable SVG — plus syntax/semantic validation and a token-by-token plain-language explanation. Framework-agnostic, usable in any JS/TS project.

Features

Modern syntax: named groups, lookbehind, Unicode properties, v-flag set operations
Self-contained SVG, themeable via CSS variables (incl. dark mode), exportable
Parsing validates too: syntax errors and semantic issues (never-matching assertions, empty classes)
Token-by-token, plain-language explanation
Framework-agnostic pure functions, only two small runtime dependencies

Install

pnpm add @wzo/regex-diagram

npm install @wzo/regex-diagram

yarn add @wzo/regex-diagram

bun add @wzo/regex-diagram

Quick start

import { explainRegex
, parseRegex
, regexToSvg
 } from '@wzo/regex-diagram'

// One-shot: regex → standalone SVG string (null if invalid or broken)
const svg
 = regexToSvg
('(\\d{4})-(\\d{2})', 'g')

// Parse + validate: syntax AND semantic issues
const { ok
, ast
, issues
 } = parseRegex
('a$\\d')

// Plain-language, step-by-step explanation
const steps
 = explainRegex
('(?<year>\\d{4})')

Examples

Practical recipes for rendering, validating and explaining regexes.