Regex-Eisenbahndiagramm-Visualisierer

Rendert einen regulären Ausdruck als SVG-Eisenbahndiagramm (Syntaxbaum), das Literale, Gruppen, Alternativen und Wiederholungen zeigt, mit Nummerierung der Capture-Gruppen und Flag-Erklärungen

Füge einen regulären Ausdruck im JavaScript/PCRE-Stil ein und erhält ein Eisenbahndiagramm (Syntaxbaum), das die Struktur offensichtlich macht — viel leichter lesbar als eine Wand von Metazeichen.

Funktionsweise:

  1. Das Pattern wird mit der Bibliothek ret in einen AST zerlegt.
  2. Jeder AST-Knoten wird auf eine Eisenbahndiagramm-Primitive abgebildet: Literale werden abgerundete Boxen, Gruppen werden mit ihrem Capture-Index (und Name) beschriftet, Alternativen verzweigen in eine Auswahl, und Quantoren (*, +, ?, {n,m}) werden als Rückführungspfeile gerendert.
  3. Das Diagramm wird als in sich geschlossenes SVG via railroad-diagrams gerendert.

Der Bericht listet zudem:

  • Jede Capture-Gruppe mit Nummer und Name (falls vorhanden).
  • Jedes Flag mit einer Erklärung in Klartext (g, i, m, s, u, y, d, x).

Lies das Diagramm von links nach rechts. Besonders nützlich zum Lehren von Regex, zum Dokumentieren komplexer Patterns und zum Erkennen katastrophaler Rückverfolgung (verschachtelte Quantoren) vor dem Produktivbetrieb.

Einschränkungen: Der Parser deckt JavaScript/PCRE-Syntax einschließlich Zeichenklassen, Anker, Rückreferenzen, benannten Gruppen, Lookaround (gemeldet) und beschränkte/unbeschränkte Quantoren ab. Einige erweiterte PCRE-Funktionen (rekursive Patterns, \K, Branch-Reset, Conditional) werden nicht unterstützt und geben einen Parse-Fehler.

Beispielergebnisse

2 Beispiele

Ein URL-Regex visualisieren

Ein gängiges URL-Pattern als Eisenbahndiagramm mit Anker, Gruppen und optionalem Port.

Railroad diagram with capture groups and flag explanation.
Eingabeparameter anzeigen
{ "pattern": "^(https?)://([^/:]+)(:\\d+)?(/.*)?$", "flags": "i" }

Ein Email-Capture-Pattern visualisieren

Eine einfache Email-Capture-Gruppe mit Wortgrenzen als Diagramm.

Email pattern railroad diagram with capture group.
Eingabeparameter anzeigen
{ "pattern": "\\b(\\w+[\\w.-]*@\\w+[\\w.-]*\\.\\w+)\\b", "flags": "gi" }

Wichtige Fakten

Kategorie
Entwicklung & Web
Eingabetypen
text
Ausgabetyp
html
Sample-Abdeckung
4
API verfügbar
Yes

Überblick

Der Regex-Eisenbahndiagramm-Visualisierer übersetzt komplexe reguläre Ausdrücke im JavaScript- und PCRE-Stil in übersichtliche, grafische SVG-Syntaxdiagramme. Durch die visuelle Darstellung von Literalen, Capture-Gruppen, Alternativen und Quantoren wird die Funktionsweise von Suchmustern sofort verständlich und lässt sich einfacher analysieren sowie dokumentieren.

Wann verwenden

  • •Zur verständlichen Dokumentation komplexer regulärer Ausdrücke in technischen Spezifikationen oder Team-Wikis.
  • •Zur Fehlersuche und Analyse verschachtelter Regex-Muster, um logische Fehler oder Performance-Probleme frühzeitig zu erkennen.
  • •Für Schulungszwecke und Code-Reviews, um die genaue Funktionsweise von Suchmustern visuell zu vermitteln.

So funktioniert es

  • •Geben Sie Ihren regulären Ausdruck im Eingabefeld ein und fügen Sie optional die gewünschten Flags (wie g, i oder m) hinzu.
  • •Der Parser zerlegt das Pattern mithilfe der ret-Bibliothek in einen abstrakten Syntaxbaum (AST).
  • •Jeder AST-Knoten wird in ein passendes Diagramm-Element übersetzt, wobei Literale als Boxen, Alternativen als Verzweigungen und Quantoren als Schleifen dargestellt werden.
  • •Das Tool generiert ein interaktives SVG-Diagramm und listet alle erkannten Capture-Gruppen sowie Flag-Erklärungen übersichtlich auf.

Anwendungsfälle

Visualisierung eines komplexen URL-Parsers zur Überprüfung aller optionalen Pfade und Port-Angaben.
Analyse von E-Mail-Validierungsmustern zur Identifizierung von redundanten Zeichenklassen oder fehlerhaften Wortgrenzen.
Erstellung von verständlichen Grafiken für Entwickler-Dokumentationen, um reguläre Ausdrücke ohne mühsames Entziffern von Metazeichen zu erklären.

Beispiele

1. Visualisierung eines URL-Parsers

