I had slightly more difficulty understanding the diagram than the regex string. But then I'm pretty fluent in regex and that visual representation was new to me.
The big advantage I can see is isolating the visual noise. I'm now surprised that we don't have syntax coloring for regex built into our editors...
Syntax coloring for regex adds noise. When you're reading the non-regex code, having rainbow strings interspersed is not helpful. The best way to approach this problem is to build your regexes in a dedicated regex building environment and then move them into your code at text. Integrating them in-line is not great. (But some people love IDEs, so maybe if you click on a string and have it open up a regex editor...)
The issue with that regex and others I've used is you might be matching on characters that match regex control characters. In that case, it would be nice to know if you're looking at a control character or a properly escaped value. Two colors would be sufficient.
But I agree a full regex builder sort of makes that entirely moot.
That's such a weird way to represent the +, wouldn't it be better to say 'One or more of' or 'At least one of' instead of 'One of' with the loop? I don't see the value of the loops in that expression.
/^[a-zA-Z0-9.!#$%&’+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)$/
Vs.
https://regexper.com/#%2F%5E%5Ba-zA-Z0-9.!%23%24%25%26%E2%80...