正規表現エンジンの内部状態をインタラクティブに可視化するツールを作ってみました。
正規表現エンジンの勉強をしていると、内部状態遷移（NFA）の部分で躓く人が一定数いると思うのですが、このツールで挙動を視覚的に確認しながら進めると理解が早いと思います。
以下から試せます。
https://snoguchi.github.io/visualizing-regexp-engine/dist/
なお使える正規表現は基本演算子のみなので注意してください。
余談
正規表現エンジンについて勉強したい人には『正規表現エンジンを作ろう』という記事がおススメです。
連載で少し長めですが基礎から実装まで丁寧に解説されています。
今回の可視化ツールで利用した正規表現エンジンも、この記事に掲載されているPythonのサンプルコードをTypeScriptに写経したものを使っています。
またステートマシンの描画にはViz.jsというGraphviz系のライブラリを利用しました。
いくつかグラフ系のライブラリを試してみたのですが、ステートマシンの可視化に関しては手軽さと綺麗さでGraphviz系が優れているように思います。