regex-visualizer

TotalClaw 作者 totalclaw

使用 JavaScript 正则表达式渲染 Regulex 风格的铁路图，并导出与 Regulex-Plus Web UI (docs/index.html)“导出图像”功能完全相同的 SVG/PNG。当用户提供正则表达式并需要图像用于文档、共享、调试或嵌入时使用；输出应该与 Web UI 渲染匹配，而不是重新实现的图表。支持 i/m/g 标志。

安装 / 下载方式

TotalClaw CLI推荐

totalclaw install totalclaw:totalclaw~pipedream941-regex-visualizer

cURL直接下载，无需登录

curl -fsSL https://skills.taituai.com/api/skills/totalclaw%3Atotalclaw~pipedream941-regex-visualizer/file -o pipedream941-regex-visualizer.md

## 概述（中文）

使用 JavaScript 正则表达式渲染 Regulex 风格的铁路图，并导出与 Regulex-Plus Web UI (docs/index.html)“导出图像”功能完全相同的 SVG/PNG。当用户提供正则表达式并需要图像用于文档、共享、调试或嵌入时使用；输出应该与 Web UI 渲染匹配，而不是重新实现的图表。支持 i/m/g 标志。

## 原文

# 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:

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

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

SVG only:

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

PNG only:

```powershell
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:

```bash
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:
  - `<out>.png` from the same canvas as the web UI "Export Image" button
  - `<out>.svg` from the same `<svg>` 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.

---