{"id":"75d50676-72d5-43ac-83cc-eae08caa4ee2","slug":"pipedream941-regulex-plus","kind":"skill","name":"regulex-plus","summary":"A sleek Regex visualizer with enhanced Chinese support and elegant diagrams","owner":"PipeDream941","repoUrl":"https://github.com/PipeDream941/regulex-plus","license":"MIT","licenseTier":"permissive","trust":"community","stars":3,"match":null,"fewStars":true,"format":"skill","createdAt":"2026-05-13T06:43:29.000Z","addedAt":"2026-10-14T05:11:12.588Z","logoUrl":"https://avatars.githubusercontent.com/u/50080479?u=99dc24245c387f8e60d30baec1230339b782926a&v=4","linkOnly":false,"collection":null,"skillPath":null,"categories":["browser-web","developer-tools","design-media"],"tags":["ai-agent","chinese","cjk","claude-code","cli","playwright","railroad-diagram","regex"],"runtime":"node","local":true,"cloudCapable":false,"cloudCapability":"unknown","cloudReadyOnPlatform":false,"needsApiKey":false,"reviewed":false,"syncedAt":"2026-10-14T10:44:28.497Z","sample":false,"url":"https://conduits.dev/tools/pipedream941-regulex-plus","language":"TypeScript","transports":["stdio"],"install":{"npm":"regulex-plus"},"requirements":{"env":[],"upstreamMayCharge":false},"tools":null,"readme":"# Regulex+\n\n中文 | [EN](README.en.md)\n\n> JavaScript 正则表达式解析与可视化工具 —— 现代化界面、原生中文支持、railroad 风格图\n\n**🌐 在线试用：<https://pipedream941.github.io/regulex-plus/>**\n\n无需安装、零后端，浏览器打开即用。\n\n## 特性\n\n- 🎨 **现代化 UI** —— 暗 / 亮双主题，DM Sans + JetBrains Mono，Tweaks 面板可调强调色与画布底色\n- 🌏 **中英双语** —— 一键切换，所有 UI、提示、示例完整本地化\n- 📐 **圆角 SVG 节点** —— 重做 Begin / End、量词、字符类节点的配色与圆角\n- 🈯 **原生 Unicode / 中文** —— 图标签直接显示中文，不再渲染成 `你好` 转义\n- 📏 **中英混排宽度修复** —— `visualize` 内部按字符可视宽度计算，避免标题挤压\n- 🖼 **PNG 图片导出** —— 颜色与圆角内联到 SVG，2× DPR 高清下载\n- 📦 **零后端依赖** —— 单文件 HTML，可通过 `<iframe>` 嵌入到任意页面\n\n## 快速试用\n\n直接打开线上 demo：<https://pipedream941.github.io/regulex-plus/>\n\n页面顶部 chip 一键加载示例：`email` · `phone` · `url` · `iso-date` · 中文车机导航长正则。\n\n## 本地运行\n\n```bash\ngit clone https://github.com/PipeDream941/regulex-plus.git\ncd regulex-plus\npython -m http.server -d docs 8000\n# 浏览器访问 http://localhost:8000\n```\n\n或者直接用浏览器打开 `docs/index.html`（部分浏览器对 `file://` 下的 SVG 行为不同，建议走静态服务器）。\n\n## 命令行用法 / Claude Skill\n\n通过 npm 安装后，可以在终端直接把任意 JS 正则渲染成 PNG/SVG 文件——无需打开浏览器。同时本仓库带有 `SKILL.md`，可作为 [Claude Code Skill](https://skills.sh/) 被 AI agent 自动调用。\n\n```bash\n# 最简单：渲染到 ./regulex.png\nnpx regulex-plus '^(a|b)*?$'\n\n# 指定输出路径与格式（根据后缀自动判断）\nnpx regulex-plus '中文(标点|符号)+' --out diagrams/cjk.png\nnpx regulex-plus '\\d{3}-\\d{4}' --format svg --out phone.svg\n\n# 输出 Mermaid 流程图（文本格式，可直接贴到 GitHub / Notion / Obsidian）\nnpx regulex-plus '^(a|b)*?$' --format mermaid -o flow.mmd\nnpx regulex-plus '^(?:\\d{3}-)?\\d{3,4}-\\d{4}$' --format mermaid --direction TD -o phone.mmd\n\n# 暗色主题、英文标签、2× DPR\nnpx regulex-plus '(?:abc|def)+' --theme dark --lang en --scale 2 --out demo.png\n\n# 完整选项\nnpx regulex-plus --help\n```\n\n**格式选择**：`png` / `svg` 走 headless Chromium（首次运行下载 ~92MB），`mermaid` 是纯文本输出，**不需要 Chromium、启动快 5× 以上**。后缀自动识别：`.mmd` → mermaid，`.svg` → svg，其余默认 png。\n\n### 作为 Skill 安装\n\n```bash\nnpx skills add PipeDream941/regulex-plus\n```\n\n之后任何兼容 skills 协议的 agent（如 Claude Code）在用户讨论复杂正则时会自动建议调用本 CLI 生成可视化。\n\n## 仓库结构\n\n| 路径 | 说明 |\n| --- | --- |\n| `docs/index.html` | 部署入口；GitHub Pages 来源 |\n| `src/` | TypeScript 源码 |\n| `test/` | 测试与基准 |\n\n## 致谢\n\n本项目 Fork 自 [CJex/regulex](https://github.com/CJex/regulex)（原作者 jex.im）。Regulex+ 在原项目基础上做了 UI 现代化、中文渲染修复、PNG 导出修复、i18n 等改进。\n\n## 许可证\n\n[MIT](LICENSE)\n"}