CodeVisualizer: flowcharts and dependency graphs inside VS Code

Two different visualisations, not one

The extension is described as providing two main visualization capabilities, and treating them as one feature hides the most important thing about it: they are built on different analysis engines and they cover different languages.

The function level side turns an individual function into an interactive flowchart, and the stated capabilities are multi-language parsing, interactive visualisation where you click nodes to jump to the code and zoom and pan, multiple views with a sidebar for quick reference and detachable panel windows for deeper work, semantic analysis of control flow, loops, exceptions and async operations, nine themes, and auto refresh so the chart updates as you edit.

The codebase level side draws the project instead of the function. It gives a dependency graph of import and require relationships between modules, automatic classification of files into Core, Report, Config, Tool and Entry categories, theme integration that follows the editor's dark or light mode, colour coded edges and strokes, zoom and pan for large graphs, and folder hierarchy subgraphs organised by your directory structure.

That category list is a design decision worth noting. Classifying files by name pattern into roles is a heuristic, and it is exactly the kind of thing that becomes wrong quietly in a repository that does not follow the naming conventions the classifier assumes.

The flowchart mode covers eight languages, the dependency graph three

The README has a note on language support that is worth reading before you install anything, because the two modes are not symmetrical.

Function level flowcharts support Python, TypeScript and JavaScript, Java, C++, C, Rust, Go and PHP. That is eight language families, and the earlier marketing line about support for 8+ programming languages refers to this mode.

Codebase dependency visualisation currently supports TypeScript and JavaScript, Python and PHP, with more languages described as coming soon. So a Go or Rust or Java developer gets the function diagrams and nothing at the project level, and a JavaScript developer gets both.

That gap is the single most important practical fact about the extension. If your evaluation is a function level flowchart, the language coverage is generous. If your evaluation is the dependency graph, your project has to be one of three ecosystems or the second half of the extension does nothing for you.

The third line of the note is the other constraint: AI-powered features are available only for function level flowcharts. The two halves of the product are separately limited, and the README is upfront about it, which is more than most extension pages manage.

Tree-sitter for parsing, Mermaid for the picture

The built with section names the stack, and it explains the architecture better than a description would.

TypeScript and Node.js are the host environment, the VS Code API is what the extension talks to, Tree-sitter is the parser, Mermaid is the diagram language, and WebAssembly appears in the list. Tree-sitter is the reason the flowchart mode can handle eight languages with a single engine, since it produces a concrete syntax tree for each language rather than requiring a hand written parser per language. That is also where the semantic analysis comes from, since the tree is what lets the extension find loops, branches and exception paths.

Mermaid is the rendering side. The diagram is therefore text, which has two consequences. It is reproducible and diffable, so a chart can be generated in a build or committed alongside the code, and it is limited to what Mermaid's flowchart grammar can express, which is why the picture is a control flow chart and not a general purpose graph layout.

The extension presents its UI through the VS Code webview API. The manifest contributes a view container called codevisualizer-container to the activity bar, holding a webview view named Flowchart, and the commands include generateFlowchart, openFlowchartInPanel, openFlowchartToSide and openFlowchartInNewColumn, with the last three covering the detachable panel, the side by side and the new column layouts the README describes.

Installing from the Marketplace or from a VSIX package

The getting started section is concrete. The prerequisites are Visual Studio Code version 1.105.0 or higher and an active workspace containing supported programming languages, with Python, TypeScript and JavaScript, Java, C++, C, Rust or Go listed in the prerequisite line.

The manifest enforces the first of those. The engines field declares vscode as ^1.105.0, which means the extension refuses to activate on an older editor, and the activation event is onStartupFinished, so it loads once the editor has finished starting rather than waiting for a file to be opened.

Installation from the marketplace is the normal path: open the extensions view with Ctrl+Shift+X on Windows and Linux or Cmd+Shift+X on Mac, search for CodeVisualizer, and click Install. The marketplace listing is linked from the README as the download page.

There is also a packaged install for a VSIX file:

   code --install-extension codevisualizer-1.0.2.vsix

That command line is where the version question appears, and the README names a 1.0.2 package while the extension manifest in the repository declares version 1.1.0 with publisher ducphamngoc. The release tags tell a similar story: v1.0.6 from 2025-11-15, described as a multi-line code visualization fix, v1.0.5 as a publisher ID compatibility fix, and v1.0.3 with LLM translation and stability improvements.

The last push to the repository was on 2026-09-13, so the source has moved on from the published tags. If you are installing a VSIX, check the version in the filename against what you actually need, since the extension and the marketplace listing are separate channels.

AI labels across five providers, and the one feature that leaves your machine

The AI-powered section is scoped tightly, and the scoping is the point. The note says AI features enhance function-level flowcharts only.

What they do is replace cryptic variable names and expressions with human-friendly descriptions, generated by a model. The provider list is broad: OpenAI, Gemini, Groq, Ollama for local models, and Anthropic. Ollama is the one that matters for privacy-minded teams, since it keeps inference on your own machine, while the hosted providers mean your code fragment is sent to a third party service.

The rest of the design is about cost and control. Intelligent caching minimises API calls and costs by reusing labels, the style is selectable between concise, explanatory and technical label formats, and labels can be generated in your preferred language for global teams.

The privacy framing of the project deserves a note here, because the two halves of the extension sit in different places. The extension's own description says all code analysis happens locally on your machine, and for parsing and diagram generation that is true. But the AI labelling path, when pointed at a hosted provider, is a network call with your code in it. The README does not spell out that distinction, so if the local-only claim is part of your evaluation, the provider setting is the part you need to check.

MIT terms, a webpack build and a test harness in the tree

The licence is MIT, with the file at the repository root. That is the simplest possible answer for a tool you install into your editor, and it means you can read it, patch it and redistribute it without copyleft obligations beyond keeping the notice.

The repository is a TypeScript VS Code extension laid out the way you would expect. There is a src directory for the extension code, a webpack.config.js for the bundling, a tsconfig.json, an eslint.config.mjs, a media directory holding the logo and the activity bar icon, and a .vscode-test.mjs alongside a .vscode directory, which is the visual studio code test harness configuration.

That test harness is the interesting file for an adopter. A .vscode-test.mjs means the extension is tested by launching a real VS Code instance, which is the only way to test something that depends on the editor API, and it also means the test suite needs a downloadable editor build, so CI for this project is slower and more environment dependent than a unit test suite.

The manifest also tells you the extension is a webview application, with main pointing at ./dist/extension.js and a type of webview for the flowchart view, and the categories list includes Visualization, Programming Languages, Other and AI, which is how the extension is filtered in the marketplace.

The project is not archived, and the last push was on 2026-09-13. The most recent tagged releases, though, are from November 2025, so if you are picking a version, the gap between the branch and the tags is where the churn is.

Editorial conclusion

Adopt CodeVisualizer if you work in a language the flowchart mode supports and you want a diagram of a function's control flow without leaving the editor, particularly when you are onboarding to unfamiliar code or documenting behaviour. Do not adopt it as a general architecture diagrammer, because the dependency graph mode currently covers only TypeScript and JavaScript, Python and PHP, and it draws import and require relationships rather than a system architecture. Verify first that your VS Code version is 1.105.0 or higher, that the extension you install is the version you expect, since the README's install command names a 1.0.2 package while the manifest declares 1.1.0, and whether you are comfortable with an extension that uses an LLM provider to label nodes, since that is the one feature that sends your code to a third party.

Frequently asked questions

Official sources

1. DucPhamNgoc08/CodeVisualizer on GitHub
2. License: MIT
3. Project website
4. README
5. Releases