Jeder Bestandteil des Patterns wird als farbiger Knoten dargestellt; Verbindungen zeigen die Reihenfolge.
| Farbe | Bedeutung |
|---|---|
| Blau | Literal-Zeichen |
| Lila | Escape-Sequenzen wie \d, \w |
| Grün | Anker (^, $, \b …) |
| Orange | Zeichenklassen |
| Rot | negierte Zeichenklassen |
| Gestricheltes Rechteck | Gruppe (Capturing/Named/Lookaround) |
| Orange Pille unter Knoten | Quantifier (Mouseover für Klartext) |
| Grüner / roter Kreis | Start- / End-Anker des Diagramms |
In der App ist jeder Knoten und jede Gruppen-Box klickbar — ein Detail-Popover zeigt Titel, Syntax, Erklärung, ein Beispiel und einen Link in das passende Hilfe-Topic.