Seeking Regex Syntax Diagram Tool or Website

Question

I'm still new to reading regular expressions and I'm finding it pretty hard to read. I remember finding a website before that would convert regex into a syntax digram. Though, I've tried several times to find it again; so I'm growing increasingly concerned that I might have just imagined it.

I was wondering if anyone knew of a tool or website that was able to convert regex into a syntax diagram?

Thanks.

Answer 1

check this out: graphrex

Answer 2

You might be interested in http://regexplained.co.uk which converts regular expressions into rail-road diagrams

Answer 3

Some others I've found not mentioned in the accepted answer...

Online tools

Similar to Regexper is Debuggex: In addition to the railroad diagrams there's live evaluation of the Regex against test text. JS, Python and PCRE styles of RE are supported. It's commercial but the free drive-by plan may suffice.

There's also Regulex (but note, no testing against sample text).

RegEx101 offers an interactive debugger view of the matching process if you want to check the RE engine is doing what you think, as well as a verbose explanation of the matches and code generation in a variety of languages.

txt2re takes a different approach: paste in text and select the elements you wish to match on (words, characters etc) and it builds an exemplar RE for you.

Different people learn in different ways: If reading terse REs is the problem, Simple Regex Language may be a useful thing to look at; it uses a plain-english description of the RE, and generates the associated standard RE form as well. As a corollary, if you want to understand an existing standard RE in SRL format, RegexTranslator will convert your RE to SRL, as well as showing matches, groups, etc. compose-regexp is a JavaScript library that offers a similar literate RE syntax.

At the risk of straying slightly away from answering the original question, if you want to dig deeper into how RE engines work you can look at the Finite State Machine that a RE equates to. FSM simulator, for example, generates the FSM and shows interactive matching. To check if your RE can be optimised Regular Expression Gym (by the same author) may be of interest.

There are of course also numerous more basic online tools for testing your regex against sample text as you build it, and seeing what matches (or will be replaced) in real-world situations can be instructive in combination with syntax diagrams. Maybe overkill in answer to the question, but for instance: RegexStorm, FreeFormatter, Regexr (includes a nested visual explanation), and RegEx Pal.

Desktop tools

IDEs and standalone tools that do not offer anything above basic RE testing are not listed; most IDEs have some form of RE tester available.

• For Atom there's regex-railroad-diagram
• For VSCode there's this, based off the Atom package
• For Brackets there's this, again based off the Atom package
• Emacs has the interactive regexp-builder (M-x regexp-builder)

As an aside to learning REs, Regex Crossword is quite fun, and could be used in combination with the visualisations to better understand the operation of the RE state machine. And the same goes for Regex Golf.

Answer 4

Google gives me this: http://crotonresearch.com/graphrex/

Answer 5

Regexper

Regexper is the base from which @ForbesLindesay's Regexplained is forked and so deserves a mention here.

It is worth pointing out that (as of this writing) the two syntax diagram generators differ slightly, yet perhaps significantly in their output. Where Regexper seems to be more terse, Regexplained is — in my opinion — verbose to the extent of being at least redundant and at worst misleading. No disrespect is intended.

An example: A comparison of the following regular expression which matches repeating or non-single digit values from 1–7 separated by commas.

([1-7]{1}),(?:[1-7]{1},)*(?:\1|[^1-7,]|(?:[1-7]{2,}))

Syntax diagram via regexper.com

Syntax diagram via regexplained.co.uk

In the latter, notice how the path for the expression [1-7]{1} loops around with the label "1 times".

At best, this is redundant, but at worst it can mislead the reader to believe that the expression must be matched twice, because the expression must be read through one time before the reader is technically allowed to follow the looped path (see: "Quantifiers" in "Reading Railroad Diagrams").

Here it is implied that you should loop "1 times" after reading the expression.

This notation is apparent in the expressions (?:[1-7]{1},)* and (?:[1-7]{2,}) as well.

At first glance, Regexplained syntax feels right, especially for an expression like (?:[1-7]{2,}), where it initially makes sense to see "2+ times" output for {2,}. In fact, I preferred this notation for a time.

But technically, an expression is read once before the loop path. So the loop should only occur "1+ times" as is correctly indicated in the Regexper syntax diagram.

For this reason, I prefer and recommend Regexper.