JointJS Demos

• absolute-port-layout-dynamic-port-sizes
• abstract-syntax-tree
• activity-diagram
• ai-agent-builder
• alignment-and-distance-based-position-guides
• angles
• animated-process-flow-diagram
• bandwidth
• bootstrap-tabs
• bpmn-editor
• bpmn-pools-swimlanes-milestones
• cables
• callouts
• change-element-text-alignment-in-inspector
• charts
• chatbot
• chatgpt-timeline
• chess
• circular-layout
• clipboard-api-integration
• collapsible-minimap
• comment-view
• confirmation-dialogs
• connecting-nodes-by-dragging-and-dropping
• connector-arrows
• constellation
• container-collapse-expand
• container-distance-guides
• container-layout
• content-driven-shapes
• context-toolbar
• control-tool
• convex-hull-algorithm
• copy-paste
• corporate-organizational-chart
• counters
• curve-connector
• curves
• data-mapping
• data-pipeline
• database
• decision-tree-analysis
• decision-tree
• diagram-generation-from-external-data
• diagram-index
• dialog-generator
• different-views-of-the-same-graph
• directed-graph-layout
• discrete-event-system-specification
• distances
• drop-image-as-shape
• drop-stencil-element-as-shape-icon
• dwdm-circuit
• dynamic-font-size
• dynamic-port-list
• dynamic-status-icons
• dynamic-stencil
• dynamic-tooltip-content
• electric-generator
• element-connect-tool
• element-grouping
• element-neighborhood-dialog-window
• element-palette-tooltips
• element-port-and-link-label-markup
• element-tags-and-badges
• elk-layout-with-ports-and-clusters
• elk-layout
• enitity-relationship-diagram
• external-svg-images
• fault-tree-analysis
• fills
• find-all-cells-between-2-elements
• finite-object-pool
• finite-state-machines
• fishbone
• fixed-connection-points
• flowchart
• font-awesome
• force-directed-interaction
• force-directed-layout
• force-directed-radial-force
• framework-element-view
• genogram
• hexagonal-grid
• hierarchical-diagrams
• highlighter-view-update-attribute
• hover-element-connect-tool
• hover-link-connect-tool
• icons
• image-processor
• infinite-paper-vs-sheets
• inspector-dynamic-element-type
• inspector-for-selection
• isometric-diagram
• json-visualizer
• kanban
• kitchen-sink
• libavoid-standalone-link-routing
• link-connect-tool
• link-teleports
• links
• list-of-links-in-inspector
• logic-circuits
• marey-chart
• marketing-automation
• microservices-architecture
• microsoft-adaptive-cards
• mind-map
• mix-bus
• move-elements-via-keyboard
• msagl-layout
• multidirectional-tree
• nodejs-milestones-timeline
• optional-ports
• organizational-chart
• paper-attributes
• parametric-diagram
• pdf-export
• pert-chart
• petri-nets
• planogram
• port-drag-drop
• port-inspector
• port-reordering-tool
• presentation-mode
• preserve-spaces-in-text-wrap
• puzzle
• rectangular-layout
• resize-control-tool
• rich-text-editor
• roi-calculator
• rough-shapes
• sankey-diagram
• saving-and-loading-using-file-system-access-api
• scada
• scale-option-for-tools
• scale-svgmarker
• searchable-sitemap
• selection-alignment
• sequence-diagram
• serpentine-layout
• shape-builder
• shapes-drawing
• sheet-cutting
• shortest-path-algorithm
• smart-routing
• snap-links-to-themselves
• spreadsheet-shapes-with-handsontable
• stencil-favorite-in-use-groups
• stencil-theme-picker
• stencil-vs-diagram-elements
• tabs
• tasks
• team-order
• text-position-based-on-space-availability
• the-archimate-enterprise-architecture-modeling-language
• theory-of-change
• timeline
• tokens
• touch-gestures
• tournament-brackets
• translate-connected-links-in-selection
• tree-builder
• tree-collapse-expand
• tree-designer
• tree-graph-and-cycles
• tree-of-life
• tree-stencil
• ui-popup
• uml-class-diagrams
• uml-class-shape-inspector
• uml-statechart-diagram
• upload-image-to-stencil
• use-case-diagram
• vector-editor
• view-edit-mode
• visio-bpmn-export
• visio-bpmn-import
• visio-default-import
• visio-flowchart-import
• visio-org-chart-import
• workflow-builder
• working-with-ports
• yamazumi-3d