CodeCanvas

Instantly convert your codebase file and folder structure into interactive, live, and editable Excalidraw architecture diagrams right inside VS Code.

Overview

CodeCanvas bridges the gap between raw source code and visual diagrams. It scans your active workspace, calculates clean hierarchical auto-layouts, and generates full Excalidraw diagrams that automatically synchronize with your file system in real time.

Whether you are onboarding new engineers, reviewing repository architecture, or documenting systems, CodeCanvas turns complex projects into clear visual workflows.

Key Features

1. Hierarchical Auto-Layout Engine

• Powered by elkjs (Eclipse Layout Kernel) to compute clean, non-overlapping nodes and orthogonal edge routing.
• Visual container boxes for folders and color-coded badges for file types (.ts, .json, .md, .py).

2. Embedded Excalidraw Custom Editor

• Native custom editor for *.excalidraw files with full drawing tools, sticky notes, and shapes.
• Native Ctrl+S disk saving, dirty state indicators, and real-time VS Code Dark & Light Mode theme adaptation.

3. Non-Destructive Live Synchronization

• Real-time file system watcher monitors file creation, deletion, and rename events with 500ms debouncing.
• Preserves Custom Drawings: Updates workspace structure while 100% retaining your hand-drawn shapes, notes, and manual annotations.
• Clickable status bar toggle (CodeCanvas: Active).

4. Interactive 1-Click File Navigation

• Click any file shape on your Excalidraw diagram to instantly open that exact source code file in your VS Code editor tab.

5. 100% Local & Privacy First

• Zero code uploads, backend cloud dependencies, or telemetry tracking. Everything runs locally on your machine.

How to Use

1. Open any project folder in VS Code.
2. Press Ctrl + Shift + P (or Cmd + Shift + P on macOS) to open the Command Palette.
3. Type CodeCanvas: Generate Project Diagram and press Enter.
4. CodeCanvas will scan your workspace, run auto-layout, and open codecanvas-diagram.excalidraw automatically.

Extension Commands

Open Source & Community Contributions

CodeCanvas is 100% Open Source.

We welcome community feedback, bug reports, and feature contributions:

• GitHub Repository: https://github.com/Parthparmar57/CodeCanvas
• Issues & Feature Requests: Submit an Issue
• Pull Requests: Have an improvement? Submit a PR and we will review and merge it.

License

This project is licensed under the MIT License — see the LICENSE file for details.

Developed by Parth Parmar.