Визуализатор железнодорожной диаграммы regex

Преобразует регулярное выражение в SVG-железнодорожную диаграмму (синтаксическое дерево), показывая литералы, группы, альтернативы и повторения, с нумерацией групп захвата и пояснением флагов

Вставьте регулярное выражение в стиле JavaScript/PCRE и получите железнодорожную диаграмму (синтаксическое дерево), делающую структуру очевидной — гораздо нагляднее стены метасимволов.

Как это работает:

  1. Шаблон разбирается в AST библиотекой ret.
  2. Каждый узел AST отображается на примитив железнодорожной диаграммы: литералы — скруглённые прямоугольники, группы помечены индексом захвата (и именем), альтернативы ветвятся как выбор, квантификаторы (*, +, ?, {n,m}) — стрелки возврата.
  3. Диаграмма рендерится как самодостаточный SVG через railroad-diagrams.

В отчёте также перечислены:

  • Каждая группа захвата с номером и именем (если есть).
  • Каждый флаг с пояснением простым языком (g, i, m, s, u, y, d, x).

Читайте диаграмму слева направо. Это особенно полезно для преподавания regex, документирования сложных шаблонов и обнаружения форм катастрофического возврата (глубоко вложенные квантификаторы) до продакшена.

Ограничения: парсер покрывает синтаксис JavaScript/PCRE, включая классы символов, якоря, обратные ссылки, именованные группы, заглядывание (отмечается) и ограниченные/неограниченные квантификаторы. Некоторые расширенные возможности PCRE (рекурсивные шаблоны, \K, branch reset, условные группы) не поддерживаются и дают ошибку разбора.

Примеры результатов

2 Примеры

Визуализировать regex для URL

Частый паттерн URL в виде железнодорожной диаграммы с якорями, группами и опциональным портом.

Railroad diagram with capture groups and flag explanation.
Показать параметры ввода
{ "pattern": "^(https?)://([^/:]+)(:\\d+)?(/.*)?$", "flags": "i" }

Визуализировать шаблон захвата email

Простая группа захвата email с границами слова в виде диаграммы.

Email pattern railroad diagram with capture group.
Показать параметры ввода
{ "pattern": "\\b(\\w+[\\w.-]*@\\w+[\\w.-]*\\.\\w+)\\b", "flags": "gi" }

Ключевые факты

Категория
Разработка и Web
Типы входных данных
text
Тип результата
html
Покрытие примерами
4
API доступен
Yes

Обзор

Этот инструмент преобразует регулярные выражения JavaScript и PCRE в интерактивные железнодорожные диаграммы в формате SVG. Он наглядно визуализирует литералы, группы захвата, альтернативы и квантификаторы, помогая быстро понять структуру сложных шаблонов без необходимости расшифровывать метасимволы вручную.

Когда использовать

  • •При документировании сложных регулярных выражений в технической документации или вики-проектах.
  • •Для отладки запутанных шаблонов с вложенными группами захвата и ветвлениями.
  • •При обучении коллег или студентов синтаксису регулярных выражений с помощью наглядных схем.

Как это работает

  • •Вы вводите регулярное выражение в поле ввода и при необходимости указываете флаги.
  • •Парсер преобразует строку шаблона в абстрактное синтаксическое дерево (AST).
  • •Каждый элемент дерева сопоставляется с графическим примитивом: литералы становятся блоками, альтернативы — ветвлениями, а квантификаторы — циклами.
  • •Инструмент генерирует готовую SVG-диаграмму, нумерует группы захвата и выводит расшифровку флагов.

Сценарии использования

Визуализация длинных регулярных выражений для разбора URL-адресов или путей файлов.
Проверка корректности вложенных квантификаторов для предотвращения риска катастрофического возврата.
Создание графических схем для презентаций, обучающих материалов и API-документации.

Примеры

1. Визуализация регулярного выражения для URL

Веб-разработчик
Контекст
Разработчик использует регулярное выражение для валидации и разбора URL-адресов на составляющие (протокол, хост, порт, путь).
Проблема
Трудно объяснить коллегам на код-ревью, за что отвечает каждая группа захвата в шаблоне ^(https?)://([^/:]+)(:\d+)?(/.*)?$.
Как использовать
Вставьте шаблон ^(https?)://([^/:]+)(:\d+)?(/.*)?$ в поле ввода, укажите флаг i и запустите визуализацию.
Пример конфигурации
pattern: "^(https?)://([^/:]+)(:\d+)?(/.*)?$", flags: "i"
Результат
Получена SVG-диаграмма, где четко видны четыре последовательные группы захвата, опциональный порт и протокол, а также текстовое описание флага регистронезависимости.

