コミュニティバージョンと有償バージョンあり。コミュニティバージョンのドキュメントは https://docs.jsplumbtoolkit.com/community 。サンプルの一枚HTMLは：
パッケージと機能：
- core ： コネクション、エンドポイントの実現。DOMに依存しない。
- brawser-ui ： レンダラー。HTML要素にSVG要素を対応させて描画可能物を作る。
- util ： ユーティリティ関数
- common ： 有償とコミュニティに共通なインターフェイス定義など
- 他に、ベズー曲線、フローチャートサポートがある。
使い方：
- jsPlumbインスタンス（通常、大域空間に居るシングルトンオブジェクト）は instance と書く習慣。
- const instance = jsPlumbBrowserUI.newInstance({ 初期化データ }) としてインスタンスを作る。
- "the DOM has fully loaded" の後でないと何もできない。
- DOM loaded のときの初期化処理は、instance.bind("ready", ()=>{...}) で行う。
- コンテナ要素という概念がある。それはDOMの要素ノードだが、jsPlumbにとっての役割を持つ。
- コンテナ要素は、newInstance呼び出しの引数（初期化データ）として指定する。const instance = jsPlumbBrowserUI.newInstance({ container: someDOMElementNode })
- したがって、jsPlumbインスタンスは、生まれた瞬間から唯一のコンテナ要素を持つことになる。
- コンテナ要素は、CSSプロパティ position:relative でなくてはならない（要件、条件）。
- コンテナ要素のposition CSSプロパティは、ハマリ所になるようだ。忘れてしまうとトラブル。
- jsPlumbインスタンスは、管理対象要素〈"managed" elements〉を持つ。管理対象リスト達は、インスタンスの the "managed" list で保存管理される。
- 管理対象リストへの追加は、instance.addEndpoint(someElement, { endpoint:'Dot' })
- HTMLマークアップに data-jtk-* という data-属性を使う。jtk は ToolKit からだろう。Jsplumb ToolKit
- <div id="myElm" data-jtk-managed="foobarbaz"> ... </div> と書くと、managed element の管理名として"foobarbaz" が認識される。つまり、jsPlumbインスタンスは、管理対象要素のmanaged固有属性を見る、ということ。「固有属性」とは data-jtk-でプリフィックスされた属性。
- instance.connectメソッドも、両端の要素を管理対象リストに追加する。Graphvizで言うと、addEndPoint が node選言、connect が -> を書くことになる。
- 「管理対象」「エンドポイント」「コネクト」がテクニカルタームになる。
- すべての管理対象がエンドポイントなわけではない。管理対象としての追加には、instance.manage(someElement, "the internal id to use") を使う。
- 要素のzインデックスの注意する必要がある。
- CSS class とは、CSSから使えるクラスの意味か？ ともかく、jtk-endpoint, jtk-connector, jtk-overlay というCSSクラスを使うらしい。名前からして、これらは「クラスの値＝分類」だろう。jtk-hoverもあるということなので、動的に変わるクラスもありか。
- バルク操作には instance.setSuspendDrawing(true); ... ; instance.setSuspendDrawing(false, true); を使うとよい。パフォーマンスを上げることができる。
- instance.batch() というのもある。
