JsDiagram is a JavaScript library that provides to web applications the ability to create and display various kinds of interactive diagrams. The component supports workflow, flowchart and process diagrams, object hierarchy and relationship charts, entity-relationship diagrams, structures like graphs and trees. Every behavioral and appearance aspect of JsDiagram can be customized as suits best your project. Diagram elements can have different styles, colors, fonts and pictures. The control's programming model comprises hundreds of methods, properties and events. The package relies on the MicrosoftAjax library for its JavaScript type system implementation and browser independence.
You can learn more about the JavaScript Diagram library at https://mindfusion.eu/javascript-diagram.html
A JsDiagram copy can be purchased with the control's full source code. JsDiagram is developed entirely in JavaScript using the HTML5 Canvas API.
For best experience, open the sample pages through a web server.
-
Anchors - demonstrates how to define and use anchor point patterns.
-
Animations - shows how to animate diagram nodes and links.
-
Containers - demonstrates foldable container nodes.
-
Controls - presents auxiliary UI controls available with JsDiagram.
-
DBDesign - generates SQL code from TableNodes drawn on canvas.
-
DomTree - shows how to use JsDiagram as a tree control, utilizing automatic tree arrangement and collapsing and expanding of sub-trees.
-
DragDrop - demonstrates drag-and-drop from external HTML elements to the diagram and from the diagram to external elements.
-
Flowcharter - shows how to create an online flowchart editor, providing UI for zooming, scrolling, creating new nodes and formatting nodes' contents.
-
FlowchartLayout - builds parse tree and block diagram from JavaScript source code and applies the TreeLayout and FlowchartLayout algorithms to them.
-
FractalLayout - demonstrates the FractalLayout tree layout algorithm.
-
Inheritance - demonstrates how to visualize class inheritance using TableNode objects.
-
Lanes - implements a Gantt chart using JsDiagram's swimlane grid.
-
LayeredLayout - demonstrates the LayeredLayout graph layout algorithm.
-
OrgChartEditor - uses custom nodes based on TableNode to display org-charts.
-
PathFinder - searches for paths between selected graph nodes.
-
SpanningCells - shows how to create cells that span several rows and/or columns in table nodes.
-
StockShapes - shows the predefined JsDiagram shapes and their identifiers.
-
SvgNodes - demonstrates the SvgNode type and how to use the library with jQuery.
-
TreeLayout - shows how to build a tree interactively using drag and drop.
-
TreeMap - demonstrates the TreeMapLayout tree mapping algorithm, where node weights are set to either population size or area of world countries.
-
Tutorial1 - demonstrates how to build a graph from relational Json data.
-
Tutorial2 - demonstrates how to build a tree from hierarchical Json data.
-
Tutorial3 - shows how to create a custom node class that implements its own rendering.
-
Tutorial4 - shows how to implement undo/redo, serialization and drag/drop creation support in custom node classes.
Stay in touch with MindFusion about our latest product announcements, tutorials and programming guidelines via Twitter or our company blog. A YouTube channel with interactive video tutorials is available here.
The end-user license agreement for JS Diagram is here.