Using NetDiagram in a SharePoint WebPart

To show a NetDiagram diagram inside a SharePoint page:

  1. Write a custom WebPart for SharePoint by inheriting from the ASP.NET WebPart class.
  2. Create an instance of the DiagramView class.
  3. Set the ClientSideMode property to Canvas or ImageMap.
  4. Deploy MindFusion.Diagramming.js and ImageGen.* files to the Web server outside of SharePoint.
  5. If ClientSideMode is set to Canvas, set the JsLibraryLocation property as a string specifying the path to MindFusion.Diagramming.js.
  6. If ClientSideMode is set to ImageMap, set the ImageGenLocation property to point to the ImageGen.* files.

WebPart code  Copy Code

namespace DiagramWebPart
    public class DiagramViewPart : WebPart
        public DiagramViewPart()
            diagramView = new DiagramView();
            diagramView.ClientSideMode = ClientSideMode.Canvas;
            diagramView.JsLibraryLocation = @"";

        public DiagramView DiagramView
            get { return diagramView; }

        private DiagramView diagramView;

  1. Add the AllowPartiallyTrustedCallers attribute (located under the System.Security namespace) to the AssemblyInfo.cs file:

AssemblyInfo.cs  Copy Code

[assembly: AllowPartiallyTrustedCallers()]

To deploy Your WebPart in the SharePoint server, perform the next steps:

  1. Give your assembly a strong name.
  2. Find the public key token for your assembly.
  3. Locate the SharePoint Web application in which you want to deploy this WebPart. You can do this by using the IIS Manager under administrative tools.
  4. Drop the DLL in the _app_bin directory into the virtual directory.
  5. Find Web.Config under the same virtual directory and add the following to the SafeControls section, replacing the PublicKeyToken value with the one of your assembly:

Web.Config  Copy Code

<SafeControl Assembly="DiagramWebPart,
             Version=, Culture=neutral,
             TypeName="DiagramViewPart" Safe="True" />

  1. Open your browser, go to the Web application whose virtual directory you are using. 
  2. Select Site Actions -> Site Settings -> Modify All Site Settings.
  3. Click on "Web Parts" under Galleries.
  4. Click on "New" in the toolbar, and find the DiagramWebPart.DiagramViewPart.
  5. Mark the checkbox, go to the top, and click on "Populate Gallery".
    You should see the DiagramViewPart.webpart file ready to use in your site.

To add the new DiagramViewPart to a page, perform the following steps:

  1. Go to the site of your choice and click on Site Actions -> Edit Page. By using this option, you can add, delete or update new WebParts on this page.
  2. Click the "Add a WebPart" button on any one of the WebPart zones.
  3. Check the checkbox for DiagramViewPart, and click "Add".

You should now see the DiagramViewPart running under SharePoint.