Further information, examples and documentation can be found at jointjs.com.
:1234: Get started with tutorials.
:bulb: To ask a question, share feedback, or engage in a discussion with other community members, visit our GitHub discussions.
:pen: More examples are available on CodePen.
:book: Check out our mind-map documentation.
- essential diagram elements (rect, circle, ellipse, text, image, path)
- ready-to-use diagram elements of well-known diagrams (ERD, Org chart, FSA, UML, PN, DEVS, ...)
- custom diagram elements based on SVG or programmatically rendered
- connecting diagram elements with links or links with links
- customizable links, their arrowheads and labels
- configurable link shapes (anchors, connection points, vertices, routers, connectors)
- custom element properties and data
- import/export from/to JSON format
- customizable element ports (look and position, distributed around shapes or manually positioned)
- rich graph API (traversal, dfs, bfs, find neighbors, predecessors, elements at point, ...)
- granular interactivity
- hierarchical diagrams (containers, embedded elements, child-parent relationships)
- element & link tools (buttons, status icons, tools to change the shape of links, ...)
- highlighters (provide visual emphasis to your elements)
- automatic layouts (arrange the elements and links automatically)
- highly event driven (react on any event that happens inside the diagram)
- zoom in/out
- touch support
- MVC architecture
- SVG based
- ... a lot more
- Latest Google Chrome (including mobile)
- Latest Firefox
- Latest Safari (including mobile)
- Latest Microsoft's Edge
- Latest Opera
Development EnvironmentIf you want to work on JointJS locally, use the following guidelines to get started.
DependenciesMake sure you have the following dependencies installed on your system:
SetupClone this git repository:
git clone https://github.com/clientIO/joint.git
Change into the joint directory:
Install all NPM dependencies:
Generate build files from the source code:
You are ready now to browse our demos:
TestsTo run all tests:
To run only the server-side tests:
To run only the client-side tests:
LintTo check for linting errors in
npm run lint
To auto fix errors, run eslint for
npm run lint:fix
Code Coverage ReportsTo output a code coverage report in HTML:
To output a code coverage report in lcov format:
grunt test:coverage --reporter="lcov"
The output for all unit tests will be saved in the
Building Distribution FilesThe
distdirectory contains pre-built distribution files. To re-build them, run the following:
DocumentationThe source for the JointJS documentation (plus Geometry and Vectorizer libraries) are included in this repository; see the
docsdirectory. The documentation can be built into stand-alone HTML documents like this:
The output of the above command can be found at
LicenseThe JointJS library is licensed under the Mozilla Public License 2.0.
Copyright © 2013-2023 client IO