Svelvet 5.0 — A Community Driven Update
The interactive node-based Svelte application diagramming tool Svelvet is doubling available features for users in version 5.0. The new features centered around expanding UI and improving UX, taking in feedback and suggestions from current users on which additions are most needed.
Svelvet 5.0, the Svelvet Rabbits upgrade, vastly expands and optimizes the user’s ability to interact with the Svelte diagram itself, often removing the requirement for diagram updates to be added solely through the codebase.
Main Upgrades:
All of the new features and how to implement them into your project have documentation available on the Svelvet documentation page:
- Node Classes — Nodes can now have an added custom class property to allow for the user to style and customize nodes with the full scope of CSS properties.
- Custom Svelte Components — Preexisting Svelte components can be imported into your Svelvet application as nodes and further represented in the diagram.
- Initial Zoom & Location — Svelvet now has an initial zoom feature that allows users to have an immediate, holistic view of their entire diagram, centering on the selected node or inputted coordinates.
- Diagram Boundaries — Previously, the Svelvet diagramming tool would render infinitely, regardless of the size of the user’s diagram; Svelvet now supports adding boundaries to give users more control over their diagrams.
- Minimap — Svelvet 5.0 introduces a reactive minimap feature, complete with a representational view box, to give users the ability know where they’re at within their diagram at all times and continuously give a holistic view of the entire diagram regardless of zoom or graph location. The minimap also supports a click to pan feature for ease of traversal.
- Interactively Deletable Nodes — Nodes, and their corresponding edges, on the diagram are now able to be deleted interactively in two ways.
- Interactive Editable Nodes — With a simple right click on a node, a pop up modal allows for users to update node stylization interactively.
- Interactive Node Linking & Creation — In response to popular demand, new nodes can be added, and existing nodes can be linked together with new edges interactively through the diagram with a quick and simple drag and drop click functionality.
- Importing & Exporting Diagrams — Because interactive additions aren’t added into the codebase and, therefore, not permanent, Svelvet has incorporated a feature to make current changes to the diagram replicable by allowing users to import, export, and share a condensed, stringified version of the diagram.
With all of the newly added features to Svelvet, the 5.0 team was able to resolve 14 separate GitHub issues!
Other Upgrades:
The best part of all? All new features have been made optional, not required to the user! This decision was made to be able to give users the control that they want over their own applications and diagrams, as well as prevent any interference these new features may cause with diagrams made with previous versions of Svelvet.
Want To Contribute?
Listening to users’ recommendations, suggestions, and feedback was a top priority for the Svelvet Rabbits upgrade. Have any more ideas that would improve Svelvet? Share your recommendations and contributions on the Svelvet GitHub page to help continue this rapid growth in UI and UE!
The Svelvet 5.0 Team:
Dillon McKenna
Emma Ferguson
Taylor Alan
Timmy Lem
Tony Lim
