<
Download
JS Diagram Library DHTMLX Diagram Demos

DHTMLX Diagram Demos

Find out different diagram and org chart templates and explore DHTMLX
diagramming library functionality working in online diagram editors.
Get free trial
Buy
Filters
Category
clear
Org Chart
Flowchart
Mind Map
Tree
Timelines
Swimlanes
PERT Charts
Grouped Elements
UML
Venn Diagram
Layouts
Cycle Diagram
Grid Diagram
Fishbone Diagram (Ishikawa)
Example
clear
AI Org Chart Builder
Company Structure
Hospital Org Chart
Family Tree
Wide Flowchart
Activity Diagram
Block Diagram
Network Diagram
Emotions Mind Map
Site Map
Vertical Decision Tree
Decision Tree
Swimlane with 9 Sections
Swimlane with 5 Rows
Eisenhower Matrix
Virtual Cloud Architecture
Waterfall
UML Class Diagram
Venn Diagram
Orthogonal Auto Layout
Life Cycle Diagram
Radial Auto Layout
Family Tree Diagram
Spiral Diagram
Gantt Chart with PERT Diagram
PERT Chart
Timeline Diagram
Task Grid Diagram
Fishbone with Multiple Causes
Cause-and-Effect Diagram
AI Org Chart Builder
The online demo shows how AI works with DHTMLX Diagram to generate structured organizational charts from plain text.
Start generating
Company Structure
A widespread type of org chart used to depict an organization's hierarchy. Users can add any number of partners and assistants.
View and edit
Hospital Org Chart
A custom hospital org chart illustrating the medical hierarchy which allows users to reorganize departments via drag-and-drop.
View and edit
Family Tree Diagram
A template of a family tree diagram with multiple parents at the top level and custom shapes for highlighting relations.
View and edit
Family Tree
An example of a genealogy chart representing kin relationships in the Skywalker family within 6 generations.
View and edit
Wide Flowchart
A horizontal flowchart you can create to provide a detailed look into how users interact with a website.
View and edit
Activity Diagram
For modeling any business process and outlining an action plan thus serving as a handy tool to meet the organization's needs.
View and edit
Block Diagram
A block diagram example that describes a data planning model with rectangular blocks and connectors with notes.
View and edit
Network Diagram
A server network system that shows connections between various network objects like remote computers, databases, etc.
View and edit
Emotions Mind Map
Illustrates the emotion classification by EARL as a core topic surrounded by the branches of 48 emotions as subtopics.
View and edit
Site Map
A user flow map with custom shapes visualizing a website with the main page as the root node and other pages as child nodes.
View and edit
Decision Tree
A tree structure helps to compare different options and reflect business decisions together with the expenses to draw conclusions.
View and edit
Vertical Decision Tree
Apart from decision-making, a tree diagram can be used to show an application’s functionality or steps of any work process.
View and edit
Swimlane with 9 Sections
A template you can use to represent any process, e.g. business and manufacturing, or its separate parts from start to finish.
View and edit
Swimlane with 5 Rows
An example of using swimlanes to allocate game levels and locations. Each location is represented with a custom shape.
View and edit
Eisenhower Matrix
An effective task management tool used for organizing and prioritizing tasks by their urgency and importance.
View and edit
Waterfall
A waterfall diagram template allows breaking the process down into several steps and distributing them to get a broader perspective.
View and edit
Virtual Cloud Architecture
Visualization of a virtual private cloud architecture. End-users can manipulate elements united in groups as a whole.
View and edit
UML Class Diagram
Used widely by developers to build the model of a system together with all its classes and objects before the dev process starts.
View and edit
Venn Diagram
A template comprises several round color shapes which partially overlap for easily defining commonalities and differences.
View and edit
Life Cycle Diagram
A project's life period made with sticky notes for illustrating each project stage and arrows for determining the process flow.
View and edit
Orthogonal Auto Layout
An orthogonal auto-layout algorithm enables users to arrange shapes along vertical and horizontal lines with just one click.
View
Radial Auto Layout
A radial auto-layout algorithm that arranges shapes on imaginary circles around the central shape evenly separated from one another.
View and edit
Spiral Diagram
A model that looks like a spiral with many loops and is used for providing systematic and iterative approaches.
View and edit
Gantt Chart with PERT Diagram
A PERT chart integration with DHTMLX Gantt via a common dataset and synchronized task and link management.
View and edit
PERT Chart
A PERT diagram that organizes tasks into logical stages, highlighting estimated durations and dependency flow.
View
Timeline Diagram
A timeline diagram created with a vertical line and shapes with events branching over it representing time progressing from top to bottom.
View and edit
Task Grid Diagram
A grid-style diagram where tasks are sorted into cells within a grid. Each task shape is colored depending on task fulfillment.
View and edit
Fishbone with Multiple Causes
A fishbone diagram (Ishikawa) that maps out multiple contributing factors to a problem, organized by priority level.
View and edit
Cause-and-Effect Diagram
A fishbone diagram that helps identify underlying problem causes, featuring custom shapes with unique labels and colors.
View and edit
Fishbone Diagram (Ishikawa)
A structured visualization that breaks down a problem’s root causes into clear, organized categories.
Configurable shapes and lines
Intuitive Diagram Editor UI
Export to PDF/PNG and JSON
Read about fishbone diagrams
Timeline Diagram
Visualization of events arranged in chronological order along a linear axis.
Set of default shapes
Option to add custom shapes
Edit and style events from the UI
Labels for connectors
Read about timelines
PERT Charts
Representation of the sequence and dependencies of tasks to identify the most efficient project timeline.
Seamless synchronization with DHTMLX Gantt
Configurable shapes and connectors
Export to JSON, PDF/PNG
Read about PERT charts
Task Grid Diagram
Visual representation of tasks in a structured manner for efficient workflow management.
Any number of task shapes
Copy the shape style and apply it to other elements
HTML and SVG templates for shapes
Read about grid diagrams
JavaScript Org Chart
Graphical representation of an organizational structure or pecking order.
Add images and color headers
Include icons inside cards
Open and collapse branches
Edit cards from the UI
Read about org charts
JavaScript Flowchart
Illustration of simple and complex processes using nodes of different shapes.
30+ default shapes
Ability to create custom shapes
Labels for connectors
Horizontal, vertical, and auto layouts
Read about flowcharts
JavaScript Mind Map
Visualization of ideas and concepts with topics and subtopics.
Curved connector lines
Expanding and collapsing branches
Custom templates for shapes
Setting direction for subtopics
Read about mind maps
JavaScript Tree
Distribution of possible outcomes or paths in a process.
Simple and complex decision trees
Built-in and custom shapes
Labels for connector lines
Horizontal, vertical, and auto layouts
Read about trees
Swimlane
Parallel, horizontal, or vertical “lanes” within a flowchart.
Any number of cells
Header and subheader
Expanded and collapsed states
Style settings for swimlane cells
Read about swimlanes
Grouped Elements
Organization of shapes into groups.
Adding a group header
Expanding and collapsing groups
Defining the behavior of group items
Styling groups
Read about grouped elements
UML Diagram
Models of complex systems and software applications.
HTML and SVG templates for shapes
Adding event handlers for custom shapes
Specifying the needed editor fields
Export to JSON, PDF/PNG
Read about UML diagrams
Venn Diagram
Demonstration of relationships between sets of objects.
HTML and SVG templates for shapes
Adding event handlers for custom shapes
Specifying the needed editor fields
Export to JSON, PDF/PNG
Read about Venn diagrams
Auto Layout Algorithm
Auto placement of shapes in a hierarchical order.
Orthogonal and radial layouts
Straight and curved connector lines
Setting the distance between nodes
Read about auto layouts
Cycle Diagram
The sequence of events or steps in a circular manner.
HTML and SVG templates for shapes
Adding event handlers for custom shapes
Specifying the needed editor fields
Export to JSON, PDF/PNG
Read about cycle diagrams
Try DHTMLX Diagram for Free
Download the DHTMLX trial version and evaluate it free of charge for 30 days benefiting from the official technical support of our team.
Get free trial
NO credit card required