CodeDiagram logo dark

Understand complex codebase faster with CodeDiagram

The visual note-taking tool inside your VSCode

Install VSCode Extension
free, local-first, built for Devs
CodeDiagram logo dark
CodeDiagram usage
+ 1200
Diagrams created
+ 25K
Code Snippets created
How it works

Codes to Diagrams in 3 steps

Step 1
Install VSCode extension
From the marketplace or directly from your VSCode
Step 2
Creat a ".codediagram" file
Split screen to see both codes and diagrams at the same time
Step 3
Snip Codes!
Select some codes, snip them, and the diagrams will be automatically created
Codes and diagrams side by side
How it helps

Speed Up your Debugging process

Debug with pen and paper

You've probably done this before—when faced with a complex code base, you sketch out diagrams to make sense of it all.

Debug with Code Diagram

With CodeDiagram, you can do this faster, and it's more convenient to share and track your diagrams.

Our Features

Packed With Helpful Features

Diagrams & Codes side-by-side

  • No more switching context
  • Auto code formatting and highlighting
  • Jump back to codes from diagrams
show diagram and code side by side

Share as public link/Export image

  • Share and view diarams outside VSCode
  • Share diagram as a local file for your colleagues
  • Export the diagram as PNG
commmit diagram files to git

Local storage and Cloud storage

Store diagrams as local files or Store on our cloud, it's up to you.
We support both modes

Multiple Color Themes

Choose from a wide range of color themes that matches your preferences
multiple color themes

Our highlighter supports 192 languages

1c, abnf, accesslog, actionscript, ada, angelscript, apache, applescript, arcade, arduino, armasm, xml, asciidoc, aspectj, autohotkey, autoit, avrasm, awk, axapta, bash, basic, bnf, brainfuck, c, cal, capnproto, ceylon, clean, clojure, clojure-repl, cmake, coffeescript, coq, cos, cpp, crmsh, crystal, csharp, csp, css, d, markdown, dart, delphi, diff, django, dns, dockerfile, dos, dsconfig, dts, dust, ebnf, elixir, elm, ruby, erb, erlang-repl, erlang, excel, fix, flix, fortran, fsharp, gams, gauss, gcode, gherkin, glsl, gml, go, golo, gradle, graphql, groovy, haml, handlebars, haskell, haxe, hsp, http, hy, inform7, ini, irpf90, isbl, java, javascript, jboss-cli, json, julia, julia-repl, kotlin, lasso, latex, ldif, leaf, less, lisp, livecodeserver, livescript, llvm, lsl, lua, makefile, mathematica, matlab, maxima, mel, mercury, mipsasm, mizar, perl, mojolicious, monkey, moonscript, n1ql, nestedtext, nginx, nim, nix, node-repl, nsis, objectivec, ocaml, openscad, oxygene, parser3, pf, pgsql, php, php-template, plaintext, pony, powershell, processing, profile, prolog, properties, protobuf, puppet, purebasic, python, python-repl, q, qml, r, reasonml, rib, roboconf, routeros, rsl, ruleslanguage, rust, sas, scala, scheme, scilab, scss, shell, smali, smalltalk, sml, sqf, sql, stan, stata, step21, stylus, subunit, swift, taggerscript, yaml, tap, tcl, thrift, tp, twig, typescript, vala, vbnet, vbscript, vbscript-html, verilog, vhdl, vim, wasm, wren, x86asm, xl, xquery, zephir

Our Wall of Love ❤️

These are the stories of some of our early users about their experience of using CodeDiagram

There's nothing like it for my goal: to onboard myself to a legacy codebase utilizing multiple languages by documenting its functionality and diagramming its dependencies simultaneously with an easy-to-learn out-of-the-box solution. Fantastic!

Aaron Lemmer

I have been able to use this tool to visualize the relationships between the various components of a large and complex codebase that is entirely without documentation. It has literally made an intractable situation suddenly tractable. The user interface is simple, and it doesn't take long to get the hang of the workflow. I'd like to give a big thanks to the author for creating such a helpful visualization tool, it's off to a great start.

Robert Ashe

The extension is excellent, it meets what I was looking for, it has saved me a lot of time and it has helped me with my project, which I have to present this week. I am very grateful. It will definitely be one of my favorite extensions.

Felipe Acuna Cornejo

Amazing VSCode extension and very helpful. A big thanks . I think it would be better if we see this rolled somewhere integrated with Github may be as their extension within github itself. Then we could snip it right from there without cloning locally & then using this extension. Please make this possible, if your team has a bandwidth. Otherwise, this extension is already phenomenol. Discovered late in my 8 years of coding.

dalvath3700

Really glad I found this, very useful, beautiful, and functional right out of the box!

Richard Beaver

Great concept, and looks great too!

Alessandro Benassi

That is an amazing tool to visualize our process flow. Thank you to make this tool

hxtruong6

I'm really happy to have found this tool; it's very helpful!

Huỳnh Gia Hào

Get started in minutes

We're now open for early access!
Install VSCode Extension