Vue components for creating interactive SVG graphs, diagrams, and node-based visual tools.
Vnodes is a Vue.js library for building interactive SVG-based graphs, diagrams, and node visual tools. It provides components like Screen, Node, and Edge to create visualizations where HTML nodes and SVG edges are synchronized in separate layers, solving cross-browser rendering issues and simplifying layout management.
Frontend developers using Vue.js who need to create interactive diagrams, graph visualizations, or node-based interfaces, such as for workflow builders, data modeling tools, or network diagrams.
Developers choose Vnodes for its Vue-native approach, dual-layer rendering that fixes Safari compatibility, and flexible API that supports custom HTML nodes, SVG edges, and built-in graph utilities without heavy dependencies.
Vue node based svg visual graphs
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Dual-layer rendering separates HTML and SVG layers, fixing Safari issues and simplifying layout without foreignObject constraints, as highlighted in the v2.0 changes to address WebKit limitations.
Nodes are HTML div containers supporting any content and built-in drag-and-drop, allowing developers to embed complex UI elements like forms or charts directly into diagrams with automatic positioning.
Includes graph.js utility for creating, managing nodes and edges, and handling graph operations like layouts, reducing boilerplate code for common diagram tasks.
Screen component integrates svg-pan-zoom for out-of-the-box zoom, panning, and transform synchronization across layers, enabling rich user interactions without extra dependencies.
Edges support multiple anchor formats (e.g., string, object with properties like snap and align), which can be confusing and error-prone for developers needing precise edge positioning without trial and error.
Requires separate slot templates for nodes, edges, and overlays in v2.0, adding initial setup complexity and a steeper learning curve compared to single-layer or all-in-one component approaches.
Embedded markers via Marker.vue are versatile but computationally expensive, as the README admits, potentially impacting performance with many edges, whereas SVG markers are less flexible but lighter.
Version 2.0 introduced significant rendering changes, requiring migration and understanding of new layers, which can disrupt existing projects and increase maintenance effort for teams.