An intuitive canvas overlay tool to sketch algorithms, map data structures, and dry-run matrices directly inside your favorite competitive coding environments.
LeetDraw is a lightweight, powerful browser extension designed for competitive programmers and developers. It injects an intuitive digital whiteboard overlay directly onto major coding platforms, allowing you to sketch algorithms, map out data structures, create dynamic execution tables, and visualize complex logic right alongside your code editor.
No more switching between tabs or looking for physical scratch paper. Brainstorm, draw, and code all in one view.
LeetDraw seamlessly activates on the following platforms:
The extension injects a sleek, modern toolbar at the bottom of your workspace equipped with your exact visualization toolkit:
Freehand drawing for quick diagrams, trees, and graphs.
Precise stroke erasing to modify your sketches.
Draw straight structural connections cleanly.
Perfect for linking nodes, drawing pointers, or mapping graph steps.
Frame specific logic blocks or code zones.
Great for highlighting network hubs or tree elements.
Input typewritten variables, state values, or inline logs.
Temporary highlight beam tracking active executions.
Dynamically generate matrix grids to easily track your multi-dimensional Dynamic Programming (DP) state transitions.
Quick state-stack navigation to rectify quick sketching slip-ups.
Captures and exports an instant workspace snapshot containing your code background overlayed with your drawings.
Easily wipe the viewport completely down to a clean slate.
Since LeetDraw is currently in active development and not yet hosted on the Chrome Web Store, you can easily load it locally as an unpacked extension on Chromium-based browsers (Chrome, Edge, Brave, Opera).
Clone this repository to your local machine:
git clone https://github.com/yuki-sf/LeetDraw.git(Alternatively, click Code > Download ZIP at the top right of this page and extract the files).
- Open your browser and navigate to the Extensions management page:
- Chrome / Brave: Type
chrome://extensionsin the URL bar - Edge: Type
edge://extensionsin the URL bar
- Chrome / Brave: Type
- Toggle the "Developer mode" switch on (usually found in the top right-hand corner).
- Click the "Load unpacked" button in the top left.
- Select the project folder containing your extension files (the root folder where your
manifest.jsonresides).
LeetDraw is now ready! Navigate to any supported problem link (e.g., a LeetCode problem), and the drawing canvas will appear automatically.
- Frontend Framework: HTML5 Canvas Context (2D), CSS3, JavaScript (ES6+)
- Extension Structure: Web Extensions Core API (Manifest V3)
Contributions, issues, and feature requests are welcome! Feel free to check the issues page if you have optimization proposals or custom canvas features.
This project is MIT licensed.