Vue.js Diagram Component
How to integrate custom diagramming into your Vue.js-based web application. Painlessly.
The open-source web application framework Vue.js is a popular choice among web developers. There exist many accompanying component libraries that facilitate the build of a modern web application. Its component-based approach allows creating use case specific components easily. For example, wrapping yFiles for HTML in a Vue.js component, yields a graph visualization component with an easy to use interface, customizable visualization, and sophisticated layouts.
yFiles for HTML is a commercial programming library explicitly designed for diagram visualization. The built-in user input handling makes the diagram accessible with keyboard, mouse, or touch gestures. The diagram can be tailored to any domain with flexible style options. And its sophisticated layout algorithms easily create readable, pleasing, and informative networks.
Vue.js components typically use data binding to visualize business data that is associated with an element. The framework provides specific directives to bind data in templates easily.
These templates can be used to create dynamic, arbitrary element visualizations. For example, rendering node elements that are zoom-dependent to show the different detailed data:
yFiles for HTML comes with a ready-to-use element visualization that uses Vue.js template expressions for data binding and conditional rendering, making it easy to create e.g. zoom-dependent visualizations for arbitrary data:
<template v-if="zoom >= 0.7">
In a component-based web application, data is usually passed to the component to create the diagram. Although yFiles for HTML can be directly attached to an asynchronous data provider, it is also possible to provide data objects (e.g., JSON) from which a diagram will be generated.
This allows defining an interface for the component that binds to the diagram data. Thus, all features of the yFiles diagramming library can be utilized on the data to create a perfectly tailored user experience.
Often, connected data does not contain positional information and relies on the user or the application to arrange the elements in a meaningful way.
yFiles’ sophisticated layout algorithms provide arrangements for many different use cases out of the box, each of which can be configured to match specific requirements.
The Vue.js sample application shows how to integrate yFiles for HTML in a Vue.js environment, by simply adding yFiles as NPM dependency. The source code of this application is available on the yWorks GitHub repository and part of the yFiles for HTML package.
Test and experience the yFiles for HTML diagramming library with a fully functional trial package. The recommended way to use yFiles for HTML in a Vue.js application is shown by the Vue.js source code examples that are part of that package.
Download a trial version of yFiles for HTML.
Navigate to the source directory of the Vue.js or Vue.js Template Node Style Sample Application, respectively.
Inspect the sample applications’ documentation and
copy its build configuration and its Vue.js sample components to your project or
adjust its source code to match your requirements.