Image Export
yFiles for HTML supports exporting the contents of a GraphComponent as SVG with the SvgExport. The following methods enable instant SVG export:
- exportSvg(canvas: CanvasComponent): Element
- exportSvgAsync(canvas: CanvasComponent): Promise<Element>
- Synchronous and asynchronous export of the IGraph’s content.
The asynchronous method additionally supports inlining of images using base64 encoding (encodeImagesBase64), as well as inlining referenced SVG image elements (inlineSvgImages).
Both options allow fine-grained control over which images should be inlined via shouldEncodeImageBase64(image: SVGImageElement): boolean and shouldInlineSvgImage(image: SVGImageElement): boolean
The SvgExport also encapsulates information that are needed for exporting the contents of a CanvasComponent:
- the part of the canvas that should be exported
- the scaling factor that is applied when creating an image from the specified part of the canvas
- the margins that should be added around the exported content
The part of the canvas that should be exported must be specified in world coordinates, either at creation time or later using the worldBounds property. The CanvasComponent’s contentRect and viewport properties, for example, conveniently provide the entire contents of the canvas or the contents currently visible in world coordinates.
The SVG Export demo shows how SvgExport can be used to export the graph using different settings.
Bitmap Export
Building upon the SVG export capabilities of yFiles for HTML, bitmap based exports can be realised. The Image Export demo demonstrates how the browser’s canvas drawing capabilities may be utilized to export the IGraph as PNG image.
The demo also shows how the SvgExport can be used for server sided image export with a Batik powered Java servlet or a Node.js server.
PDF Export
Similar to the Image Export demo, the PDF Export demo demonstrates export of the IGraph’s content as PDF.
It features both, pure client sided and server sided PDF export. The client sided export makes use of the svg2pdf and jsPDF libraries which are open source projects (co-)maintained by yWorks.
The server sided export is closely related to the Image Export demo and follows the same approach. Both demos show how to enhance the feature set of yFiles for HTML by means of third-party libraries with little effort.
VSDX Export
With the VSDX Export for yFiles for HTML add-on it is possible to export yFiles Diagrams to the VSDX files, which can be opened in Microsoft Visio®. The VSDX Export Demo shows how different graphs with different styles are exported.
The add-on is capable of automatically converting most yFiles graphs including all graph items (nodes, groups, edges, labels, and ports), their styling, and their data. As yFiles itself, the export offers rich configuration and customization options in case you need a more tailored result.
You can find the VSDX Export’s Developer’s Guide and API documentation here.