Collaborative Code Comprehension

About

The C28N is the beloved whiteboard to visualize your code.

The extension provides advanced visual features such as

drag-and-drop of code snippets and post-it's onto a canvas
draw links between snippets or notes to indicate connections
add color and description to highlight elements in the canvas
zoom in and out to get an overview

Command Palette

New Map

Create a new map.

Load Map

Load an existing map from a file.

Save (as) Map

Save the map to a file.

Export Map as Html

Save the map as a single html page. (featuer under development)

Add Snippet

Add the selected part of the active text editor to the map. If multiple maps are open, the snippet will be added to the visible map. The snippet is added at the center of the screen.

Add Comment

Similar to adding a snippet. Click the comment to write the comment in markdown format.

Text Editor

Right click in the text editor to select

Add Snippet
Add Comment

Map Command

Use the mouse wheel on the background to zoom in and out. Inside a code snippet or a comment, the mouse wheel scrolls the content up or down.

Drag the background to scroll the map

Full Size Icon

Resize the map to fit the screen.

Save Icon

Save the map to a file.

Draw Connection

Create a new connection by selecting one of the 4 "ports" and dragging the mouse. The connection is completed by releasing the mouse over a port of another element.

Each connection has a label which can be modified by clicking the label.

Show Declaration or Show References

Semantic Functions In Code Snippet

The semantic functions Go to Declaration and Go to References are available in the code snippet. By clicking on the words in the code snippet, you can visualize the declarations and/or the references. The commands Show Declaration and Show References visualize the results obtained from Visual Studio Code.

This is still in an experimental phase.

Contributions

Code Comprehension Extension for Visual Studio Code leverages

Code Comprehension

C28N