DrawRacket4Me icon indicating copy to clipboard operation
DrawRacket4Me copied to clipboard

DrawRacket4Me draws trees and graphs from your code, making it easier to check if the structure is what you wanted.

What is it?

Hate Racket syntax? Have a ton of test cases for graphs and trees? We all know it's a waste of time drawing the diagrams out to verify whether our code is correct. **But don't worry, *DrawRacket4Me* got your back!**
Simply copy and paste your code from DrRacket into DrawRacket4Me, it will automatically draw out the structure for you, whether it's trees with a list of children, or graphs with cycles.

Here's an Example:

How to Run it?

Step 1:

Just `git clone` this repo and double click `start.html`, which will run the file on your favorite browser.

Step 2:

Then you'll be prompted to select the type of diagram you want to draw. Just simply choose one of "N-children trees", "Binary Trees" or "Graphs", then the continue button will immediately appear.

Step 3:

Next just copy and paste your code from DrRacket! You don't have to even worry about the formatting, just leave it as it is. If you've selected either Binary/N-Children Trees, you are required to input the identifier name.

Step 4:

DrawRacket4Me automatically opens a new window and draws diagram for you

Step 5:

Need to draw another one? Just click the faint icon at the top left corner and you'll be redirected to home.

Some notes (if clarification is needed)

1. What does N-Children Trees Mean?
N-Children Trees just means trees with a list of children, instead of only two.

2. Can I use N-Children Trees for Binary Trees?
The difference between Binary and N-Children Trees is that binary trees account for "empty" slots (meaning it will distinguish between left and right", while N-Children will just put all of its children in order from left to right. Therefore, if N-Children has only 1 child, it will put it directly under the parent, whereas for Binary Trees, it will look at whether it should be placed left or right. So your choice!

3. What if it doesn't draw for me? Or the diagram looks messed up? The likelihood is that there's some syntax error in your code, probably due to one of your bracket or a missing node. However I'm still an amateur programmer and this is one of my first projects. So feel free to contact me or even contribute to this repo if there is something wrong :). I would love to fix the problem!

Here comes some technical stuff... How is it built?

Run Time: O(n^2)

"n" denotes the number of nodes.

General Structure

The entire system comprises of only 5 files: `start.html`, `draw.html`, `logic.js`, `binary.js` and `graph.js`. * `start.html`: basically the home page of the system. It's separated into two parts: html and an in-file `