Pick a path: paste code and watch it run, browse data structures, or step through algorithms with synchronized JavaScript, Python, Java, and C++.
Write code on the left using one of the provided classes - Stack, Queue, LinkedList, DoublyLinkedList, BST, Heap, Trie, HashTable, or Graph - then press Play.
All classes share these reads: .size (property), .isEmpty(), .clear(). Methods marked * record a step you can step through.
Java mode: write idiomatic Java - generics (Stack<Integer>), System.out.println, for (int x : arr), etc. The transpiler also maps HashMap→HashTable, PriorityQueue→Heap, ArrayDeque→Queue, TreeMap/TreeSet→BST, ArrayList→LinkedList.
new Stack(name?)new Queue(name?)new LinkedList(name?)new DoublyLinkedList(name?)new BST(name?)new Heap(name?)new Trie(name?)new HashTable(name?, buckets=7)new Graph(name?, directed=false)log(label, value?)Track your progress, manage bookmarks, and customize your visualization preferences.
AlgoVision
Interactive algorithm and data structure visualizer. Learn by watching algorithms come to life.
Create a sandbox project to write code and visualize variables, call stack, and heap memory in real-time.
Preparing code editor and visualizer.
LLD: write classes in Java-style syntax. HLD: declare components and connections in a tiny DSL. Show syntax ->
LLD (Low-Level Design)
class Name { } | Define a class |
String name; | Add a field |
+ method(): Type | Public method |
- method(): Type | Private method |
# method(): Type | Protected method |
extends | Inheritance (draws arrow) |
OtherClass field; | Composition (draws arrow) |
class Car extends Vehicle {
int seats;
Engine engine;
+ start(): void
}HLD (High-Level Design)
[type] Name | Define a component |
A -> B | Connect A to B |
A -> B : label | Connect with a label |
// comment | Add a comment |
Component types:
[client] | Browser, mobile app |
[service] | Backend service / API |
[database] | SQL / NoSQL store |
[cache] | Redis, Memcached |
[queue] | Kafka, RabbitMQ |
[lb] | Load balancer / gateway |
[cdn] | Content delivery network |
[storage] | Object / file storage |
[ml] | ML / analytics service |
[external] | Third-party service |
[client] Web App
[lb] Load Balancer
[service] API
[cache] Redis
Web App -> Load Balancer : HTTPS
Load Balancer -> API : HTTP
API -> Redis : cacheThis section is under construction.