2. Анализ шаблона поиска Email

Системный администратор
Контекст
Администратор настраивает правила фильтрации логов и использует регулярное выражение для поиска адресов электронной почты.
Проблема
Необходимо убедиться, что границы слов и символьные классы в шаблоне настроены верно.
Как использовать
Вставьте регулярное выражение \b(\w+[\w.-]*@\w+[\w.-]*\.\w+)\b в поле ввода и укажите флаги gi.
Пример конфигурации
pattern: "\\b(\\w+[\\w.-]*@\\w+[\\w.-]*\\.\\w+)\\b", flags: "gi"
Результат
Сгенерирована схема, показывающая границы слова, циклы повторения символов внутри имени ящика и домена, а также единую группу захвата для всего адреса.

Проверить на примерах

image, svg, regex
Распространенные Регулярные Выражения
Общепринятые шаблоны регулярных выражений для проверки и сопоставления
title token regex
regex
Альтернативы Шаблонов Regex
Несколько способов написания одного и того же шаблона regex с различными компромиссами
title token regex
regex
Именованные Захватывающие Группы Regex
Коллекция паттернов регулярных выражений, использующих именованные захватывающие группы для извлечения структурированных данных из текста. Именованные группы делают паттерны более читаемыми и поддерживаемыми, присваивая значимые имени захваченным частям.
title token regex
regex
Примеры Замены Regex
Коллекция общих и полезных шаблонов замены regex для преобразования текста и очистки данных
title token regex
regex

Связанные хабы

Инструменты конвертации форматов изображений и анимированного экспорта
Сравните конвертеры JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 и инструменты экспорта анимированных изображений в одном хабе.
Инструменты для очистки, оформления и пакетной подготовки изображений
Соберите в одном хабе инструменты для очистки изображений, обрезки, добавления полей и рамок, пакетного изменения размера и сжатия, водяных знаков и финальной визуальной подготовки.
Инструменты тестирования, линтинга и отладки regex
Сравните regex-тестеры, объяснители, линтеры, сканеры производительности, генераторы шаблонов и предпросмотр замены в одном хабе для отладки и валидации.
Инструменты метаданных изображений, EXIF и очистки приватности
Сравните просмотрщики метаданных, инспекторы EXIF/IPTC/XMP, исправление ориентации, редакторы метаданных и инструменты удаления приватных данных из изображений.

FAQ

Какие стандарты регулярных выражений поддерживаются?

Поддерживается синтаксис в стиле JavaScript и PCRE, включая именованные группы и проверки (lookarounds).

Можно ли сохранить полученную диаграмму?

Да, диаграмма рендерится в векторном формате SVG, который можно скопировать или использовать непосредственно в HTML.

Поддерживаются ли сложные конструкции вроде рекурсивных шаблонов?

Нет, расширенные возможности PCRE (рекурсия, \K, условные группы) не поддерживаются и вызовут ошибку парсинга.

Как на диаграмме обозначаются группы захвата?

Группы захвата выделяются рамками с указанием их порядкового номера или имени.

Зачем нужна расшифровка флагов?

Она помогает быстро понять глобальное поведение регулярного выражения (например, регистронезависимость или многострочный поиск) без обращения к справочникам.

Документация API

Конечная точка запроса

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

Параметры запроса

Имя параметра Тип Обязательно Описание
pattern text Да -
flags text Нет -

Формат ответа

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

Документация MCP

Добавьте этот инструмент к конфигурации сервера MCP: 

{
  "mcpServers": {
    "elysiatools-regex-railroad-diagram-visualizer": {
      "name": "regex-railroad-diagram-visualizer",
      "description": "Преобразует регулярное выражение в SVG-железнодорожную диаграмму (синтаксическое дерево), показывая литералы, группы, альтернативы и повторения, с нумерацией групп захвата и пояснением флагов",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=regex-railroad-diagram-visualizer",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Вы можете объединять несколько инструментов, например: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, максимум 20 инструментов.

Если вы столкнулись с проблемами, пожалуйста, свяжитесь с нами по адресу [email protected]