Backend-Entwickler
Hintergrund
Ein Entwickler muss eine Regex zur Validierung von URLs in einer API-Dokumentation verständlich erklären.
Problem
Die Regex ^(https?)://([^/:]+)(:\d+)?(/.*)?$ ist für andere Teammitglieder schwer lesbar.
Verwendung
Geben Sie das URL-Pattern in das Eingabefeld ein und setzen Sie das Flag i für Case-Insensitivity.
Beispielkonfiguration
pattern: ^(https?)://([^/:]+)(:\d+)?(/.*)?$, flags: i
Ergebnis
Es wird ein SVG-Diagramm erzeugt, das die Protokoll-Auswahl, die Host-Gruppe, den optionalen Port und den Pfad als klare, verzweigte Pfade darstellt.

2. Analyse eines E-Mail-Erkennungsmusters

QA-Ingenieur
Hintergrund
Ein Tester möchte sicherstellen, dass ein regulärer Ausdruck für E-Mail-Adressen Wortgrenzen korrekt berücksichtigt.
Problem
Prüfung der genauen Funktionsweise von Wortgrenzen und Capture-Gruppen im Pattern \b(\w+[\w.-]*@\w+[\w.-]*\.\w+)\b.
Verwendung
Tragen Sie das E-Mail-Pattern ein und aktivieren Sie die Flags gi.
Beispielkonfiguration
pattern: \b(\w+[\w.-]*@\w+[\w.-]*\.\w+)\b, flags: gi
Ergebnis
Das Diagramm zeigt die Wortgrenzen-Anker am Anfang und Ende sowie die innere Capture-Gruppe für die E-Mail-Struktur.

Mit Samples testen

image, svg, regex
Häufige Reguläre Ausdrücke
Häufig verwendete reguläre Ausdrucksmuster für Validierung und Übereinstimmung
title token regex
regex
Regex-Muster Alternativen
Mehrere Möglichkeiten, dasselbe Regex-Muster zu schreiben mit unterschiedlichen Kompromissen
title token regex
regex
Benannte Capture-Gruppen von Regex
Sammlung von Regex-Mustern, die benannte Capture-Gruppen verwenden, um strukturierte Daten aus Text zu extrahieren. Benannte Gruppen machen Muster lesbarer und wartbarer, indem sie aussagekräftige Namen den erfassten Teilen zuweisen.
title token regex
regex
Regex-Ersetzungsbeispiele
Sammlung häufiger und nützlicher Regex-Ersetzungsmuster für Texttransformation und Datenbereinigung
title token regex
regex

Verwandte Hubs

Tools fur Bildformat-Konvertierung und animierten Export
Vergleiche Bildkonverter fur JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 und animationsgeeignete Exporte in einem Hub.
Werkzeuge fur Bildbereinigung, Rahmen und Batch-Vorbereitung
Bunde Bildbereinigung, Beschneiden, Padding, Rahmen, Batch-Resize/Kompression, Wasserzeichen und visuelle Veredelung in einem Hub fur Asset-Vorbereitung.
Tools fur Regex-Tests, Linting und Match-Debugging
Vergleiche Regex-Tester, Erklarer, Linter, Performance-Scanner, Pattern-Generatoren und Replacement-Previews in einem Hub fur Debugging- und Validierungs-Workflows.
Bildmetadaten-, EXIF- und Datenschutz-Bereinigungs-Tools
Vergleichen Sie Bildmetadaten-Viewer, EXIF/IPTC/XMP-Inspektoren, Ausrichtungsfixes, Metadaten-Editoren und Datenschutz-Bereinigungstools für Foto-Publishing-Workflows.

FAQ

Welche Regex-Dialekte werden unterstützt?

Das Tool unterstützt JavaScript- und PCRE-kompatible reguläre Ausdrücke, einschließlich Capture-Gruppen, Lookarounds und Quantoren.

Können komplexe PCRE-Features wie rekursive Muster visualisiert werden?

Nein, erweiterte Features wie rekursive Patterns, \K oder Branch-Resets werden nicht unterstützt und führen zu einem Parse-Fehler.

Wie lese ich das generierte Eisenbahndiagramm?

Das Diagramm wird von links nach rechts gelesen. Verzweigungen stellen Alternativen dar, während Schleifen Wiederholungen (Quantoren) symbolisieren.

Werden benannte Capture-Gruppen im Diagramm angezeigt?

Ja, das Tool nummeriert alle Capture-Gruppen und zeigt auch die Namen von benannten Gruppen direkt im Diagramm und im Bericht an.

In welchem Format wird das Diagramm ausgegeben?

Das Diagramm wird als direkt im Browser gerendertes, hochauflösendes SVG-Bild ausgegeben.

API-Dokumentation

Request-Endpunkt

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

Request-Parameter

Parameter-Name Typ Erforderlich Beschreibung
pattern text Ja -
flags text Nein -

Antwortformat

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

MCP-Dokumentation

Fügen Sie dieses Tool zu Ihrer MCP-Server-Konfiguration hinzu: 

{
  "mcpServers": {
    "elysiatools-regex-railroad-diagram-visualizer": {
      "name": "regex-railroad-diagram-visualizer",
      "description": "Rendert einen regulären Ausdruck als SVG-Eisenbahndiagramm (Syntaxbaum), das Literale, Gruppen, Alternativen und Wiederholungen zeigt, mit Nummerierung der Capture-Gruppen und Flag-Erklärungen",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=regex-railroad-diagram-visualizer",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Sie können mehrere Tools verketten, z.B.: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, maximal 20 Tools.

Wenn Sie auf Probleme stoßen, kontaktieren Sie uns bitte bei [email protected]