Turn your codes into
From codes to diagrams and from diagrams to codes, all in one place.
How it works
Install VSCode extension
From the marketplace or directly from your VSCode
Open the canvas
Use split screen to see both of your codes and diagrams at the
Select some codes, snip them, and the diagrams
will be automatically created
Diagram & Codes
No more switching context
You can see both of your codes and diagrams at the same time
Auto code formatting and highlighting
We optimize to make your code look good in the diagram
192 languages supported
Highlight your code in any language you want
Jump back to your code from the diagram
Click on the diagram and it will open the code file for you
When it comes to color themes, everyone has their own preferences. So we
have made sure that you can choose from a wide range of color themes for
Share it with your team
Just copy the diagram link and share it with your team.
Great for code review, great for pair programming.
Below is a live diagram built from CodeDiagram's codebase itself!
Get started in minutes
We're now open for early access!