Skip to main content

Release 1.0.0

· 9 min read
sporritt

We are excited to announce the first release of VisuallyJs.

VisuallyJs builds upon JsPlumb's 17 years of experience providing the foundation for world-class visual applications and diagrams, with a brand new rendering engine which is up to 3 times faster than JsPlumb, modernised integrations with React, Angular, Vue and Svelte, a comprehensive charting engine, a dedicated SVG diagram rendering engine, and a whole host of other additions and improvements.

Solutions​

VisuallyJs is a professional solution that can help you get to market in record time with several different types of applications.

Diagrams​

In JsPlumb it was possible to create a pure SVG diagram but there was a certain amount of boilerplate that it was necessary to setup. VisuallyJs offers dedicated SVG diagram support that is a snap to include in your page:

import { DiagramComponent, DiagramProvider, DiagramPalette } from "@visuallyjs/browser-ui-react"
import { FLOWCHART_SHAPES } from "@visuallyjs/browser-ui"

export default function MyDiagram() {
    return <DiagramProvider>
        <DiagramComponent options={{
            shapes:[FLOWCHART_SHAPES]
        }}/>
        <DiagramPalette/>
    </DiagramProvider>
}

Charts​

VisuallyJs offers a powerful 2D chart engine with support for a number of common charts such as bar/column, scatter/bubble, area, line and pie, as well as more specialized charts such as Sankey. As with diagrams, these are very simple to drop into your page:

import { BarChartComponent } from "@visuallyjs/browser-ui-react"

export default function MyChart() {
    return <BarChartComponent options={{
            series:[ {valueField:"value"}]
        }} data={{...}}/>
}

Apps​

VisuallyJs continues JsPlumb's role as the premium solution for apps where the nodes have rich content, and improves upon the ergonomics of JsPlumb's API to make it easier than ever to rapidly create a compelling user experience.

Dashboards​

This image shows our Network Infrastructure starter app, in which the diagram canvas and the two charts on the side are all powered by the same model. The possibilities for this are endless.

Updates​

VisuallyJs started out as a rewrite of the JsPlumb core engine but ended up becoming something much larger, even getting a new name! Here we present an inexhaustive list of updates made in VisaullyJs.

New Features​

  • 3x faster rendering engine
  • Charts module, with support for a number of different 2D charts, and export to SVG/PNG/JPG
  • SVG diagrams module - dedicated SVG renderer, with support for export to SVG/PNG/JPG
  • Diagram tools
  • BPMN shapes - tasks, events, pools, lanes, start, end
  • Support for "click to add" edges
  • Support for edge snap to targets
  • Source/target markers (overlays placed at either end of an edge that the edge does not overlap)
  • Rotate vertices tool

React​

  • Modernized API - streamlined and easier to use
  • DiagramComponent
  • ChartComponents
  • InspectorComponent refactored to be far more simple to use
  • MiniviewComponent, ControlsComponent, ExportControlsComponent and InspectorComponents can now be declared in your JSX as children of a SurfaceComponent

Angular​

  • Modernized API - streamlined and easier to use
  • A default component is now used for nodes/groups if you do not map one in your view - helpful for rapid prototyping or UIs that dont need complex content.
  • Miniview, Controls, ExportControls and Inspector components can now be declared in your template as children of a Surface component

Vue​

  • Modernized API - streamlined and easier to use
  • Added Surface/Diagram providers, allowing for easier composition of UI
  • Added injectable VisuallyJs service, exposing the Surface/Model/Diagram that is in the current context for some component.
  • All starter apps are now available for Vue

Svelte​

  • Modernized API - streamlined and easier to use
  • Added Surface/Diagram providers, allowing for easier composition of UI
  • All starter apps are now available for Svelte

Miscellaneous updates​

  • Hierarchy layout option to align leaves on final layer
  • Improved UX for the orthogonal + bezier connector editors
  • Improved documentation
  • New look and feel for controls, miniview and resize tools
  • Full support for groups and nested groups in the SVG renderer
  • SVG shapes updates - new Label shape, shapes publish properties, ShapeLibraryInspector
  • Template updates - ability to use the '||' operator in attribute values. Applies when using Vanilla templates and also in the chart and shape library templating.
  • Controls component "clear selection" button
  • Snaplines plugin now takes rotation into account
  • The ResizingToolsPlugin registers a drag filter on the underlying Surface, meaning you no longer need to add one in your render options.
  • The updateNode and updateGroup methods now set the position of the vertex's DOM element if the update includes left or top (or, for a Diagram, x or y) values. Previously you had to use setPosition(..) and then storePositionInModel(..)
  • Adhoc layouts are now run inside a transaction, and can be undone/redone.
  • Added support for cornerRadius to Segmented connector.
  • Added support for panWithMetaKey option to the Surface. With this set, users need to hold the meta/ctrl key in order to instigate a pan.
  • Added support for auto entering edge edit mode when user taps (and auto exit when they tap whitespace in the canvas)
  • Miniview elements now move as their related surface element is being dragged, unless you set dynamic:false on the miniview.

