Customizable Draggable Flowchart Based on jsPlumb

Add-ons

2026-07-21 12:36 9 次浏览 • 0 次下载 52.4KB

Customizable Draggable Flowchart Based on jsPlumb

Plugin Description: A draggable flowchart implemented with jsPlumb.js. It supports JSON export, allowing you to iterate through the data in the JSON and load the flowchart yourself.

Last Updated: 2020-10-28 00:26:05

Usage

1. Files to include:

<link rel="stylesheet" type="text/css" href="./css/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="./css/style.css">
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://www.jq22.com/jquery/jquery-ui-1.11.0.js"></script>
<script type="text/javascript" src="./js/jquery.jsPlumb.min.js"></script>
<script type="text/javascript" src="./js/index.js"></script>

2. Official jsPlumb.js method reference:

1	`https://github.com/wangduanduan/jsplumb-chinese-tutorial`

jsPlumb Chinese Basic Tutorial

What Can jsPlumb Do?

Whether you should use it depends on what you want to accomplish with jsPlumb. This framework is suitable for web applications that require drawing diagrams, such as Visio-like applications or workflow designers. Since all parameters of diagram elements and connections can be finely controlled, you can draw virtually any type of diagram you can imagine!

Basic Concepts

Source Node
Target Node
Anchor: An anchor is located on either the source node or the target node.
Endpoint: An endpoint is located on a connection line.
Connector: A connection, also known as a connecting line.
Overlays: Elements such as text or arrows displayed on connection lines.

Anchors [todo]

Anchor Types:

Static Anchor
Dynamic Anchor
Perimeter Anchor
Fixed Anchor

Connectors [todo]

Connection Line Types:

Bezier: Bezier Curve
Straight: Straight Line
Flowchart: 90-Degree Connector
State Machine

Endpoints [todo]

Endpoint Types:

Dot
Rectangle
Image
Blank

Overlays [todo]

Overlays can be understood as elements such as text or arrows displayed on connection lines.

Overlay Types

Arrow
Label
PlainArrow
Diamond
Custom

// Multiple overlays can be added to a connection line,
// Each overlay can specify a relative position
// HTML can be written directly inside a label-type overlay
// 
jsPlumb.connect({
  ...
  connectorOverlays: [
    ['Arrow', {
      width: 10,
      length: 10,
      location: 1
    }],
    ['Label', {
      label: '<button class="delete-node-btn">X</button>',
      cssClass: '',
      labelStyle: {
        color: 'red'
      },
      events: {
        click: function (labelOverlay, originalEvent) {
          console.log('click on label overlay for :' + labelOverlay.component)
          console.log(labelOverlay)
          console.log(originalEvent)
        }
      }
    }]
  ]
});

Basic Demos

Connect Two Nodes

The jsPlumb.ready method works similarly to jQuery's ready method. jsPlumb.connect is used to create connections.

<div id="diagramContainer">
    <div id="item_left" class="item"></div>
    <div id="item_right" class="item" style="margin-left:50px;"></div>
  </div>
  <script src="https://cdn.bootcss.com/jsPlumb/2.6.8/js/jsplumb.min.js"></script>
  <script>
    /* global jsPlumb */
    jsPlumb.ready(function () {
      jsPlumb.connect({
        source: 'item_left',
        target: 'item_right',
        endpoint: 'Dot'
      })
    })
  </script>

Parameter Description: jsPlumb.connect(config) returns connection

Parameters	Parameter Type	Required	Description
source	String,Object,Endpoint	Yes	The identifier of the source of the connection. Can be an ID, element, or Endpoint.
target	String,Object,Endpoint	Yes	The identifier of the target of the connection. Can be an ID, element, or Endpoint.
endpoint	String	Optional	Endpoint type and shape