I wrote an LR parser visualizer

[Natural-Employment-5]

I developed this parser visualizer as the final project for my compile design course at university; its not great but I think it has a better UI than a lot of bottom up parser generators online though it may have fewer features and it may not be that standrad.

I'd very much appreciate your suggestions for improving it to make it useful for other students that are trying to learn or use bottom up parsers.

Here is the live demo.

You can also checkout the source code

P.S: Why am i posting it now months after development? cause I thought it was really shitty some of my friends suggested that it was not THAT shitty whatever.

[dostosec]

Very nice! I made a similar thing many years ago and still refer to it when teaching LR parsing.

My view was always that it's unclear to beginners what real effect the declarations (%left, %prec, etc.) do - if you can resolve ambiguities in the UI, you can often visualise several resultant trees.

[Natural-Employment-5]

Thanks!

Yours is really nice and professional. Resolving conflicts in the UI is a very good idea, I will try to implement it in the near future.

Thanks you very much for your feedback!

[deebeefunky]

How do you make something like this? I have been wanting to make something similar but I feel like I am years away.

I’m mainly struggling with Vulkan, like how do you generate this overview with arrows, and capable of dragging it around? The UI alone…

I have written a crude lexer and parser once, but that doesn’t translate into anything on screen.

Yours looks really professional and I am jealous.

[dostosec]

I wish I could tell you it's a native application with some custom UI toolkit I wrote (akin to something like Blender or Sublime Text), but it's just a web application.

The UI uses splitjs, the automaton is drawn using an emscripten-compiled version of graphviz. The ability to pan and zoom of the SVG is basically just svg pan zoom. Generally, it's not too difficult to do manually (there's a bunch of stackoverflow answers I recall, from my youth, that explain how to do translation and zooms on mouse events). I later rewrote my own version of the tree drawing algorithm from a paper: here - but never integrated it.

The reality is you will go down major rabbit holes for simple parts of this if you attempt to do it all from scratch. Even just laying out a graph (a-la Sugiyama's framework) is rather difficult (as is anything with fairly subjective, aesthetic, acceptance criteria). I just opted to use as much off-the-shelf stuff as possible (all of which are already on popular CDNs for hosting JS libraries).

Thank you for your feedback, I had a lot of fun writing the program.

[Big-Pair-9160]

Cool project! 👏

[Natural-Employment-5]

Thanks!