商用レベルのダイアグラムを描けるJointJSの紹介

タブレットアプリやWebアプリの中で図を描きたい、ユーザーにビジュアル的な操作を行わせたいと思うことは多々あるでしょう。しかし、商用レベルで使いやすいライブラリは多くありません。

そこで知っておきたいのがJointJSです。多種多様なダイアグラムを作成できるJavaScriptライブラリになります。基本機能はオープンソースですが、有償でサポートや追加機能が提供されています。有料版（Professional）は、多彩な機能が提供されています。

JointJSとは？

JointJSは10年以上にわたって開発されているUIライブラリになります。シーケンス図やノードをつなぎ合わせたUIなど、システムをビジュアル化するのに適しています。実際、数多くのサービスで利用されており、実績も十分です。

UIはSVGで生成されるので、軽量な動作が特徴となっています。四角や円、テキスト、画像などのエレメントが用意されています。有償版になると、40を超えるUIライブラリなどが使えるようです。

JavaScript diagramming library for interactive UIs – JointJS

インストール

jointはnpmで公開されており、npmコマンドなどでインストールできます。なお、オープンソース版ではコア機能のみとなっています。

npm install @joint/core

基本的な使い方

HTML側では、 div タグを用意します。

<div id="paper"></div>

そして、JavaScript側では以下のように記述します。

import { dia, shapes } from '@joint/core';

const namespace = shapes;

const graph = new dia.Graph({}, { cellNamespace: namespace });

const paper = new dia.Paper({
    el: document.getElementById("paper"),
    model: graph,
    width: 300,
    height: 300,
    background: { color: "#F5F5F5" },
    cellViewNamespace: namespace
});

これで、基本形の描画できる場が用意されます。

四角を追加する

四角は shapes.standard.Rectangle を使います。以下のコードで、四角を2つ追加しています。できあがった四角を graph に追加することで、描画されます。

const rect1 = new shapes.standard.Rectangle();
rect1.position(25, 25);
rect1.resize(180, 50);
rect1.addTo(graph);

const rect2 = new shapes.standard.Rectangle();
rect2.position(95, 225);
rect2.resize(180, 50);
rect2.addTo(graph);

rect1.attr("body", { stroke: "#C94A46", rx: 2, ry: 2 });
rect2.attr("body", { stroke: "#C94A46", rx: 2, ry: 2 });

rect1.attr("label", { text: "Hello", fill: "#353535" });
rect2.attr("label", { text: "World!", fill: "#353535" });

リンクを追加する

リンクは shapes.standard.Link を使います。以下のコードで、2つの四角をつなぐリンクを追加しています。リンクは、ソースとターゲットを指定して作成します。

const link = new shapes.standard.Link();
link.source(rect1);
link.target(rect2);
link.addTo(graph);

さらに appendLabel でラベルを追加できます。以下のコードでは、リンクに「to the」というテキストラベルを追加しています。

link.appendLabel({
    attrs: {
        text: {
            text: "to the"
        }
    }
});
link.router("orthogonal");
link.connector("straight", {  cornerType: "line" });