PlantUML Regex Diagram Syntax Guide

What is a Regex Diagram?

A Regular Expression (Regex) Diagram (also known as a Syntax Diagram or Railroad Diagram) is a visual representation of a regular expression pattern. It translates complex, cryptic regex strings into an intuitive flow diagram that shows start-to-finish execution paths, character matching rules, optional groups, loops, and branching choices. With VPasCode, you can write concise PlantUML regex scripts to automatically render clean, interactive railroad diagrams for documentation, code reviews, and technical specifications without drawing connectors by hand.

Core Syntax Guide: Elements and Constructs

Building a Regex Diagram in VPasCode uses regex block definitions wrapped inside standard @startregex and @endregex block boundaries.

1. Literal Characters and Sequences

Represent exact string matches by placing text directly or inside quotes within the regex block:
@startregex
"https://"
@endregex

2. Character Classes and Sets

Define allowed character ranges or specific sets using standard bracket notation [...] or predefined classes:
@startregex
[a-zA-Z0-0]
@endregex

Pro Tip: Use character ranges like [0-9] for numeric digits or [a-z] for lowercase alphabetic inputs to render clean single-box matching constraints.

3. Quantifiers and Repetition Loops

Represent optional elements, zero-or-more repeats, or one-or-more loops using standard quantifiers (?, *, +, or {n,m}):
@startregex
"http" "s"? "://"
@endregex

4. Alternation and Grouping

Represent branching choices using the pipe operator (|) or parenthesized groups (...) to visualize decision splits in the execution path:
@startregex
("com" | "org" | "net")
@endregex


Best Practices for Clean Layouts

  • Group Sub-Patterns: Use parentheses (...) to logically cluster related tokens so alternative execution paths branch cleanly.
  • Quote Special Characters: Always wrap literal punctuation symbols (like ".", "@", or ":") in double quotes to prevent syntax conflicts.
  • Break Complex Regex into Modules: Test and build individual sub-patterns (such as domain names or protocol prefixes) step by step.

Real-World PlantUML Regex Diagram Examples

Copy and paste these blueprints directly into your VPasCode editor panel to see them render in real time.

Example 1: Email Address Validator Pattern

This blueprint visualizes a standard email validation regex consisting of a username string, an @ symbol, a domain name, and a top-level domain suffix.
@startregex
title Email Address Validation Pattern

[a-zA-Z0-9._%+-]+ "@" [a-zA-Z0-9.-]+ "." ("com" | "org" | "net" | "io")
@endregex

Syntax Breakdown: This diagram illustrates a sequential matching pipeline starting with one-or-more valid username characters ([a-zA-Z0-9._%+-]+), followed by a literal "@", domain characters, a literal dot, and an alternating selection for top-level domains.

Example 2: URL Endpoint Matcher Pattern

This blueprint models an HTTP/HTTPS web address regex featuring optional protocol prefixes and optional port numbers.
@startregex
title Web URL Endpoint Matcher Pattern

"http" "s"? "://" [a-zA-Z0-9.-]+ (":" [0-9]+)? "/" [a-zA-Z0-9_/-]*
@endregex

Syntax Breakdown: Demonstrates optional branching for "s"? (supporting both HTTP and HTTPS), domain string matching, an optional port group (":" [0-9]+)?, and path routing matches.
Scroll to Top