Programming languages syntax visualizer with Abstract Syntax Tree & Node Coordinates Matrix representations
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.
- Node Coordinates Matrix
- Sharing snippets
- Nodes highlighting
- Restoring written code on page reopen
- JavaScript language support
Open Syntax Visualizer in the browser and just type the code into the editor and see the result! Pretty straightforward, right?
Demo.mov
You can clone and run project locally:
git clone https://github.com/evermake/syntax-visualizer.git
cd syntax-visualizer
npm install
npm run devgit, nodejs (tested on version 16) and npm are required.
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.
- 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
[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].
The project is licensed under a MIT license.