🔭 Syntax Visualizer

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

Table of Contents

• Motivation
• Features
• Usage
• Demo
• Run locally
• Stack
• License

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
• Restoring written code on page reopen
• Sharing
• Nodes highlighting (soon...)
• Different programming languages support (soon...)

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/InnoSWP/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

• Vue.js as the frontend framework
• Pinia as a state management framework
• TypeScript as the language
• Vite as the build tool
• ESLint as the linter
• Prettier as the formatter
• CodeMirror as the code editor
• "A" grade as the motivation

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.