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
- vue-component-node-style
- react-component-node-style
- react-template-node-style
- lit-template-node-style
Additional Tools
Graphs containing template node style are compatible with yEd Live.