【亲测免费】 Joint.js 开源项目教程

2026-01-19 11:08:23作者：董灵辛Dennis

A proven SVG-based JavaScript diagramming library powering exceptional UIs

项目地址：https://gitcode.com/gh_mirrors/jo/joint

项目介绍

Joint.js 是一个强大的 JavaScript 库，用于创建静态或交互式的图表和图表编辑器。它广泛应用于流程图、BPMN、ERD、组织结构图等领域。Joint.js 提供了丰富的图形元素和灵活的布局选项，使得开发者可以轻松构建复杂的图表应用。

项目快速启动

安装

首先，通过 npm 安装 Joint.js：

npm install jointjs

基本示例

以下是一个简单的 Joint.js 示例，展示如何创建一个基本的图表：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="node_modules/jointjs/dist/joint.css" />
</head>
<body>
    <div id="myDiagram"></div>
    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script src="node_modules/lodash/lodash.js"></script>
    <script src="node_modules/backbone/backbone.js"></script>
    <script src="node_modules/jointjs/dist/joint.js"></script>
    <script>
        var graph = new joint.dia.Graph;

        var paper = new joint.dia.Paper({
            el: document.getElementById('myDiagram'),
            model: graph,
            width: 600,
            height: 400,
            gridSize: 10
        });

        var rect = new joint.shapes.standard.Rectangle();
        rect.position(100, 30);
        rect.resize(100, 40);
        rect.attr({
            body: {
                fill: 'blue'
            },
            label: {
                text: 'Hello',
                fill: 'white'
            }
        });
        rect.addTo(graph);

        var rect2 = rect.clone();
        rect2.translate(300, 0);
        rect2.attr('label/text', 'World!');
        rect2.addTo(graph);

        var link = new joint.shapes.standard.Link();
        link.source(rect);
        link.target(rect2);
        link.addTo(graph);
    </script>
</body>
</html>

应用案例和最佳实践

应用案例

流程图编辑器：Joint.js 可以用于创建复杂的流程图编辑器，支持节点和边的自定义样式和交互。
组织结构图：通过 Joint.js，可以轻松构建组织结构图，展示公司或团队的层级关系。
网络拓扑图：Joint.js 支持创建网络拓扑图，用于展示网络设备和连接关系。

最佳实践

模块化设计：将图表的各个组件（如节点、边、工具栏）进行模块化设计，便于维护和扩展。
自定义样式：利用 Joint.js 的样式系统，为图表元素添加自定义样式，提升用户体验。
性能优化：对于复杂的图表，注意性能优化，如使用虚拟渲染技术，减少不必要的重绘。

典型生态项目

Rappid：Rappid 是 Joint.js 的商业扩展，提供了更多高级功能和工具，如智能布局、数据绑定、协作编辑等。
Diagram Maker：Diagram Maker 是一个基于 Joint.js 的图表编辑器框架，提供了丰富的预设组件和布局算法。
JointJS+：JointJS+ 是 Joint.js 的增强版本，集成了更多实用工具和插件，适用于企业级应用开发。

通过以上内容，您可以快速上手 Joint.js，并了解其在实际项目中的应用和最佳实践。

A proven SVG-based JavaScript diagramming library powering exceptional UIs

项目地址：https://gitcode.com/gh_mirrors/jo/joint

登录后查看全文

项目优选

收起

deepin linux kernel

Claude Code 的开源替代方案。连接任意大模型，编辑代码，运行命令，自动验证 — 全自动执行。用 Rust 构建，极致性能。｜ An open-source alternative to Claude Code. Connect any LLM, edit code, run commands, and verify changes — autonomously. Built in Rust for speed. Get Started

本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。

🎉 (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统

Ascend Extension for PyTorch

openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。

🍒 Cherry Studio 是一款支持多个 LLM 提供商的桌面客户端

flutter_flutter

Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台，包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分，采用java语言实现，可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用