Breaking changes​

This section details the changes that will require resolution for current users of JsPlumb who are upgrading to VisuallyJs. VisuallyJs is 100% functionally backwards compatible with anything that had not been deprecated in JsPlumb.

General​

  • IMPORTANT: The Size interface was changed from {w:number, h:number} to {width:number, height:number}. This is a small change from a code perspective but with far-reaching effects - any part of a JsPlumb app in which you specify a size for something, be it a grid, or the size of icons in a shape library palette, or the max size for a group, etc, will need to be updated for VisuallyJs to use the new interface. We made this change to make the code more internally consistent: width/height were used by the drawing tools and are also standard for various DOM interfaces.
  • The default anchor is now Continuous, where previously it was Bottom.
  • The concept of Endpoint has been removed. From a visual perspective, you can replace endpoints with the new Dot, Rectangle and Ellipse overlays, optionally registered as markers.
  • Orthogonal connectors no longer support loading data in the JsPlumb 2.x format.
  • The legacy-json datatype, in which ports are listed at the top level alongside nodes, groups and edges, is no longer supported.
  • The list manager, which was part of JsPlumb Community edition, was removed.
  • The concept of a data manager - an add-on that responds to changes in the data model - was removed. This functionality can be modelled, if desired, by listening to appropriate model events.
  • Dotted notation for left/top values in vertex backing data is no longer supported. Your left/top properties must be in the top level of the backing data for each vertex.
  • Removed constant CLASS_DRAG_SELECT_DEFEAT - it was a duplicate of CLASS_SELECT_DEFEAT

Drag/Drop​

  • SurfaceDropManager and DropManager have been replaced with a new class Palette. This class has several enhancements to the previous classes:

    • it has a click mode where the user can select an item in the palette and then click on the canvas to drop it
    • it supports ignoreDropOnNode, a flag indicating that the palette should just ignore nodes altogether, and whenever something is dropped on a node or hovering over a node, the palette treats it as if it is over whitespace on the canvas

Surface​

  • Removed autoExitSelectMode flag from the surface render options. To set this up now you should provide an autoExit flag to the lasso plugin.
  • Removed enhancedView flag from the surface render options. This behaviour is always switched on now.
  • Removed addToDragSelectionOnSelect from the surface render options. What this means is that in VisuallyJs if you have one or more vertices in the current selection, they will not be dragged when some other vertex (not in the current selection) is dragged. This probably seems intuitive to you, which is why this flag has been defaulting to false and has now been removed. Use drag groups, or add all nodes you want to drag to the current selection, to drag multiple vertices.
  • Removed refreshAutomatically flag from the surface render options. This behaviour is permanently switched on in VisuallyJs.
  • Removed storePositionsInModel from the surface render options. This behaviour is permanently switched on in VisuallyJs.

Nodes/Groups​

  • filter in the surface dragOptions is now a function. cssFilter has been introduced to replicate what filter used to do.

Edges​

  • Edge geometry uses an object based syntax now instead of array based.
  • simpleEdgeStyles in render options has been moved into the new edges option (instead of simpleEdgeStyles:true you now need {edges:{simpleEdgeStyles:true}})
  • propertyMappings in render options has been moved into the new edges option (instead of propertyMappings:{...} you now need {edges:{propertyMappings:{...}}})
  • editablePaths in render options has been moved into the new edges option (instead of editablePaths:true you now need {edges:{editable:true}})
  • slightlyWonky option removed from Orthogonal connector

Plugins​

  • The DrawingToolsPlugin has been renamed to ResizingToolsPlugin, and the associated .jtk-draw-... classes have all been renamed to .vjs-resize-.... The type has changed from "drawingTools" to "resizingTools" (but its best to use ResizingToolsPlugin.type in your render options instead of a string anyway)
  • The ActiveFilteringPlugin was removed, replaced with an activeFiltering option in the render options to a surface.

Angular​

  • Components are prefixed with vjs- instead of jtk-

Vue​

  • Vue 2 Integration removed. Vue 2 reached EOL on December 31st 2023 and is no longer receiving new features, updates or bug fixes.

CSS​

  • The default stylesheet now declares position:absolute for .jtk-miniview (previously this was position:relative).
  • Class names are prefixed with vjs- instead of jtk-.

