Visualizador de Diagrama Ferroviario de Regex

Renderiza una expresión regular como diagrama ferroviario SVG que muestra literales, grupos, alternativas y repetición, con numeración de grupos de captura y explicación de banderas

Pega una expresión regular de sabor JavaScript/PCRE y obtén un diagrama ferroviario (sintáctico) que hace obvia su estructura — mucho más legible que un muro de metacaracteres.

Cómo funciona:

  1. El patrón se analiza en un AST con la librería ret.
  2. Cada nodo del AST se mapea a una primitiva de diagrama ferroviario: los literales se vuelven cajas redondeadas, los grupos se etiquetan con su índice de captura (y nombre), las alternativas ramifican en una elección, y los cuantificadores (*, +, ?, {n,m}) se renderizan como flechas de bucle.
  3. El diagrama se renderiza como un SVG autocontenido mediante railroad-diagrams.

El informe también lista:

  • Cada grupo de captura con su número y nombre (si lo tiene).
  • Cada bandera con una explicación en lenguaje claro (g, i, m, s, u, y, d, x).

Lee el diagrama de izquierda a derecha. Es especialmente útil para enseñar regex, documentar patrones complejos y detectar formas de retroceso catastrófico (cuantificadores anidados) antes de producción.

Limitaciones: el analizador cubre sintaxis JavaScript/PCRE incluidas clases de caracteres, anclas, referencias inversas, grupos nombrados, lookaround (reportado) y cuantificadores acotados/no acotados. Algunas características avanzadas de PCRE (patrones recursivos, \K, branch reset, condicionales) no se soportan y reportan error.

Resultados de ejemplo

2 Ejemplos

Visualizar un regex de URL

Un patrón de URL común como diagrama ferroviario con anclas, grupos y puerto opcional.

Railroad diagram with capture groups and flag explanation.
Ver parámetros de entrada
{ "pattern": "^(https?)://([^/:]+)(:\\d+)?(/.*)?$", "flags": "i" }

Visualizar un patrón de captura de email

Un grupo de captura de email simple con límites de palabra como diagrama.

Email pattern railroad diagram with capture group.
Ver parámetros de entrada
{ "pattern": "\\b(\\w+[\\w.-]*@\\w+[\\w.-]*\\.\\w+)\\b", "flags": "gi" }

Datos clave

Categoría
Desarrollo y Web
Tipos de entrada
text
Tipo de salida
html
Cobertura de muestras
4
API disponible
Yes

Resumen

El Visualizador de Diagrama Ferroviario de Regex convierte expresiones regulares complejas de JavaScript y PCRE en diagramas sintácticos SVG interactivos y fáciles de leer, facilitando la comprensión de su estructura lógica, grupos de captura y modificadores.

Cuándo usarlo

  • •Cuando necesitas documentar expresiones regulares complejas en la documentación técnica de un proyecto.
  • •Al depurar patrones de regex difíciles de leer para identificar rápidamente errores de anidamiento o lógica.
  • •Para enseñar el funcionamiento de las expresiones regulares a otros desarrolladores mediante una representación visual intuitiva.

Cómo funciona

  • •El analizador procesa la expresión regular de tipo JavaScript o PCRE y la convierte en un árbol de sintaxis abstracta (AST) utilizando la librería ret.
  • •Cada nodo del AST se traduce a componentes visuales de diagramas ferroviarios, donde los literales son cajas, las alternativas son bifurcaciones y los cuantificadores son bucles.
  • •Se genera un diagrama SVG interactivo y autocontenido junto con un desglose detallado de los grupos de captura y el significado de cada bandera de configuración.

Casos de uso

Documentación de patrones de validación de formularios (como correos electrónicos o URLs) en repositorios de código.
Auditoría de seguridad para detectar posibles vulnerabilidades de retroceso catastrófico (catastrophic backtracking) causadas por cuantificadores mal anidados.
Aprendizaje y enseñanza de la sintaxis de expresiones regulares en entornos educativos o de capacitación técnica.

Ejemplos

1. Visualización de un patrón de validación de URL

Desarrollador Frontend
Contexto
Está integrando un sistema de validación de enlaces en un formulario y necesita asegurarse de que el regex cubra protocolos, subdominios y puertos opcionales sin errores.
Problema
El regex ^(https?)://([^/:]+)(:\d+)?(/.*)?$ es difícil de leer y validar a simple vista por otros miembros del equipo.
Cómo usarlo
Introduce la expresión regular en el campo de patrón y añade la bandera i para ignorar mayúsculas y minúsculas.
Configuración de ejemplo
pattern: "^(https?)://([^/:]+)(:\d+)?(/.*)?$", flags: "i"
Resultado
Se genera un diagrama ferroviario SVG claro que muestra las rutas alternativas para http/https, el host, el puerto opcional y la ruta del recurso.

