JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    JavaScript diagramming library
    Filed under  › 

    • 🔾31%Overall
    • 140
    • 7 days
    • 🕩64
    • 👥11

    JointJS - JavaScript diagramming library powering exceptional UIs

    Build Status Total Discussion NPM Version NPM License

    JointJS is a tested and proven JavaScript/Typescript diagramming library that helps developers and companies of any size build visual and No-Code/Low-Code applications faster and with confidence. It’s a flexible tool from which a wide range of UIs can be created (interactive diagramming applications, drawing tools, data visualizations, UIs for monitoring systems, and many more). It can become the foundational layer of your next application and help you bring your idea to market in days, not months or years.

    Use Cases

    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.

    Features

    • 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

    Supported browsers

    • Latest Google Chrome (including mobile)
    • Latest Firefox
    • Latest Safari (including mobile)
    • Latest Microsoft's Edge
    • Latest Opera

    Development Environment

    If you want to work on JointJS locally, use the following guidelines to get started.

    Dependencies

    Make sure you have the following dependencies installed on your system:

    Setup

    Clone this git repository:

    git clone https://github.com/clientIO/joint.git
    

    Change into the joint directory:

    cd joint
    

    Install all NPM dependencies:

    npm install
    

    Generate build files from the source code:

    grunt install
    

    You are ready now to browse our demos:

    cd demo
    

    Tests

    To run all tests:

    grunt test
    

    To run only the server-side tests:

    grunt test:server
    

    To run only the client-side tests:

    grunt test:client
    

    Lint

    To check for linting errors in src and types directories:

    npm run lint
    

    To auto fix errors, run eslint for src and types directories:

    npm run lint:fix
    

    Code Coverage Reports

    To output a code coverage report in HTML:

    grunt test:coverage
    

    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 coverage directory.

    Building Distribution Files

    The dist directory contains pre-built distribution files. To re-build them, run the following:

    grunt dist
    

    Documentation

    The source for the JointJS documentation (plus Geometry and Vectorizer libraries) are included in this repository; see the docs directory. The documentation can be built into stand-alone HTML documents like this:

    grunt build:docs
    

    The output of the above command can be found at build/docs.

    Contributors

    License

    The JointJS library is licensed under the Mozilla Public License 2.0.

    Copyright © 2013-2022 client IO

    Show All