Creating Beautiful Visio^® Diagrams in JavaScript

Visio is a commercial general-purpose diagram editor that allows users to create and edit diagrams like flow charts, organization charts, or floor plans. They can either create the drawings entirely by hand or use the data import and data binding functionality to automatically create diagrams from existing data sources like Excel^® sheets or SQL databases. For the styling, the users can choose from a set of existing shapes for different domains as well as import or create their own templates.

One limitation of Visio is that the data import feature is limited to specific data sources as well as to special types of diagrams like flowcharts:

Another limitation is that the options to automatically arrange the shapes on the page are very restricted. There are only a few different layout styles (like Flowchart or Circular) with almost no configuration options.

These limitations make Visio the right choice as a diagramming tool only for specific scenarios. Some diagrams are only hard to realize in Visio, and the process of creating them and keeping them up-to-date with the data is very time-consuming. For this reason, it is often better to develop specialized diagram applications with the help of software libraries that are specifically tailored to the data, domain, and users.

yFiles for HTML is a commercial software library that supports visualizing, editing, and analyzing graphs and graph-like diagrams. Other than Visio, yFiles for HTML is not a ready-to-use application or graph editor. Instead, it provides a component for graph visualization, graph editor functionality, and an extensive set of algorithms for automatic data arrangement and graph analysis. Software developers can use yFiles for HTML to create domain and data specific diagram applications. Together with the VSDX Export add-on, yFiles for HTML can export the diagrams from the application to Visio’s VSDX files.

The VSDX Export add-on for yFiles for HTML comes with a VSDX Export Sample Application that showcases a diagram editor built with these two products. It features the VSDX export of a collection of sample graphs from different application domains. The source code of this and several other examples is part of the VSDX Export add-on package for yFiles for HTML.

The VSDX Export add-on allows users to create VSDX files from yFiles for HTML applications with only a few lines of code. It is capable of automatically converting most item visualizations into VSDX shapes, masters, and style sheets, which means there is no extra code required. Alternatively, the VSDX Export can load Visio stencil files and use their masters and style sheets as templates for the exported shapes in the VSDX file. This feature is especially handy when migrating from Visio to a yFiles for HTML powered application since you can reuse already existing stencils.

The VSDX Export is also completely customizable. It is possible to, e.g., enrich the shapes with custom data, add additional pages, or include a company logo.

Test the yFiles VSDX Export with a fully functional trial package of yFiles. The VSDX export works on the standard yFiles graph model and can be used in any yFiles-based project. It requires only minimal setup. Typical use cases work out of the box but you can customize every aspect to meet even complex requirements.