Modeling Websites and Native Code

I've blogged previously about the Architecture tools in Visual Studio 2010. These tools offer a fantastic way to understand an existing application, design some new functionality, and validate an implementation against architectural rules and constraints.

Recently, we announced the availability of the Visualization and Modeling Feature Pack for MSDN subscribers, which complements the Architecture tools in Visual Studio 2010 by adding support for:

  • C/C++ code visualization
  • Website visualization
  • Improved UML diagram generation
  • Code generation from UML diagrams
  • XMI 2.1 import
  • Architectural validation extensibility

Developers often face the challenge of trying to understand how changing one part of application will impact another. This kind of information is vital in controlling the inherent risk associated with modifying code.

C/C++ and web development pose the same set of risks with some additional complexities unique to them. C/C++ development requires understanding the dependencies between #include files. Web development adds an extra layer of complexity by introducing content elements like pages and controls.

Today I'm going to go into more depth on the native code and website visualization features in the feature pack.

C/C++ Code Visualization

If you have the sources to your C/C++ application, you can use the Generate Dependency Graph menu to visualize the static dependencies that exist between the various binaries. Below I have the initial DGML diagram created for a photo viewer application:

I can then drill down by expanding these nodes to identify specific calls that create those dependencies. I can then expand the nodes to find a dependency between the CWebImageManager class constructor in the PhotoBrowser application and the WinHttpOpen function in WinHttp.dll.

Another great way to visualize the static dependencies between various binaries is by simply dragging and dropping them from, say, the Windows Explorer window to an empty DGML diagram.

The feature pack also supports visualizing dependencies that exist between #include files. You can visualize the dependencies between all the source and header files in your solution by selecting 'By Include File' from the Generate Dependency Graph menu, or you can choose to visualize dependencies for a specific file by invoking the "Generate Graph of Include Files" function from the source editor.

Below, you can see the direct dependencies for the PhotoViewerView.cpp file. You can use Neighborhood Browse mode to drill down and discover all dependencies.

You can also explore your C/C++ projects via the Architecture Explorer, similar to how you would for managed projects or take advantage of project level dependency validation via layer diagrams.

Website Visualization

If you are using Visual Studio Web Application Projects, Web Sites, or ASP.NET MVC projects, this feature pack introduces rich structural and dependency visualization for your application and can drastically improve your ability to answer the question "What parts of my application are affected when I modify this code?"

To visualize your website structure and dependencies, use the Generate Dependency Graph menu:

This generates a DGML document below:

The resulting graph contains nodes for the various structural elements of your ASP.NET web application, namely

  • ASP.NET web pages (.aspx files)
  • Custom controls (.ascx files)
  • Master pages (.master files)
  • Website folders
  • Application files
  • Code behind types
  • Server controls

If you double-click on any one of these nodes, you are taken directly to source code. This can be a great way to catalog and explore your website.

ASP.NET MVC support

When you generate a dependency graph for an ASP.NET MVC web application, you also get the MVC specific data below:

  • Controller to View links (using default conventions)
  • View to Model links
  • Node groups representing Areas and View folders

The Rest of your Application

Once you've explored the structure and dependencies of your website, you can also visualize the dependencies on the rest of your application by using the Get Code Dependencies feature.

Here the resulting graph is filtered to show a dependency chain all the way from the Checkout.aspx web page through the Order business logic class and the Payment Data access class.

Try It

If you are an MSDN subscriber, download the Visual Studio 2010 Visualization and Modeling Feature Pack and try it out.

Namaste!