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.
The section
Using Vue Templates in Node Styles
in the Developer's Guide elaborates on how to create template strings and which properties
are available for data binding.
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.