2. Análisis de un extractor de correos electrónicos

Ingeniero de Datos
Contexto
Necesita extraer direcciones de correo electrónico de archivos de registro de texto plano utilizando un script automatizado.
Problema
Quiere verificar que el grupo de captura del regex \b(\w+[\w.-]*@\w+[\w.-]*\.\w+)\b aísle correctamente la dirección completa.
Cómo usarlo
Pega el patrón de búsqueda de correos electrónicos en la herramienta y activa las banderas globales y de ignorar mayúsculas gi.
Configuración de ejemplo
pattern: "\\b(\\w+[\\w.-]*@\\w+[\\w.-]*\\.\\w+)\\b", flags: "gi"
Resultado
Obtiene un diagrama visual que resalta el grupo de captura número 1 y detalla el flujo de caracteres permitidos antes y después del símbolo arroba.

Probar con muestras

image, svg, regex
Patrones Comunes de Expresiones Regulares
Patrones de expresiones regulares comúnmente utilizados para validación y coincidencia
title token regex
regex
Alternativas de Patrones Regex
Múltiples formas de escribir el mismo patrón regex con diferentes compensaciones
title token regex
regex
Grupos de Captura Nombrados de Regex
Colección de patrones de regex que usan grupos de captura nombrados para extraer datos estructurados de texto. Los grupos nombrados hacen que los patrones sean más legibles y mantenibles asignando nombres significativos a las partes capturadas.
title token regex
regex
Ejemplos de Reemplazo de Regex
Colección de patrones de reemplazo de regex comunes y útiles para transformación de texto y limpieza de datos
title token regex
regex

Hubs relacionados

Herramientas de conversion de formatos de imagen y exportacion animada
Compara convertidores de imagen para JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 y salidas pensadas para animacion en un solo hub.
Herramientas de limpieza, acabado y preparacion por lotes de imagenes
Reune en un solo hub herramientas para limpiar imagenes, recortar bordes, agregar margen o marco, redimensionar y comprimir por lotes, poner marcas de agua y pulir activos visuales.
Herramientas de pruebas, linting y depuracion de regex
Compara testers, explicadores, linters, escaneres de rendimiento, generadores de patrones y vistas previas de reemplazo regex en un solo hub.
Herramientas de metadatos de imagen, EXIF y limpieza de privacidad
Compara visores de metadatos, inspectores EXIF/IPTC/XMP, corrección de orientación, editores de metadatos y limpieza de privacidad para publicación de imágenes.

Preguntas frecuentes

¿Qué sabores de expresiones regulares soporta este visualizador?

Soporta principalmente el estándar de JavaScript y PCRE, incluyendo clases de caracteres, anclas, grupos de captura y cuantificadores.

¿Puedo visualizar expresiones con banderas específicas como 'g' o 'i'?

Sí, puedes ingresar las banderas en el campo correspondiente para obtener una explicación detallada de su comportamiento en el patrón.

¿Qué limitaciones tiene el analizador sintáctico?

No admite características avanzadas de PCRE como patrones recursivos, el operador \K, reinicio de ramas o condicionales.

¿Cómo se representan los grupos de captura en el diagrama?

Se muestran como bloques etiquetados con su número de índice correspondiente o su nombre si son grupos de captura nombrados.

¿Es posible exportar el diagrama generado?

El resultado se renderiza como un gráfico SVG estándar que puedes guardar o integrar directamente en tus páginas web o documentación.

Documentación de la API

Punto final de la solicitud

POST /es/api/tools/regex-railroad-diagram-visualizer

Parámetros de la solicitud

Nombre del parámetro Tipo Requerido Descripción
pattern text Sí -
flags text No -

Formato de respuesta

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

Documentación de MCP

Agregue este herramienta a su configuración de servidor MCP: 

{
  "mcpServers": {
    "elysiatools-regex-railroad-diagram-visualizer": {
      "name": "regex-railroad-diagram-visualizer",
      "description": "Renderiza una expresión regular como diagrama ferroviario SVG que muestra literales, grupos, alternativas y repetición, con numeración de grupos de captura y explicación de banderas",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=regex-railroad-diagram-visualizer",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Puede encadenar múltiples herramientas, por ejemplo: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, máximo 20 herramientas.

Si encuentra algún problema, por favor, póngase en contacto con nosotros en [email protected]