4 ms·
Show HN: Diagramming tool that helped me understand codebases much faster
I built Code Canvas, a canvas where we create diagrams and link their components to source code in a two-way mapping:
1. Click on the diagram component to reveal the underlying source code
2. Click on the source code block to reveal which functionality it serves in the big picture on the diagram
- The app also has a simulations feature where we can create tutorials and runtime simulations directly on the diagram.
- The diagram stays in sync with source code changes. It has a companion scanner that runs on new pull requests to ensure the relevant components of the diagram are updated before merging the PR.
This app allowed me to understand code much faster and also offload the mental fatigue of trying to reason up the big picture by browsing through endless lines of code.
I recommend clicking the "Learn More" button for a 1-pager summary before you hit the demo button.
- App link: https://code-canvas.com https://code-canvas.com
- Discord server: https://discord.com/invite/t3ezMyMPqr https://discord.com/invite/t3ezMyMPqr
After the demo go back to the main page to load your repository and start building your diagram!
Nasser
-------
P.S. This is the first time I am putting the app publicly, so any feedback is appreciated!
- marathon-pro 3y ago[flagged]
- QuantumWasp 3y agoThis feels very promising. What codebase size is this meant for?
- Abdulnaser97 3y agoI have tested it on larger codebases, it handled it with no issues. For example, here's facebook/react repo loaded on the app: https://www.code-canvas.com/?session=unauthenticatedGithub&repo=react&owner=facebook&branch=main https://www.code-canvas.com/?session=unauthenticatedGithub&r... Any specific code base in mind?
- jrxd11 3y ago[flagged]
- coder-man 3y ago[flagged]
- Rustykh 3y agoLooks really cool!
- Abdulnaser97 3y agoThank you!
- drostka 3y agoVery very cool! With the linking of diagram to code, how does it handle a rapidly changing codebase?
- Abdulnaser97 3y agoThanks! The diagram stays in sync with source code changes. It has a companion scanner that runs on new pull requests to ensure the relevant components of the diagram are updated before merging the PR. check this for more details: https://pie-crepe-38f.notion.site/What-is-CodeCanvas-cf20cbdf134247cb93bf6366d9055076#4ffaaac53cfe4736a14e13426fd2567e https://pie-crepe-38f.notion.site/What-is-CodeCanvas-cf20cbd... Lmk if you have other questions
- drostka 3y agoOh awesome, didn't see that. Great work :)
- oshalash38 3y agoThis is such a cool concept! I can speak for many devs when I say navigating a new code-base is a pain. As a visual learner myself, I think this has the potential to make my life so much easier as I start on or navigate new repos.
- deleted 3y ago[deleted]