Motivation and Use Case

Coding complex data structures is difficult, especially due to the lack of visuals. To make learning data structures and algorithms easier, this extension visualizes data structures before and after they are manipulated. Extension currently only supports Java.

Use case: As a beginner in data structures, I want to write a method to reverse a linked list or perform in order search on a BST. I want to visualize the data structure I’m operating on.

Why? Coding Java is in english, which may be difficult for those who do not know english well. Visuals serve as a universal language. This extension will lower the barrier for learning how to code methods that operate on classic data structures. This will allow a beginner programmer to learn how to work with these data structures faster. Although most software engineers don’t use these data structures, the data structures are fundamental to computer science and many university computer science classes teach them.


This project is not complete yet; some parts have not been coded up.


  • Implemented Java method to convert LinkedList to JSON adjacency list representation. JSON file is written to disk.
  • Create example LinkedListNode and Runner classes
  • Starter code from vscode-sample-webview will visualize image in WebView window

To Be Implemented for Minimum Viable Product

  • Write the python script that uses the python interface to graphviz to render a png image of data structure
  • On User command palette execution in VSCode, run python script from extension.ts and open webviews of images. Implementing by changing image file name in extension.ts from sample code
  • Make available to VSCode Extension Store
Share this project: