# 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 > Página canónica: https://elysiatools.com/es/tools/regex-railroad-diagram-visualizer - **Categoría:** Development - **Palabras clave:** regex, diagrama de ferrocarril, visualizar, expresión regular ## Descripción general 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. ## Entradas - **Expresión regular** (text): e.g. ^(https?)://(\[^/:\]+)(:\d+)?(/.*)?$ · (\w+@\[\w.-\]+) · \b\d{3}-\d{4}\b - **Banderas** (text): e.g. gi · gim · (leave empty for none) ## 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. ## 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. ## Herramientas relacionadas - [Hoja de Referencia Regex](https://elysiatools.com/es/tools/regex-cheat-sheet): Hoja de referencia buscable y localizada para la sintaxis de expresiones regulares — clases de caracteres, anclas, cuantificadores, grupos y referencias, inspecciones, secuencias de escape y banderas, con un probador rápido integrado - [Depurador de Regex](https://elysiatools.com/es/tools/regex-debugger): Recorre cómo una expresión regular coincide con una cadena posición por posición: visualiza intentos de coincidencia, éxitos parciales, retrocesos y capturas — una herramienta para entender el comportamiento de regex, no solo el resultado final - [Vista Previa de Reemplazo Regex](https://elysiatools.com/es/tools/regex-replace-previewer): Vista previa en tiempo real de reemplazos regex con resaltado de diferencias y estadísticas - [Calibrador de barra de escala microscópica](https://elysiatools.com/es/tools/microscope-scale-bar-calibrator): Calcula escala, campo de visión, límites de difracción y muestreo Nyquist, y descarga una barra SVG transparente. - [Referencia de Etiquetas HTML Auto-Cerrantes](https://elysiatools.com/es/tools/self-closing-html-tags): Guía de referencia completa para elementos vacíos HTML (etiquetas auto-cerrantes), elementos SVG y elementos MathML - [Probador de Regex](https://elysiatools.com/es/tools/regex-tester): Prueba expresiones regulares contra texto - [Solucionador de Órbita de Kepler](https://elysiatools.com/es/tools/kepler-orbit-solver): Resuelve numéricamente la ecuación de Kepler E − e·sin(E) = M para la anomalía excéntrica E, la anomalía verdadera ν, el radio orbital y la velocidad relativa, con métodos de Newton/bisección/punto fijo, historial de convergencia y un diagrama SVG - [Escaner ReDoS de regex](https://elysiatools.com/es/tools/redos-regex-scanner): Escanea patrones regex por riesgo de backtracking catastrofico, simula entradas maliciosas y sugiere alternativas seguras ## Ejemplos - [Ejemplos de Reemplazo de Regex](https://elysiatools.com/es/samples/regex-replace): Colección de patrones de reemplazo de regex comunes y útiles para transformación de texto y limpieza de datos - [Patrones Comunes de Expresiones Regulares](https://elysiatools.com/es/samples/regex-samples): Patrones de expresiones regulares comúnmente utilizados para validación y coincidencia - [Alternativas de Patrones Regex](https://elysiatools.com/es/samples/regex-alternatives): Múltiples formas de escribir el mismo patrón regex con diferentes compensaciones - [Grupos de Captura Nombrados de Regex](https://elysiatools.com/es/samples/regex-named-groups): 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. ## Contenido relacionado - [Herramientas de pruebas, visualizacion y depuracion de regex](https://elysiatools.com/es/hubs/regex-utility): Compara testers de regex, explicadores, chuletas, visualizadores, linters, escaneos de rendimiento y vistas previas de reemplazo en un solo hub para disenar y depurar patrones con mas seguridad. - [Herramientas de Flujo para SVG, Favicon e Iconos](https://elysiatools.com/es/hubs/svg-favicon-icon-workflows): Genera paquetes de favicon, optimiza SVG, convierte iconos entre ICO, PNG, JPG, WebP y SVG, y prepara assets listos para la web en un solo hub.