Add regex-to-mermaid

[tayles]

regex-to-mermaid is a TypeScript library and CLI tool to visualize regular expressions as Mermaid flowchart diagrams.

Mermaid is quickly becoming the de-facto "diagrams as code" library of the web, thanks to its simplicity and portability. It has many integrations, including GitHub, making this a great way to share and explain regular expressions in readme files, pull requests comments and code reviews.

These diagrams are directly embeddable in markdown, and can be exported as PNG or SVG. For example, here's one created by this tool:

graph LR
  accTitle: "Regex: ^(?<protocol>https?:\\/\\/)?(?<domain>[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,})(?<path>\\/.*)?$"
  accDescr: "Generated with regex-to-mermaid@1.0.4"

  %% Nodes
  start@{ shape: f-circ };
  fin@{ shape: f-circ };
  assertion_1("^<br><i>Begins with</i>"):::assertion;
  literal_1("http"):::literal;
  literal_2("s<br><i>Optional</i>"):::literal;
  literal_3("://"):::literal;
  char_class_1("Any lowercase<br>Any uppercase<br>Any digit<br>. -<br><i>One or more</i>"):::char-class;
  literal_4("Any character"):::literal;
  char_class_2("Any lowercase<br>Any uppercase<br><i>2 or more</i>"):::char-class;
  literal_5("/"):::literal;
  literal_6("Any character<br><i>Zero or more</i>"):::literal;
  assertion_2("$<br><i>Ends with</i>"):::assertion;

  %% Subgraphs
  subgraph named_capture_1 ["#1 protocol <i>Optional</i>"]
    literal_1
    literal_2
    literal_3
  end

  subgraph named_capture_2 ["#2 domain"]
    char_class_1
    literal_4
    char_class_2
  end

  subgraph named_capture_3 ["#3 path <i>Optional</i>"]
    literal_5
    literal_6
  end

  %% Edges
  start --- assertion_1;
  assertion_1 --- literal_1;
  literal_1 --- literal_2;
  literal_2 --- literal_3;
  literal_3 --- char_class_1;
  char_class_1 --- literal_4;
  literal_4 --- char_class_2;
  char_class_2 --- literal_5;
  literal_5 --- literal_6;
  literal_6 --- assertion_2;
  assertion_2 --- fin;

  %% Styles
  %% Node Styling
  classDef assertion fill:#B6D7A8,stroke:#93C47D,color:#000000;
  classDef literal fill:#F9CB9C,stroke:#E69138,color:#000000;
  classDef char-class fill:#B4A7D6,stroke:#8E7CC3,color:#000000;

  %% Group Styling
  classDef named-capture fill:#D9EAD3,stroke:#93C47D,color:#000000;

  %% Apply Group Classes
  class named_capture_1,named_capture_2,named_capture_3 named-capture;

Loading

Regex Vis does a similar (awesome) job, but isn't as easily shareable or customisable.

[slevithan]

Cool project! I'm very happy to add it here.

However, the Visualizers section you added the link to was meant to be for tools that people can use directly, not something they use through code.

So, I'd recommend moving the link to the JavaScript regex libraries > Regex processors section. The alternative is to keep it under Visualizers, but move it into the collapsed "Notable mentions" section.