Skip to content

evermake/syntax-visualizer

Repository files navigation

🔭 Syntax Visualizer

Programming languages syntax visualizer with Abstract Syntax Tree & Node Coordinates Matrix representations

Table of Contents

Motivation

There are many programmers who want to understand the concept of an Abstract Syntax Tree, and, more importantly, there also people who study compilers and researchers who are interested in the Node Coordinates Matrix representation of the AST. The goal of this project is to create an online tool for generating AST and NCM from code in real time to make the process of exploring these concepts more convenient.

Features

  • Node Coordinates Matrix
  • Sharing snippets
  • Nodes highlighting
  • Restoring written code on page reopen
  • JavaScript language support

Usage

Open Syntax Visualizer in the browser and just type the code into the editor and see the result! Pretty straightforward, right?

Demo

Demo.mov

Run locally

You can clone and run project locally:

git clone https://github.com/evermake/syntax-visualizer.git
cd syntax-visualizer
npm install
npm run dev

git, nodejs (tested on version 16) and npm are required.

Nodes Coordinates Matrix

Node Coordinates Matrix is a representation of "an encoding of the inter-node relationships between nodes in an AST" [1]. In conjunction with the Key operator this concept is necessary for performing parallel computations over an AST: "...permits arbitrary computation over sub-trees of an AST using purely data-parallel array programming techniques" [1].

Please, read this article for more information.

Stack

References

[1] A. W. H. I. University, A. W. Hsu, I. University, and O. M. V. A. Metrics, “The key to a data parallel compiler: Proceedings of the 3rd ACM SIGPLAN International Workshop on libraries, languages, and compilers for Array Programming,” ACM Conferences, 01-Jun-2016. [Online]. Available: https://dl.acm.org/doi/10.1145/2935323.2935331. [Accessed: 03-Jun-2022].

License

The project is licensed under a MIT license.