Vue Template Node Style Demo
This demo presents the Vue template node style that leverages the powerful data binding
and conditional rendering features of the
Vue framework.
With this style, node visualizations are defined by SVG templates, similar to the template
styles that are included in the library. However, since the templates of this style can
use the powerful data binding of Vue, complex requirements are easier to realize.
Note that the implementation used here employs a runtime Vue compiler for the purpose of
the demo and interactivity. Real applications define the template in vue files and the
compiler tool-chain performs the compilation at build time.
Please ensure that the applied template is consistent with the
Vue 3
guidelines. Template styles created with older versions of Vue might not work in this
demo.
Things to Try
Change the template of one or more nodes. Bind colors or text to properties in the tag.
Then, apply the new template by pressing the button. Or modify the tag and see how the
style changes.
Related Documentation
Related Demos
Additional Tools
Graphs containing template node style are compatible with
yEd Live.