Try VisuallyJs​

VisuallyJs offers an extensive list of starter apps, diagrams, charts and dashboards to quick start your development, in React, Angular, Vue, Svelte and Typescript/Javascript.

VisuallyJs - callflow builders, sankey charts, database schemas, ERD diagrams and more
Call Flow
Use VisuallyJs to build a visual Call Flow editor
VisuallyJs - industry standard diagramming and rich visual UI Javascript and Typescript library
AI Agent Builder
Use VisuallyJs to create an advanced AI agent builder
VisuallyJs - effortlessly build professional node based UIs with Javascript, Typescript, React, Svelte, Angular and Vue
Chatbot
Use VisuallyJs to build a Chatbot editor, with actions, messages, input and choices
VisuallyJs - industry standard diagramming and rich visual UI Javascript and Typescript library
Flowchart
Fully featured flowchart builder including support for custom shapes, edge routing to avoid vertices, shape resize/rotate, SVG/PNG/JPG export and more
VisuallyJs - effortlessly build professional node based UIs with Javascript, Typescript, React, Svelte, Angular and Vue
BPMN
BPMN editor for modelling the steps of a business process. Pools, lanes, and a full set of task, event and gateway types
VisuallyJs - effortlessly build professional node based UIs with Javascript, Typescript, React, Svelte, Angular and Vue
ERD
ERD editor for modelling the steps of a business process
When you've reached the limits with ngDiagram, VisuallyJs has what you need
Gantt
Interactive Gantt chart featuring tasks, task groups and milestones
When you've reached the limits with ngDiagram, VisuallyJs has what you need
Kanban
Fully featured Kanban board. Drag items between columns and use the inspector to update items and columns
VisuallyJs - leading alternative to GoJS, JointJS, ReactFlow and SvelteFlow
Database Schema
Database Schema builder with support for tables, views, multiple columns types, and column relationships
VisuallyJs - build diagrams and rich visual UIs fast
Org Chart
Uses the classic org chart layout and provides an inspector from which the user can navigate around
VisuallyJs - JavaScript and Typescript diagramming library that fuels exceptional UIs
Circuit Diagram
Fully featured starter app containing a circuit diagram builder
VisuallyJs - industry standard diagramming and rich visual UI Javascript and Typescript library
Scada/HMI
Professional and modern Scada/HMI application with fluid, heating/cooling & instrumentation shapes, adhering to the HMI ISA-101 Design Standard
When you've reached the limits with ReactFlow, VisuallyJs has what you need
Mindmap
The mindmap builder highlights several advanced features, such as custom layouts, parsers and exporters
VisuallyJs - JavaScript and Typescript diagramming library that fuels exceptional UIs
Neighbourhood Views
Demonstrates how to include multiple views of a dataset on one page
When you've reached the limits with ngDiagram, VisuallyJs has what you need
Logic Gates
Fully featured starter app containing a logic gates diagram builder
VisuallyJs - effortlessly build professional node based UIs with Javascript, Typescript, React, Svelte, Angular and Vue
Template
Basic starter app demonstrating how to setup VisuallyJs and its main features
VisuallyJs - fully featured alternative to ReactFlow and ngDiagram
Area & Line charts
Use VisuallyJs to create area and line charts
VisuallyJs - industry standard diagramming and rich visual UI Javascript and Typescript library
Bar & Column charts
Multiple series, stacked, grouped, pivoted, and much more
VisuallyJs - build diagrams and rich visual UIs fast
Scatter & Bubble charts
Circle, rectangle, triangle or custom markers, multiple series, fully customizable
VisuallyJs - fully featured alternative to ReactFlow and ngDiagram
Sankey chart
Use VisuallyJs to create a professional Sankey chart, with support for pivoting
VisuallyJs - effortlessly build professional node based UIs with Javascript, Typescript, React, Svelte, Angular and Vue
Supply Chain Analyzer
Dashboard for managing and analyzing supply chains
VisuallyJs - leading alternative to GoJS, JointJS, ReactFlow and SvelteFlow
Network Infrastructure
Combine a network management diagram with charts showing projected cost and resource usage
VisuallyJs - industry standard diagramming and rich visual UI Javascript and Typescript library
Scrolling Lists
Use the ListManager plugin to manage scrolling lists: as elements are scrolled out of the view, their edges are moved to the list container
VisuallyJs - fully featured alternative to ReactFlow and ngDiagram
FIFA World Cup
A visualizer for the FIFA World cup - group stages, team journeys and a tournament view.
When you've reached the limits with ReactFlow, VisuallyJs has what you need
Fault Tree Analysis
Combines a fault tree analysis diagram with charts showing risk and list of cut sets