To add NetDiagram to your ASP.NET Web application, perform the following steps:

Select File -> New -> Web Site from the Visual Studio menu.

In the New Web Site dialog box, select language and location:

• Select the ASP.NET Web Site template;
• Select language in the Language field: Visual C# or Visual Basic;
• Choose the Location for your website in the 'Location' field: File System, HTTP or FTP. If you select 'FileSystem', type in the path and the name of the file where you will store the website. If you select 'HTTP', enter the URL of your website in the field right to the 'Location' field. If you select 'FTP', enter the location of the FTP server.
• For this example, choose 'File System', and enter the file location, for example "D:\Projects\NetDiagram\MyWebSite"
• Click OK.

The 'MyWebSite' solution tree is created and displayed in the Solution Explorer.

The source file Default.aspx is created automatically.

• Click the right mouse button within the Toolbox area.
• From the context menu, select Choose items
• In the Choose Toolbox Items dialog box, click the .NET Framework Components tab;
• Click the Browse button;
• Navigate to the NetDiagram installation folder;
• Select the MindFusion.Diagramming.WebForms.dll assembly, which contains DiagramView, Overview, NodeListView and ShapeListBox control and click Open. Now you can see the newly installed DiagramView, ShapeListBox, NodeListView and Overview icons in the toolbox.
• Optionally add MindFusion.Common.WebForms.dll to get the ZoomControl in toolbox.
• To enable interactivity on the client side in ImageMap mode, select MindFusion.Extenders.dll and click the Open button. Now you can see the newly installed InteractivityExtender, ShapeListBoxExtender, NodeListViewExtender and OverviewExtender icons in the toolbox.

3. Add references to the required assemblies to your project

• Open the Solution Explorer.
• Right-click the project name and choose Add Reference from the context menu.
• Navigate to the NetDiagram installation folder and locate the subfolder corresponding to the project's ASP.NET version.
• Select MindFusion.Common.dll, MindFusion.Common.WebForms.dll, MindFusion.Diagramming.dll, MindFusion.Diagramming.WebForms.dll and click the Open button.
• To enable interactivity on the client side in ImageMap mode, select MindFusion.Extenders.dll and click the Open button.

Now, you can see icons for the NetDiagram components in your toolbox. As a minimum, you must add a DiagramView object to your form. Follow these steps to do that:

• Open the Visual Studio toolbox.
• Drag the DiagramView icon from the Visual Studio Toolbox and drop in the Design area of the Web Form.
• If you haven't added references to all assemblies listed in section 3, Visual Studio might display an error at this point. To fix it, add the required assemblies.
• The default Canvas mode relies on several external script files. By default it uses MicrosoftAjax.js for browser abstraction, which you must load either explicitly via <script> element or by adding <asp:ScriptManager> to the form. The client-side diagram code is contained in MindFusion.Diagramming.js, which you must add to the project  using the Add Existing Item context menu command.
• If you run the application at this point, you should see an empty diagram view on the page and should be able to draw diagram nodes and links with the mouse.

NetDiagram can be fully interactive on the client side using the HTML5 Canvas element for drawing and a JavaScript module that handles mouse input. Client mode is specified by setting the ClientSideMode property. The default Canvas mode requires modern desktop or mobile browsers (e.g. IE9 or newer, or Firefox/Chrome/Safari versions from last 5-6 years).  NetDiagram also provides an ImageMap mode, that displays an image of the diagram and an associated image map. Interaction in this mode can be added using InteractivityExtender, which visualizes item modification through Javascript event handlers that draw DIV and IMG objects in the browser's window.

5.1 Creating a Web Application with Canvas client-side mode

• Set the ClientSideMode property to Canvas;
• Load MicrosoftAjax.js using either a <script> element or by adding ScriptManager to the form. Alternatively use JQuery instead, by setting ClientScriptMode to JQuery and specifying its location via JQueryLocation.
• Add MindFusion.Diagramming.js to the web application project using Add Existing File command in project menu;
• Set the JsLibraryLocation property to the relative URL of the .js file.

Note
MindFusion.Diagramming.js is located in the NetDiagram\Redistributable folder after installation.

5.2 Creating a Web Application with ImageMap client-side mode

• Set the ClientSideMode property to ImageMap
• From the main menu, select Website - > Add Existing Item
  Select the ImageGen.ashx file from the installation folder and press the Add button to add this file to the web site project. The ImageGen.ashx file appears in the Solution Explorer in the project tree.

ImageGen files
After the NetDiagram installation, ImageGen files are located in the NetDiagram\Redistributable folder.

• Drag the InteractivityExtender icon from the Visual Studio Toolbox and drop it in the Design area of the Web Form.
• Set the TargetControlID property of InteractivityExtender to the ID of the DiagramView object. This will associate several JavaScript event handlers with the DIV element rendered by the diagram control.

Tip
If using ImageMap client side interactivity, place the DiagramView inside an UpdatePanel, in order to refresh only the diagram control when the user draws an item and avoid reloading the whole page.

6.1. Start with the 'ID' property, which defines the name of the variable you will use to access the DiagramView instance from code;

6.2. Choose a value for the Behavior property, which defines how NetDiagram interprets actions done with the mouse by users of your application. The default value LinkShapes specifies that users can draw diagram nodes and connect them with links. Another value, LinkTables, allow drawing tables and relations. Modify bans users from drawing new items, but allows them modifying existing ones;

6.3. Take a look at the other properties in the Behavior category - they specify whether and how NetDiagram responds to various interactive actions;

6.4. Expand the Diagram property to customize the Diagram instance associated with the view. Properties you set specify default values for the diagram elements appearance.

You are now ready to write code. A good place to start is in event handlers - either NetDiagram's own events, or events raised by other user interface elements in your application. Depending on the mode you choose, you will handle either client-side events or server-side events.

Browse the other sections of this help file to learn more about the things you can do with NetDiagram's classes, methods and properties.