Design & media

RegexVisualizer

Try it

Render Regulex-style railroad diagrams for a JavaScript regular expression and export the exact same SVG/PNG as the Regulex-Plus web UI (docs/index.html) "Ex...

What it does

Render Regulex-style railroad diagrams for a JavaScript regular expression and export the exact same SVG/PNG as the Regulex-Plus web UI (docs/index.html) "Ex...

The skill document

Regex Visualizer

Overview

Export the Regulex-Plus web visualizer output to *.svg and/or *.png in a single command, using the built-in web UI export logic (no re-drawing).

Quick Start

Render both SVG and PNG:

cd "$env:USERPROFILE\.codex\skills\regex-visualizer"
node scripts/render.mjs `
  --re "hello\\s+world" `
  --flags "i" `
  --out "out/hello-world"

cd ~/.codex/skills/regex-visualizer
node scripts/render.mjs \
  --re 'hello\\s+world' \
  --flags 'i' \
  --out 'out/hello-world'

SVG only:

cd ~/.codex/skills/regex-visualizer
node scripts/render.mjs `
  --re "^(a|b)*?$" `
  --out "out/re" `
  --svg-only

PNG only:

cd ~/.codex/skills/regex-visualizer
node scripts/render.mjs `
  --re "^(a|b)*?$" `
  --out "out/re" `
  --png-only

Install Dependencies

This skill uses puppeteer-core (does not bundle Chromium). Install once:

cd ~/.codex/skills/regex-visualizer
npm install

Screenshot

An example export generated using the built-in web UI rendering:

  • assets/example.png
  • assets/example.svg

Behavior

  • Uses assets/regulex.html (a copy of the Regulex-Plus web UI) and loads it with #!cmd=export&flags=...&re=....
  • Waits for the page to produce the exported canvas (canvas.exportCanvas) and then writes:
    • .png from the same canvas as the web UI "Export Image" button
    • .svg from the same `` element used by the web UI

Notes

  • Flags are limited to what the web UI supports by default: i, m, g.
  • If the regex fails to parse, the script surfaces the same error text shown in the UI.

Resources

scripts/

  • scripts/render.mjs: Headless export to SVG/PNG via the built-in cmd=export mode.

references/

None.

assets/

  • assets/regulex.html: Copy of Regulex-Plus/docs/index.html used for rendering/export.

Related skills

Axiom Regex Visualizer

Regex visualizer — parse any regex and visualize its structure (groups, quantifiers, anchors, character classes). Use when you need to understand or document...

4 installs

code-visual-review

Generate visual HTML pages for code review (diff + risk tags), code walkthrough (call chains + trust boundaries), and architecture analysis (module dependencies + tech debt). Three modes with shared dark-theme template.

1 installs

draw.io Diagrammer Skill

Generate beautiful draw.io diagrams with a mandatory visual QA loop. Covers flowcharts, ERD, architecture, sequence, and class diagrams. Use when user reques...

by Spotlight Revenue

draw.io Diagrammer

Generate beautiful draw.io diagrams with a mandatory visual QA loop. Covers flowcharts, ERD, architecture, sequence, and class diagrams. Use when user reques...

Apple Viz

Generate beautiful Apple HIG-inspired HTML visualizations (bar, line, donut, progress, stat-card) and screenshot them as PNG images. Use when user asks to vi...

1 installs

regmapper

Browse, search, and annotate regulations via the RegMapper API. Use when asked about regulations, rules, compliance requirements, project annotations, or comparing regulation versions.

1 installs