Help us understand the problem. What is going on with this article?

JointJSで組織図を書いてみる

概要

フロー図をブラウザ上でかけないか調べていて見かけたので使ってみる。

JointJS

調べてみるとJointJSというものがヒットしたので、使ってみる。

やってみたコードは以下のgithubに登録しています

docker準備

npmコマンドを使うのでdockerで node.js を用意します。

コンソール
$ docker-compose build

インストール

JointJSをインストールします。

コンソール
$ docker-compose run --rm node npm init
$ docker-compose run --rm node npm install --save jointjs 

jquerybackbone.js , loadash に依存しているようです

デモページ作成

デモページにある組織図のコードを動かしてみる。

※ ブラウザでアクセスする

src/demo/org.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>ORG-組織図</title>

    <link rel="stylesheet" type="text/css" href="../node_modules/jointjs/dist/joint.min.css">
    <style type="text/css">
        h1, p, div { padding:0; margin:0; }
        h1 { font-size:14px; }
        #paper { border:solid 1px #ccc; background-color: #eee; margin-top: 10px; }
    </style>
</head>
<body>
    <h1><a href="https://resources.jointjs.com/demos/org">ORG-組織図</a></h1>
    <p>jointjsを動かしてみる!!</p>

    <div id="paper"></div>
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../node_modules/lodash/lodash.min.js"></script>
    <script src="../node_modules/backbone/backbone-min.js"></script>
    <script src="../node_modules/jointjs/dist/joint.min.js"></script>
    <script>
      var graph = new joint.dia.Graph();

      var paper = new joint.dia.Paper({
        el: $('#paper'),
        width: 800,
        height: 600,
        gridSize: 1,
        model: graph,
        perpendicularLinks: true,
        restrictTranslate: true
      });

      var member = function(x, y, rank, name, image, background, textColor) {

        textColor = textColor || "#000";

        var cell = new joint.shapes.org.Member({
          position: { x: x, y: y },
          attrs: {
            '.card': { fill: background, stroke: 'none'},
            image: { 'xlink:href': '../images/'+ image, opacity: 0.7 },
            '.rank': { text: rank, fill: textColor, 'word-spacing': '-5px', 'letter-spacing': 0},
            '.name': { text: name, fill: textColor, 'font-size': 13, 'font-family': 'Arial', 'letter-spacing': 0 }
          }
        });
        graph.addCell(cell);
        return cell;
      };

      function link(source, target, breakpoints) {

        var cell = new joint.shapes.org.Arrow({
          source: { id: source.id },
          target: { id: target.id },
          vertices: breakpoints,
          attrs: {
            '.connection': {
              'fill': 'none',
              'stroke-linejoin': 'round',
              'stroke-width': '2',
              'stroke': '#4b4a67'
            }
          }

        });
        graph.addCell(cell);
        return cell;
      }

      var bart = member(300, 70, 'CEO', 'Bart Simpson', 'male.png', '#30d0c6');
      var homer = member(90, 200, 'VP Marketing', 'Homer Simpson', 'male.png', '#7c68fd', '#f1f1f1');
      var marge = member(300, 200, 'VP Sales', 'Marge Simpson', 'female.png', '#7c68fd', '#f1f1f1');
      var lisa = member(500, 200, 'VP Production' , 'Lisa Simpson', 'female.png', '#7c68fd', '#f1f1f1');
      var maggie = member(400, 350, 'Manager', 'Maggie Simpson', 'female.png', '#feb563');
      var lenny = member(190, 350, 'Manager', 'Lenny Leonard', 'male.png', '#feb563');
      var carl = member(190, 500, 'Manager', 'Carl Carlson', 'male.png', '#feb563');

      link(bart, marge, [{x: 385, y: 180}]);
      link(bart, homer, [{x: 385, y: 180}, {x: 175, y: 180}]);
      link(bart, lisa, [{x: 385, y: 180}, {x: 585, y: 180}]);
      link(homer, lenny, [{x:175 , y: 380}]);
      link(homer, carl, [{x:175 , y: 530}]);
      link(marge, maggie, [{x:385 , y: 380}]);
    </script>
</body>
</html>

動作確認

ブラウザでアクセスしてみる。
例) http://localhost:63342/jointjs-leaning/src/demo/org.html

demo.png

まとめ

カンタンに図が作れるようです。
デモを見てみる限りでは、フロー図のサンプルはあまり気に入ったものがなかったので、次はFlowyを試してみたいと思います。

参考サイト

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした