Visualizador de Diagrama Ferroviário de Regex

Renderiza uma expressão regular como diagrama ferroviário SVG mostrando literais, grupos, alternativas e repetição, com numeração de grupos de captura e explicação das flags

Cole uma expressão regular no estilo JavaScript/PCRE e obtenha um diagrama ferroviário (sintático) que torna a estrutura óbvia — muito mais legível que uma parede de metacaracteres.

Como funciona:

  1. O padrão é analisado em um AST com a biblioteca ret.
  2. Cada nó do AST é mapeado para uma primitiva de diagrama ferroviário: literais viram caixas arredondadas, grupos são rotulados com seu índice de captura (e nome), alternativas ramificam em uma escolha, e quantificadores (*, +, ?, {n,m}) são renderizados como setas de retorno.
  3. O diagrama é renderizado como um SVG autossuficiente via railroad-diagrams.

O relatório também lista:

  • Cada grupo de captura com seu número e nome (se houver).
  • Cada flag com uma explicação em linguagem clara (g, i, m, s, u, y, d, x).

Leia o diagrama da esquerda para a direita. É especialmente útil para ensinar regex, documentar padrões complexos e detectar formas de backtracking catastrófico (quantificadores aninhados) antes da produção.

Limitações: o parser cobre a sintaxe JavaScript/PCRE incluindo classes de caracteres, âncoras, retroreferências, grupos nomeados, lookaround (reportado) e quantificadores limitados/ilimitados. Alguns recursos avançados do PCRE (padrões recursivos, \K, branch reset, condicionais) não são suportados e reportam erro de análise.

Exemplos de resultados

2 Exemplos

Visualizar um regex de URL

Um padrão de URL comum como diagrama ferroviário com âncoras, grupos e porta opcional.

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

Visualizar um padrão de captura de email

Um grupo de captura de email simples com limites de palavra como diagrama.

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

Fatos principais

Categoria
Desenvolvimento e Web
Tipos de entrada
text
Tipo de saída
html
Cobertura de amostras
4
API disponível
Yes

Visão geral

O Visualizador de Diagrama Ferroviário de Regex converte expressões regulares complexas em diagramas sintáticos SVG claros e fáceis de ler. Ele analisa padrões no estilo JavaScript/PCRE, mapeando grupos de captura, alternativas e quantificadores em caminhos visuais intuitivos, além de fornecer explicações detalhadas sobre as flags utilizadas.

Quando usar

  • •Ao documentar expressões regulares complexas em projetos de equipe para facilitar a manutenção do código.
  • •Durante o desenvolvimento e depuração de padrões de regex difíceis de ler ou propensos a erros.
  • •Para ensinar ou aprender a sintaxe de expressões regulares visualizando o fluxo de correspondência passo a passo.

Como funciona

  • •O analisador processa a expressão regular fornecida e a converte em uma Árvore de Sintaxe Abstrata (AST) usando a biblioteca ret.
  • •Cada elemento da AST é mapeado para um componente visual correspondente, como caixas para literais, ramificações para alternativas e loops para quantificadores.
  • •A ferramenta gera um diagrama ferroviário em formato SVG autossuficiente e lista todos os grupos de captura identificados com suas respectivas flags explicadas.

Casos de uso

Visualização de padrões de validação de e-mail e telefone para auditoria de segurança.
Documentação técnica de rotas de URL e regras de roteamento baseadas em regex.
Identificação visual de quantificadores aninhados que possam causar problemas de backtracking catastrófico.

Exemplos

1. Visualização de Regex para URLs

Desenvolvedor Web
Contexto
Precisa validar e extrair partes de URLs em um arquivo de configuração, mas a expressão regular atual é muito difícil de ler.
Problema
Compreender a estrutura de grupos de captura de um padrão de URL complexo.
Como usar
Insira o padrão ^(https?)://([^/:]+)(:\d+)?(/.*)?$ no campo de expressão regular e defina a flag como i.
Configuração de exemplo
{
  "pattern": "^(https?)://([^/:]+)(:\\d+)?(/.*)?$",
  "flags": "i"
}
Resultado
Um diagrama SVG claro mostrando os caminhos para o protocolo opcional, domínio, porta e caminho, com cada grupo de captura numerado.

2. Análise de Padrão de E-mail

Analista de QA
Contexto
Precisa garantir que a expressão regular usada para validar e-mails no formulário de cadastro cubra todos os casos válidos sem falhas.
Problema
Verificar visualmente se os limites de palavras e classes de caracteres de e-mail estão estruturados corretamente.
Como usar
Cole o padrão \b(\w+[\w.-]*@\w+[\w.-]*\.\w+)\b e adicione as flags gi.
Configuração de exemplo
{
  "pattern": "\\b(\\w+[\\w.-]*@\\w+[\\w.-]*\\.\\w+)\\b",
  "flags": "gi"
}
Resultado
O diagrama exibe o fluxo de caracteres permitidos antes e depois do símbolo '@', destacando o grupo de captura principal e explicando as flags global e case-insensitive.

Testar com amostras

image, svg, regex
Padrões Comuns de Expressões Regulares
Padrões de expressões regulares comumente usados para validação e correspondência
title token regex
regex
Alternativas de Padrões Regex
Múltiplas formas de escrever o mesmo padrão regex com diferentes compensações
title token regex
regex
Grupos de Captura Nomeados Regex
Coleção de padrões regex usando grupos de captura nomeados para extrair dados estruturados de texto. Grupos nomeados tornam os padrões mais legíveis e mantíveis atribuindo nomes significativos às partes capturadas.
title token regex
regex
Exemplos de Substituição de Regex
Coleção de padrões de substituição de regex comuns e úteis para transformação de texto e limpeza de dados
title token regex
regex

Hubs relacionados

Ferramentas de conversao de formatos de imagem e exportacao animada
Compare conversores de imagem para JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 e saidas voltadas para animacao em um unico hub.
Ferramentas de limpeza, acabamento e preparo em lote de imagens
Reune em um so hub ferramentas para limpar imagens, recortar bordas, adicionar margem ou moldura, redimensionar e comprimir em lote, aplicar marca d agua e dar acabamento visual.
Ferramentas de teste, linting e depuracao de regex
Compare testers de regex, explicadores, linters, scanners de desempenho, geradores de padrao e previews de substituicao em um unico hub.
Ferramentas de metadados de imagem, EXIF e limpeza de privacidade
Compare visualizadores de metadados, inspetores EXIF/IPTC/XMP, corretores de orientação, editores de metadados e limpeza de privacidade para fluxos de publicação de fotos.

FAQ

O que é um diagrama ferroviário de regex?

É uma representação visual que mostra o fluxo de correspondência de uma expressão regular da esquerda para a direita, facilitando a leitura de padrões complexos.

Quais dialetos de regex são suportados?

A ferramenta suporta a sintaxe padrão do JavaScript e PCRE, incluindo classes de caracteres, âncoras e grupos de captura.

A ferramenta suporta recursos avançados como recursão ou branch reset?

Não, recursos avançados do PCRE como padrões recursivos, \K e condicionais não são suportados e retornarão erro de análise.

Como os grupos de captura são exibidos no diagrama?

Eles são destacados e rotulados com seus respectivos índices numéricos ou nomes, facilitando a identificação de subpadrões.

Posso exportar o diagrama gerado?

Sim, o diagrama é renderizado como um elemento SVG autossuficiente que pode ser copiado ou salvo diretamente.

Documentação da API

Ponto final da solicitação

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

Parâmetros da solicitação

Nome do parâmetro Tipo Requerido Descrição
pattern text Sim -
flags text Não -

Formato de resposta

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

Documentação de MCP

Adicione este ferramenta à sua configuração de servidor MCP: 

{
  "mcpServers": {
    "elysiatools-regex-railroad-diagram-visualizer": {
      "name": "regex-railroad-diagram-visualizer",
      "description": "Renderiza uma expressão regular como diagrama ferroviário SVG mostrando literais, grupos, alternativas e repetição, com numeração de grupos de captura e explicação das flags",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=regex-railroad-diagram-visualizer",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Você pode encadear várias ferramentas, ex: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, máx 20 ferramentas.

Se você encontrar algum problema, por favor, entre em contato conosco em [email protected]