Skip to content
| Marketplace
Sign in
Visual Studio Code>Visualization>Charkoal - Code CanvasNew to Visual Studio Code? Get it now.
Charkoal - Code Canvas

Charkoal - Code Canvas

Charkoal

|
918 installs
| (3) | Free
Smart diagram for your codebase
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Charkoal Canvas - a visual space for your thinking

charkoal.dev

Charkoal canvases are visual notes inside your IDE. They can be connected with any part of your code and with each other. Built to help you think about code.

Charkoal Canvas Hero

⚡ BETA ⚡: Charkoal is in early beta. Join our Discord community to report bugs and shape the future!

Getting Started

Charkoal Canvas is an infinite canvas where you can create nodes, edges, links to your code and other canvases.

After installing the extension, Charkoal provides you some commands to start with. You can:

  • create a new empty canvas with the command ⁠ Charkoal: New Canvas ⁠ (Cmd/Ctrl + K, N)
  • select any piece of code or symbol and run ⁠ Charkoal: Sketch the Symbol/Selection (Cmd/Ctrl + Shift + K, S) from a context menu - to populate a canvas.

You can save and commit your canvas just like any other file.

What can I do with Charkoal?

Investigation board, but for developers 🕵️‍♂️

Keep all the pieces of information you need for your task in one place. Reveal code architecture, connect the dots, track your todo items and ideas.

Investigation board

Capture code insights in 1 click without breaking the flow 🧘

Capture symbols, code locations and selections to your canvas with sketch commands without distractions.

Capture Feature

Break down complex ideas into manageable pieces 🔨

Split canvases, link and nest them to represent complex ideas and architectures.

Nested Feature

Code Canvas 🤝

Link any part of your code to your canvas. We support two types of links:

  • Node Links - you can capture any code symbol or file to your canvas as a special node.
  • Text Links - you can also reference any code symbol, or file or other canvas in your markdown text using [[]] notation. The autocomplete will suggest you options while typing.

In Text Code

Share your insights with a team 📢

Canvases can be saved as files and committed to your repository. Charkoal canvas file format is a superset of a JSON Canvas Spec.

Share Insights

Supported Languages

Technically we support all languages that has its extension in VS code. But due to differences in LSP implementations there might be minor bugs for different languages.

Supported languages:

  • All

Currently tested Languages:

  • Typescript, Javascript
  • ⁠Python
  • ⁠Java, Scala
  • ⁠Rust

Telemetry

This extension collects telemetry data to help us build a better experience. We respect vscode telemetry privacy settings

We collect:

  • Number of Nodes Added
  • Number of Edges Added
  • Menu click
  • Uncaught errors

Our telemetry dashboard is public and available here: dashboard

Call for Action! 📢

We're in beta now, and every week brings new improvements. But we need curious minds to help shape this tool. If you wish to say hi, feel free to join our Discord community.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft