Archikoder Lens

Explore and Visualize your codebase in your IDE

We now support Angular, Vue, Terraform, Typescript, TSX, Javascript, C++, C#, Java, Python, Go, Elixir, PHP, and many more to come

Installation and launch

Here is a demo on how to install Archikoder Lens.

For an ideal visualization, VS Code have a secondary sidebar where you can drag the the view (For new version of VSCode). You can open it by clicking the icon pointed by the arrow.

The graph

The main component of the tool is the graph. Where you can visualize, navigate and interact with your codebase. The graph is the result of all the queries that you input in the prompt.

You can drag and zoom the graph

Nodes

A node is a programmatical entity of your code. It is represented by a bordered circle with a defined color according to its type. We actually support several types of nodes:

• Class
• Interface
• Method
• Function
• ...

This list is constantly updated.

Links

A link represent a relation between two nodes; as a Class can inherit an Interface, whe have the link "Inheritance". It is represented by a directed arc with a defined color according to its type. We actually support those types of links.

• Import
• Constructor
• Inheritance
• Attribute
• Parameter
• Instanciation
• Call
• ...

Legend

The legend is a popup attached to a node in the graph that display informations about the node. The legend is only shown when the graph is zoomed in a certain level.

Zoom

To zoom in or out, you can use your mouse scroll wheel on the graph, or use the "reset", "+" and "-" buttons in top right of the explorer.

Link to editor

Click on a node or a link to be redirected to the corresponding file and code definition in your editor.

Query Language

Archikoder Lens have an internal query language that allow you to query your code objects to show in the graph. The syntax was simplified to let you make request by filling a maximum of four (4) fields at a time

• The graph is the result of combining several queries for nodes
• Dependencies between those nodes are automatically fetched and displaied by the graph

Graph mode

You can choose to show detailed dependencies between your nodes, tracking the path of the dependencies through all concerned nodes. Or you can choose to not show detailed graph and only display a link between the queried nodes if there is a dependency between them.

The prompt

The prompt allow us to write queries with or without conditions. You can see it at the bottom right of your explorer.

Target

A target is an internal collection of predefined conditions that can be requested. You can note the primitives target "Node" and "Link" that are the sources of all targets.

Condition

A condition is a collection of three (3) values: Field, Operator and Value. It will be evaluated on each code elements to determine if it is concerned by the query or not.

Pin to Explorer

A new way to discover and explore your code is to select your nodes directly from your editor. Right click on your class, function, method, variable, ... name and hit the menu "Add to Explorer". It will generate a query for you.

The grah will display automatically all relations between all the nodes you added to the explorer.

Node menu

Right clicking your node in the graph explorer shows a contextual menu where you also can put a flag to a specific node so you can track it along your analysis