Html Support

As RadDiagram supports serialization, you can save your diagramming solution in a custom XML format. The HTML support is built on top of this serialization logic. It is not conceived as an 'export' from within RadDiagram rather we use JaveScript to convert the RadDiagram's serialization XML into an SVG diagram inside the browser. This way you can avoid using any plugins and instead use plain HTML to display a diagramming structure build with RadDiagram. This script can load a saved XML diagram or use a JavaScript variable that holds it. Internally the JavaScript makes use of the Kendo API to output the necessary HTML (SVG tags). This doesn't mean however that you need a Kendo UI license to use this script since it only uses a handful of Kendo files which are part of the Kendo core.

SVG Render

In order to take advantage of the Html support and render a diagramming structure in SVG, you need to include the following scripts in your html page:

Next, you need to add a DIV container to host the rendered SVG like so:

XML

<div id="surface"></div>

Finally, you need to load the saved XML diagram in the container:

XML

<script  type="text/javascript"> 
    var surface = $("#surface"); 
    surface.kendoDiagram({ url: "http://yourserver.com/Diagram.xml" }); 
</script>

You can find the code implementation of the Html support along with some useful sample Diagramming structures in github. You can further extend the SVG representation of a diagramming solution by defining dynamic tooltips providing more information about a clicked shape in the SVG. The sample solution attached in github demonstrates one approach for implementing such logic.

Please note that the radDiagram.js file is an open source implementation that you can change to better fit your requirements.

If you decide to use the open source JavaScript code to display a RadDiagram serialization xml in an SVG, you can also examine the Diagrams FirstLook example and specifically the ExportToHtml button. If you download the demo solutions, you will be able to take a closer look at the export implementation which basically creates an html file using the scripts described above and displaying the SVG form of the diagrams in a div element.

If, for example, you open the FloorPlan sample in the Diagrams FirstLook demo:

Rad Diagram html diagram Floor Plan

Using the Export to Html button you will be able to create an html file displaying an SVG representation of the floor plan:

Rad Diagram html svg Floor Plan

Limitations

  • The described HTML support creates an SVG that is a read-only representation of a diagram created in either the Silverlight or the WPF RadDiagram control. At the moment you can't alter the generated diagram in any way.

  • SVG doesn't have a text-wrapping property, which means that if your shapes contain wrapped text it will likely be rendered across and outside the bounds in the SVG representation.

  • Diagram elements with a size (Width or Height) set to Auto will not be rendered correctly in SVG. Here again, this is due to the fact that auto-size is not part of the SVG technology. This means that your auto-sized diagram elements will be rendered but with an incorrect size. The solution to this issue is to make sure that you scale the elements in XAML so that during the serialization an actual size will be saved rather than the 'Auto' value.

  • Arrow heads scale differently in SVG than in XAML. This may lead to inconsistencies in the arrow heads of very large connections (thick lines) between the original diagramming structure and the SVG representation.

  • Shapes which get their Background from a global theme in XAML will be rendered gray in SVG. This is due to the fact that the Theme assigns a color dynamically while the serialized Background is empty. Much like the Auto property above, you can remediate this by assigning explicitly a Background so that the serialized XML contains effectively a value.

  • Images are not supported. The images contained in the serialized diagrams are encoded in a binary format which cannot be handled by the JavaScript code.

  • Custom templates are not supported. The JavaScript importer has no access to the XAML templates defined outside the XML file and as such has no knowledge of how to render custom content. This is why the SVG renderer is mostly functional when using basic geometric shapes.

In this article