.png)
170+ pre-built apps
JointJS offers a wide range of pre-built demo applications and features that serve as boilerplates to help you kick off your project.
.png)
Featured applications
Show all
.png)
Coming soon in JointJS+
Open source apps
Show all
Feature showcase
Show all
Results
(
141
)
License:JointJS+
.png)
Kitchen Sink App
This demo presents all the main features of JointJS+ and is a useful guide to understand its capabilities.
joinjs
kitchen sink, generic diagramming, flowchart, process mapping, generic graph, workflow visualization, multi-domain diagrams, general purpose diagrams, emergency procedure, fire incident
Integration
Element palette
Import/Export
Export to SVG
Export to PNG/JPEG
Chatbot
Use this demo application to create an advanced chatbot solution with an intuitive drag-and-drop editor.
joinjs
chatbot, conversational bot, virtual assistant, automated customer support, dialogue system, messaging bot, interactive agent, customer service automation, chatbot workflow, chatbot design, conversational interface, chatbot builder
Integration
Element palette
Tooltips
Selection
Keyboard
BPMN
The BPMN demo demonstrates a standardized approach to modeling the steps of a business process from start to finish.
joinjs
business process model and notation, business process modeling, process diagram, workflow management, business process notation, process automation, operational workflows, process mapping, business workflow, enterprise process design, process optimization, task flow diagram, process visualization, business operations
Element palette
Print
Import/Export
Export to JSON
Selection
Flowchart
This flowchart created using our JavaScript/Typescript diagramming library shows a simple checkout process.
joinjs
flowchart, process flow, workflow diagram, process mapping, business process, decision tree, step-by-step process, process visualization, operational flow, task sequence, process documentation, procedural diagram, decision-making process, flow diagram, dark theme, order process, order fulfillment
Built-in shapes
CSS styling
Highlighters
Link tools
Connectors
Kanban
The Kanban demo shows how to visualize work, maximize efficiency and continuously improve.
joinjs
kanban, task management, workflow visualization, scrum board, agile project management, to-do list, project tracking, work in progress, productivity board, task prioritization, collaboration tool, sprint planning, team management, lean management, agile workflow
Automatic layout
Import/Export
Custom shapes
Text content
Drag & Drop
MindMap
This demo shows a diagram used to visually organize information into a hierarchy.
joinjs
mind map, brainstorming, idea mapping, concept mapping, visual thinking, information organization, thought organization, knowledge management, project planning, hierarchical diagram, note-taking, creative thinking, problem solving, idea generation, mind mapping software, cognitive mapping, idea visualization, planning tool, associative thinking, business plan
Toolbar
Automatic layout
Zoom & Pan
Keyboard
Drag & Drop
Organizational Chart
This demo showcases the power of JointJS+ on one of the most widely used diagram types.
joinjs
orgchart, organizational chart, org chart, company hierarchy, corporate structure, management chart, business organization, staff directory, personnel hierarchy, reporting structure, employee roles, team management, leadership chart, workforce planning, organizational design, corporate governance, hierarchy diagram, business units, department structure, management hierarchy
Automatic layout
External images
Custom shapes
Drag & Drop
Events
Corporate Organizational Chart
Define the organizational structure and fill it with people in a drag & drop fashion.
joinjs
orgchart, organizational chart, org chart, company hierarchy, corporate structure, management chart, business organization, staff directory, personnel hierarchy, reporting structure, employee roles, team management, leadership chart, workforce planning, organizational design, corporate governance, hierarchy diagram, business units, department structure, management hierarchy
Element palette
Zoom & Pan
Events
Popups
Minimap
AI Mind Map Generator
Enter any text and create an interactive mind map using the ChatGPT API and JointJS+ capabilities.
joinjs
AI, artificial intelligence, AI chatbot, conversational AI, natural language processing, NLP, virtual assistant, AI dialogue system, chatbot application, interactive conversation, language model, AI communication tool, intelligent agent, AI-powered chat, question answering system, conversation flow, digital assistant, AI interaction, chatbot design, mind map, chatgpt, mind map, brainstorming, idea mapping, concept mapping, visual thinking, information organization, thought organization, knowledge management, project planning, hierarchical diagram, note-taking, creative thinking, problem solving, idea generation, mind mapping software, cognitive mapping, idea visualization, planning tool, associative thinking
Toolbar
Automatic layout
Zoom & Pan
Keyboard
Drag & Drop
Image Processor
Image processing application using the full power of JointJS+ and the open-source OpenCV library.
joinjs
image processing, computer vision, digital image analysis, image filtering, photo editing, pixel manipulation, image transformation, visual data processing, graphical data analysis, media processing, image enhancement, pattern recognition, visual computing
Property editor & viewer
Element palette
Toolbar
CSS styling
Connection points
Sankey Diagram
See how to use link anchors, curve connector, stack layout and its drag & drop user interface to create Sankey diagram.
joinjs
sankey diagram, flow diagram, stream graph, user flow, energy flow, material flow, resource allocation, supply chain visualization, data visualization, network flow, energy management, process optimization, resource management, throughput analysis, graphs and networks, industrial process diagram, value stream mapping, systems engineering
Anchors
Custom shapes
Drag & Drop
Tooltips
Graph API
Decision Tree
An AI-driven experiment based on reinforcement learning can be visualized as a decision tree. Check out such an example.
joinjs
decision tree, flowchart, decision analysis, decision making, process flow, business logic, conditional branching, data-driven decisions, algorithm design, risk assessment, forecasting model, organizational planning, strategic planning, troubleshooting guide, root cause analysis, alternative evaluation, yes no flowchart, decision support system
Automatic layout
Vectorizer
Custom shapes
Graph API
Menus
Planogram
This demo app aims to help retailers better organize their brick-and-mortar stores.
joinjs
planogram, retail layout, shelf layout, merchandise display, retail planning, store shelf arrangement, product placement, retail merchandising, store layout optimization, visual merchandising, retail inventory arrangement, supermarket shelves, retail space management, retail shelf design, category management, retail marketing, store layout diagram, space planning chart
Element palette
Custom shapes
Validation
Events
Embedding
Timeline
Uncover key milestones from OpenAI and Anthropic in an interactive timeline.
joinjs
event timeline, project timeline, schedule visualization, chronological events, time tracking, history chart, milestone tracking, planning, roadmap, calendar view, sequence of events, time-based data, project management, timeline visualization, temporal data analysis, process tracking, openai, anthropic, AI
Automatic layout
Property editor & viewer
Toolbar
Routers
Drag & Drop
SCADA/HMI
This demo shows a Piping and Instrumentation Diagram (P&ID), which plays a key role in the design of SCADA/HMI systems.
joinjs
SCADA, HMI, human-machine interface, industrial automation, process monitoring, industrial control systems, piping and instrumentation diagram, P&ID, supervisory control and data acquisition, plant monitoring, factory automation, real-time monitoring, control room interface, energy management, process control, remote monitoring system, industrial control system, IoT, IoT-based monitoring system, operator interface, control panel interface, user interface for machines, machine control dashboard, industrial UI
Simulation
Animation
CSS styling
Custom properties
Custom shapes
Yamazumi 3D
This demo app aims to eliminate waste or aid workload balancing by displaying time cycles via a stacked bar chart.
joinjs
Yamazumi, Yamazumi chart, production balancing, line balancing, lean manufacturing, takt time chart, assembly line optimization, cycle time analysis, manufacturing workflow, process improvement, industrial engineering, production scheduling, time and motion study, work measurement, manufacturing operations, factory floor planning, process visualization, capacity planning, manufacturing efficiency, manufacturing throughput, stacked bar chart
Automatic layout
Drag & Drop
Custom shapes
Events
Element tools
UML Class Diagram
A UML Class diagram describes a system by visualizing the different types of objects within a system.
joinjs
Unified Modeling Language, class diagram, object-oriented design, software modeling, software architecture, system design, software development, model-driven engineering, software blueprint, software classes, inheritance diagram, software engineering, blockchain, bitcoin
Routers
Custom shapes
Built-in shapes
Anchors
Link tools
Data Mapping
This demo allows you to map abstract data that is provided in a given format and experience the power of JointJS+.
joinjs
data integration, ETL, data transformation, metadata mapping, database mapping, data schema mapping, data migration, data pipeline, data synchronization, system integration, data flow, data conversion, enterprise data management, data interoperability, data linking, data harmonization, business intelligence, data warehousing
Built-in shapes
Custom shapes
Link tools
Element tools
Shape transformation
Theory of Change
This demo application helps visualize goals, strategies, and challenges and uses a stack layout.
joinjs
change management, strategic planning, program evaluation, logic model, outcomes mapping, impact assessment, nonprofit planning, policy development, project strategy, intervention modeling, cause and effect analysis, results framework, success measurement, program logic, strategic change, social programs modeling
CSS styling
Automatic layout
Collapse & Expand
Anchors
Custom shapes
Sheet Cutting
A powerful app for creating and optimizing cutting plans for sheets of material.
joinjs
sheet cutting, sheet metal fabrication, metal processing, material optimization, cutting layout, cutting pattern, manufacturing, industrial production, metalworking, fabrication planning, nesting optimization, CNC cutting, sheet nesting, resource optimization.
Shape transformation
Toolbar
Validation
Measurement
Highlighters
Tree Designer
This demo app serves as a visual tool for building and editing tree structures.
joinjs
tree structure, hierarchical diagram, decision tree, classification, taxonomy, data hierarchy, lineage, tree visualization, node-link diagram, branching structure
Automatic layout
Property editor & viewer
Toolbar
Undo/Redo
Database
This demo application serves as a valuable example of an advanced visual application created using JointJS+.
joinjs
database diagram, entity-relationship diagram, ER diagram, data modeling, database schema, relational database, tables and relationships, data structure, database design, SQL database, database architecture, data management, information system, data entities, schema visualization, database blueprint
Property editor & viewer
Built-in shapes
Custom shapes
Routers
Highlighters
PERT Chart (JointJS) & Gantt Chart (Bryntum)
Explore how JointJS and Bryntum can be integrated to visualize a project schedule.
joinjs
project scheduling, task timeline, project management, resource planning, timeline, milestone tracker, dependency diagram
Integration
Zoom & Pan
Automatic layout
Built-in shapes
Custom shapes
JavaScript AST Visualiser
This demo offers an alternative to the AST Explorer and serves as a graphical representation of the source code.
joinjs
code structure explorer, JavaScript Abstract Syntax Tree, Abstract Syntax Tree, source code analyzer
Automatic layout
Integration
Collapse & Expand
Custom shapes
Zoom & Pan
Charts
This demo showcases how to create Line, Bar, Area, Combo charts, Pie & Donut charts in JointJS applications.
joinjs
charts, data visualization, graphs, line chart, bar chart, pie chart, area chart, statistical graphs, financial charts, business analytics, dashboard, reporting, trend analysis, data trends, visual data representation, analytics visualization
Built-in shapes
Tooltips
Events
Diagram Generation from External Data (NHL Score)
REST API data (NHL Score) to JointJS+ diagram w/ curved links & image addition.
joinjs
REST API diagram, data visualization, tree diagram, data‑driven diagram, data mapping, JSON-to-diagram
Automatic layout
Import/Export
Highlighters
Zoom & Pan
Built-in shapes
UML Use Case Diagram
A UML Use Case diagram is a graphical representation of how users interact with a system.
joinjs
object-oriented design, system modeling, classes, objects, inheritance, associations, object modeling, software documentation, actor-action diagram, system interaction diagram, user interaction diagram
Custom shapes
Events
Constraints on movement
Link labels
Embedding
Activity Diagram
Graphical representations of workflows of actions with support for choice, iteration and concurrency.
joinjs
workflow modeling, process flow, state transitions, process automation, flowchart, event-driven process, system behavior modeling, task sequence, user activities, process mapping, dynamic systems
Anchors
Highlighters
Custom shapes
Constraints on movement
Collapse & Expand
DWDM Circuit
Explore this network graphical view used in fabric-optic communications, also known as a DWDM Circuit.
joinjs
dense wavelength division multiplexing, optical networking, fiber optic communication, telecom networking, wavelength multiplexing, optical transport network, network infrastructure, optical circuit, data transmission, high-capacity networks, telecommunications engineering, wavelength routing, optical switching, metro networks, long haul networks
Simulation
Collapse & Expand
Automatic layout
Highlighters
Anchors
ROI calculator
A simple ROI calculator that shows how to use HTML form elements integrated into our shapes via foreign objects.
joinjs
return on investment, financial analysis, investment planning, cost-benefit analysis, profitability, business finance, economic evaluation, financial modeling, project evaluation, business metrics, investment decision-making, financial forecasting, budgeting, financial planning tool, investment returns, financial performance measurement
Custom shapes
HTML shapes
Embedding
Events
Sequence Diagram
This demo shows a popular interaction diagram that helps companies visualize how operations are performed.
joinjs
message flow, object interaction, process flow, software development, interaction diagram, communication diagram, event sequence, scenario modeling, behavior modeling, software architecture, dynamic behavior analysis, system operations, procedural flow
Link-to-link
Link labels
Link tools
Element tools
Highlighters
Fault Tree Analysis
This demo demonstrates a technique to conduct a root cause analysis.
joinjs
fta, fta-js, failure analysis, risk assessment, reliability engineering, safety engineering, fault diagnosis, root cause analysis, system safety, hazard analysis, event tree, risk management, failure modes, safety assessment, industrial safety, system reliability, risk mitigation, fault prediction, preventive maintenance, dark theme, dark mode
Custom shapes
Element tools
Events
Automatic layout
Graph API
Marey Chart
This demo shows a way to visually analyze transportation systems such as bus or train schedules.
joinjs
train schedules, railway timetables, transportation planning, traffic flow, time-distance diagram, transit visualization, public transport analysis, scheduling chart, passenger trains, train movement, timetable graph, railway operations, transit system, transport logistics
Zoom & Pan
Link tools
Vectorizer
Geometry
CSS styling
ER Diagrams
This demo application shows the entity-relationship model.
joinjs
erd, Entity-Relationship Diagram, database modeling, data modeling, database schema, relational database, entity relationship model, database design, data structure, database relationships, data architecture, information system design, conceptual data model, logical data model, database tables, object-relational mapping, data entities, schema visualization
Built-in shapes
Highlighters
Connection points
Link labels
Discrete Event System Specification
This demo shows how to use specific JointJS features for modeling dynamic systems using a discrete-event abstraction.
joinjs
devs, discrete-event abstraction, discrete event simulation, event-driven modeling, process simulation, system dynamics, queuing systems, manufacturing process, workflow simulation, logistics simulation, operations management, system behavior analysis, industrial process modeling, supply chain simulation, event scheduling, simulation of processes
Built-in shapes
Embedding
Highlighters
Validation
Adjustable interactivity
Finite State Machines
The Finite State Machine demo shows how we can use elements and links to create an abstract machine.
joinjs
fsa, state machine, state diagram, automata, automaton, computational model, state transitions, event-driven system, state-based logic, control flow, process states, system states, sequential logic, software modeling, system design, behavior modeling, statechart, state management, event handling
Events
Built-in shapes
Connectors
Petri Nets
This demo shows a mathematical modeling language describing distributed systems.
joinjs
workflow modeling, process flow, discrete event systems, concurrency modeling, system state transitions, process automation, process control, event-driven systems, computational models, state diagrams, process synchronization, distributed systems
Animation
Simulation
Custom shapes
UML Statechart Diagram
A statechart diagram is one of the five UML diagrams used to model the dynamic nature of a system.
joinjs
umlsc, Unified Modeling Language, software modeling, software architecture, class diagram, object-oriented design, system design, static structure diagram
Custom shapes
Embedding
Bandwidth
This demo demonstrates how to create a custom Bandwidth shape that is resizable, and has dynamic frequency labels.
joinjs
network bandwidth, data traffic control, network performance, bandwidth allocation, internet traffic management, ISP management, network optimization, data flow control, network monitoring, telecommunications network, broadband management, network capacity planning, data usage monitoring, network resources management.
Constraints on movement
Vectorizer
Geometry
CSS styling
Custom shapes
JointJS+ Layouts
This demo showcases the embedding functionality of JointJS+.
joinjs
graph layout, network visualization, data visualization, organizational chart, hierarchy diagram, flowchart, node-link diagram, graph analysis, network diagram, tree diagram, cluster diagram, visual data organization
Automatic layout
Drag & Drop
Events
Embedding
Graph API
Tree Graphs
This demo utilizes the JointJS+ TreeLayout plugin in order to create a tidy node and link diagram.
joinjs
tree diagram, hierarchical graph, organizational chart, family tree, genealogy, decision tree, taxonomy, data hierarchy, structure chart, node-link diagram, hierarchy visualization, ancestry chart, classification tree, parent-child relationships, network topology, dependency graph
Automatic layout
Built-in shapes
Selection
Zoom & Pan
Events
Tree graph and cycles
Take a look at this demo that shows how to maintain a tree with automatic layout, plus more.
joinjs
orgchart, Organizational chart, org chart, hierarchy diagram, corporate structure, company hierarchy, reporting structure, management chart, employee structure, staff organization, business organization, team structure, organizational hierarchy, personnel chart, workforce structure, leadership chart, departmental structure, company departments, org structure diagram, enterprise hierarchy
Automatic layout
Graph API
Anchors
Element tools
Events
Circular Layout
This demo shows how to form a circle from elements and automatically calculate the positions based on their count.
joinjs
circle, circle layout, circular diagram, cyclic relationship, radial layout, network visualization, cycle chart, circular graph, radial graph, circular reference map, cyclic process map, network connections, cycle visualization, circular data arrangement, radial data display
Automatic layout
Built-in shapes
Geometry
Serpentine Layout
Example of a serpentine layout, a custom layout where the elements are arranged in a zigzag pattern.
joinjs
serpentine process, linear manufacturing, assembly line flow, sequential production, process flowchart, industrial workflow, manufacturing process visualization, conveyor system layout, production line planning, factory layout design, workflow optimization, stepwise process mapping, process engineering, zigzag
Automatic layout
Built-in shapes
Responsive
Eclipse Kernel Layout
This demo provides a collection of algorithms to automatically layout diagrams with ports and hierarchical nodes.
joinjs
elk, graph visualization, automatic layout, hierarchical graph, flowchart, directed acyclic graph, software architecture diagram, dependency graph, layered graph layout, system design, data flow diagram, network topology, workflow diagram, process flow, hierarchy chart, software modeling, structural diagram, algorithm visualization, diagram optimization, network graph, project planning diagram
Automatic layout
Integration
Embedding
Ports
Zoom & Pan
Directed Graph Layout
This demo provides the user with the ability to automatically layout directed graphs.
joinjs
layout directed graph, dependency graph, flowchart, network visualization, hierarchical layout, node-link diagram, graph algorithms, data structure, workflow visualization, directed acyclic graph, DAG, process flow, task dependencies, software architecture, information flow, project planning, system design, causal relationship diagram, data flow diagram
Automatic layout
Integration
Link labels
Custom shapes
Highlighters
Hexagonal Grid
This demo shows how to create a hexagonal grid diagram using JointJS.
joinjs
hex map, strategy game map, tactical game board, board game layout, game design grid, hexagonal tiling, game map visualization, strategy game interface, turn-based game board, geographic grid, spatial grid system, resource management map, war game map, game world grid, hex lattice
Integration
Element tools
Highlighters
Vectorizer
Constraints on movement
Decision Tree Analysis
Check out this demo, which shows how to use the layout.TreeLayout plugin to build a decision tree analysis.
joinjs
decision analysis, classification, machine learning, data mining, predictive modeling, flowchart, logic tree, conditional branching, business decision making, risk analysis, algorithm visualization, hierarchical structure, dark mode, dark theme
Automatic layout
Custom shapes
Zoom & Pan
Tooltips
Graph API
Visio BPMN Import
The Visio BPMN Import demo imports a Microsoft Visio 2013 VSDX file and converts Visio Shapes to JointJS cells.
joinjs
business process model and notation, business process modeling, process diagram, workflow management, business process notation, process automation, operational workflows, process mapping, business workflow, enterprise process design, process optimization, task flow diagram, process visualization, business operations
Import/Export
Visio
Built-in shapes
Visio BPMN Export
The Visio BPMN Export demo allows the user to export a JointJS paper as a VSDX archive.
joinjs
business process model and notation, business process modeling, process diagram, workflow management, business process notation, process automation, operational workflows, process mapping, business workflow, enterprise process design, process optimization, task flow diagram, process visualization, business operations
Import/Export
Visio
Built-in shapes
Visio Orgchart Import
The demo allows the user to import an org chart Microsoft Visio 2013 VSDX file, and convert the shapes to JointJS cells.
joinjs
orgchart, Organizational chart, org chart, company hierarchy, corporate structure, employee hierarchy, management structure, workforce visualization, reporting lines, executive chart, business organization diagram, personnel chart, staff chart, leadership hierarchy, team structure, departmental chart, corporate chart, organizational structure visualization, employee roles diagram
Visio
Import/Export
Popups
Events
Built-in shapes
Visio Flowchart Import
Import a flowchart process Microsoft Visio 2013 VSDX file, and convert the Visio shapes to JointJS cells.
joinjs
flowchart, process flow, business process modeling, workflow diagram, flow chart, process mapping, activity diagram, operation flow, process visualization, business process management, flowchart import, diagram conversion, process documentation, workflow automation, flow diagram
Visio
Import/Export
Embedding
Link tools
Built-in shapes
BPMN Pools, Swimlanes & Milestones
Check out the new implementation of BPMN pools, swimlanes, and milestones that uses the powerful drag & drop feature.
joinjs
business process model and notation, business process modeling, process diagram, workflow management, business process notation, process automation, operational workflows, process mapping, business workflow, enterprise process design, process optimization, task flow diagram, process visualization, business operations, pools, swimlanes, milestones
Drag & Drop
Built-in shapes
Element palette
Text content
Highlighters
.png)
Cables
Explore an interactive wiring diagram featuring custom elements like multi-wire cables, screw terminals, and plugs.
joinjs
cable management, electrical wiring, cable routing, industrial wiring, power distribution, wiring diagrams, network cabling, electrical layout, telecom cabling, structured cabling, cable harness, wiring schematics, building infrastructure, data center cabling, electrical installation, cable trays
Custom shapes
Element palette
Drag & Drop
Ports
Events
PERT Chart
View a read-only PERT chart with automatic layout, zoom and pan, events and custom shapes.
joinjs
project management, project scheduling, task dependencies, critical path method, activity on node, project planning, timeline visualization, task sequencing, milestone tracking, project workflow, project timeline, project network diagram, dependency graph, project coordination
Zoom & Pan
Automatic layout
Built-in shapes
Custom shapes
Events
SysML Parametric Diagram
Parametric diagram (PAR), which focuses on modeling the relationships between parameters of elements in a system.
joinjs
systems modeling language, parametric diagram, engineering design, CAD modeling, technical drawing, geometric constraints, parametric modeling, design automation, engineering schematic, mechanical engineering, computer-aided design
Adjustable interactivity
Automatic layout
Custom shapes
Constraints on movement
Element palette
The ArchiMate® Enterprise Architecture Modeling Language
ArchiMate® language demo: Business Layer subset illustrating the structure and organization of an enterprise.
joinjs
enterprise architecture, enterprise modeling, business architecture, application architecture, technology architecture, architecture framework, IT strategy, organizational modeling, capability map, architecture diagram, enterprise IT, business process modeling, strategic planning, information systems architecture, digital transformation, enterprise design
Custom shapes
Context Toolbar
Embedding
External images
Highlighters
Tournament brackets
See a visualization of a double elimination tournament system shown on the latest Champions Chess Tournament.
joinjs
playoff bracket, competition bracket, elimination tournament, single elimination, double elimination, championship bracket, sports scheduling, matchups, sports event planning, game tournament, tournament tree, knockout stage, sports contest, bracket visualization, dark theme, dark mode
Automatic layout
Routers
Toolbar
Custom shapes
Undo/Redo
Rich Text Editor
This feature allows you to change font, size or color and use different text styles.
joinjs
text formatting, word processor, document editing, content creation, typing, text styling, inline editing, document management, digital publishing, text layout, writing tool, document composition, editorial software, text input
Text content
Zoom & Pan
Content-driven shapes
Toolbar
Selection
Transitions
This demo takes advantage of the PaperScroller plugin to utilize transitions and move the paper in an animated fashion.
joinjs
constellation mapping, star chart, astronomy, celestial navigation, night sky map, star clusters, astro chart, astronomy visualization, stellar coordinates, space mapping, astronomical data visualization, star patterns, constellation lines, celestial sphere, night sky navigation, astronomy education
Animation
External images
Custom shapes
Zoom & Pan
Graph API
Font Awesome
This demo shows how to use Font Awesome or other icon libraries together with JointJS.
joinjs
icon set, icon library, graphical icons, vector icons, UI icons, web icons, iconography, symbol set, scalable icons, pictograms, visual symbols, interface icons, graphic elements, common icons, web design icons, user interface symbols, icon collection
Integration
Export to PNG/JPEG
Highlighters
Element tools
Built-in shapes
Stencil Theme Picker
See how to offer users a range of pre-defined themes for elements that are aesthetically pleasing right from the start.
joinjs
theme selection, UI themes, user interface customization, appearance settings, visual styles, color schemes, application themes, light mode, design preferences, style switcher, user experience options, interface personalization
Popups
Element palette
Menus
CSS styling
Dynamic Tooltip Content
See how to display port tooltips on hover, with info about the connection and data sourced from the graph on demand.
joinjs
flowchart, process diagram, workflow visualization, business process mapping, decision flow, task sequence, step-by-step process, operational flow, process modeling, activity diagram, procedural chart, process management, flow diagram, process flowchart, business workflow
Tooltips
Ports
Built-in shapes
External images
Validation
Zoomable User Interface (ZUI)
This demo shows an alternative way of displaying a hierarchical diagram using a zoomable user interface (ZUI).
joinjs
interface design, graphical user interface, zoomable interface, nested zoom, multiscale navigation, spatial navigation, complex data visualization, hierarchical interface, zoomable data exploration, information architecture, interactive map, large data set navigation
Zoom & Pan
Built-in shapes
Embedding
Constraints on movement
Collapse / Expand
This demo utilizes the JointJS+ TreeLayout while providing the user with ability to collapse and expand branches.
joinjs
collapsible tree, hierarchical data, organizational chart, data visualization, expandable tree, tree diagram, parent-child relationship, decision tree, file system explorer, taxonomy, folder structure, nested lists, collapsible nodes, interactive hierarchy, org chart, orgchart
Automatic layout
Performance
Export to PNG/JPEG
Custom shapes
Virtual rendering
Nothing found
Please try different keywords or get in touch with us to get a tailored demo.
.png)
