Visual Source: Source Code Visualisation

(The idea discussed in this article is currently vapourware)

If you think of reading source code, there are not many choices in hand. What we are essentially using now is nothing more than the same text editor that we started using more than 20 years ago. Although the whole coding experience is greatly enhanced because of the IDE and as a matter of fact, it is nearly impossible to use simple notepad for anything more than demos and tutorials.

But when it comes to viewing / reading source code, we all hope that there should be something better than the text editor. Something better to view the different code pieces and to navigate between them. In Visual Studio.NET, you can use (Ctrl + -) and (Ctrl + Shift + -) to move back and forth in navigation history just as you use Internet explorer's Back and Forward button. You can also use F12 to get into the description of a method/property. But it all become cumbersome at some point so whole experience is not user friendly.

What I found earlier that it is much more easier to read source code in Reflector than in Visual Studio itself.

But as Reflector generates source code from the assembly therefore you won't see the same code as you wrote. You lose all the pretty variable names declarations and the comments that you have in the original source code. Although this is acceptable if you don't have the source code.

Reflector along with Peli's plugin gives you much better idea of the source code. I especially love the Method Invocation graph plugin.

Another product that I must mention here is CodeLogic from LogicExplorers.

http://www.logicexplorers.com/CodeLogicC.html

CodeLogic generates class diagram and sequence diagram from the source code. The sequence diagram also gives you the option to remove unnecessary players from the list to make is much more cleaner.

In addition to sequence diagram, it also generates the Flow diagram which is excellent for understanding code.

And you can jump into the description of any method, view it is class diagram, sequence diagram or just check the source code. But even with all these options, it is not very effective to get the big picture.

In this article, I will visualise something that is better suited for source code visualisation. I really like CodeLogic so I will draw everything as an additional module to CodeLogic.

The initial experience with VisualSource would be like the following screen, where the user can see the main method along with all the invoked methods in the function body.

a) Relations between methods:

1. The main function body
2. Methods invoked from the main function
3. Navigator for the function graph
4. The position where that function is being called from

b) Open the editor:

1. Double-Click the main function body to open the source code as shown below.

c) Getting back to the graph view:

1. In the source code editor, double click anywhere on the empty space to get back to the graph view.

d) Information about methods:

1. Hovering the mouse over the function body opens up a tooltip to show more information about the function. Similarly you can view function description of the child methods as well.

e) Getting to the child methods:

1. Clicking on any child method will move it into focus and dragged the previous method to the left hand side.

Other notes:

• Make it as a plugin for visual studio .net.
• Using this scheme would make it easier to see where the graph is getting complex; which also means that the code requires refactoring.
• Please feel free to implement this idea if you think it is good enough to materialise.