Image Export
yFiles for HTML supports exporting the contents of a GraphComponent as SVG using the SvgExport. The following methods enable instant SVG export:
- exportSvg(canvas: CanvasComponent): SVGSVGElement
- exportSvgAsync(canvas: CanvasComponent, renderCompletionCallback: Func1<Promise<Object>>): Promise<SVGSVGElement>
- 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 contentBounds and viewport properties, for example, 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 realized. The Image Export demonstrates how the browser’s canvas drawing capabilities can be used to export the IGraph as a PNG image.
The demo also shows how the SvgExport can be used for server-side 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 exporting the content of the IGraph as a PDF file.
It offers both client-side and server-side PDF export options. The client-side export uses the svg2pdf and jsPDF libraries, which are open-source projects (co-)maintained by yWorks.
The server-side export is closely related to the Image Export demo and follows the same approach. Both demos illustrate how to enhance the feature set of yFiles for HTML by using third-party libraries with minimal effort.
VSDX Export
The VSDX Export for yFiles for HTML add-on enables you to export yFiles diagrams to VSDX files, which can be opened in Microsoft Visio®. The VSDX Export Demo shows how different graphs with various styles are exported.
The add-on can automatically convert most yFiles graphs, including all graph items (nodes, groups, edges, labels, and ports), their styling, and their data. Like yFiles, the export offers extensive configuration and customization options if you need a more tailored result.
You can find the VSDX Export’s Developer’s Guide and API documentation here.