Layouts
A playground for testing the various layouts that JsPlumb offers - Hierarchy, Force Directed, Circular, Balloon and more.
Vanilla JS
ReactAngular
Vue
Svelte
Typescript
Layout:
{
type: Hierarchy
}The Hierarchy layout positions vertices in a hierarchy, oriented either vertically or horizontally, following a slightly modified version of the 'Sugiyama' method
The source code for this demo is available on Github.
Vanilla JS
Angular
React
Svelte
https://github.com/jsplumb-demonstrations/layouts
If you haven't got a license for JsPlumb, we offer 30 day evaluations.
Start a free trial- 'Reapply Layout' resets the positions of the nodes. Note that the Spring layout uses random positions to start and will not result in the same layout every time.
- Use the + button to add a new child node to some node.
- Click the 'Pencil' icon to enter 'select' mode, then select several nodes. Click the canvas to exit.
- Click the 'Home' icon to zoom out and see all the nodes.
- Use the undo/redo buttons to undo and redo deletion/addition operations
Layouts are discussed in the JsPlumb documentation here: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/layouts
More Demos
See all demos
Flowchart
Gantt
Chatbot
Call Flow
Kanban
Network Topology
Database Schema
Org Chart
Mindmap
Nested Groups
Path Tracing
Hello World
Image Processor
Neighbourhood Views
Active Filtering
Hierarchy Layout
Connector Editors
Layouts
Collapsible Hierarchy
