【mermaid.js】フローチャートに画像を表示する

Uncategorized
924 words

mermaid.js のフローチャートに画像を表示させます。

はじめに

mermaid.js とは、JavaScript製のフローチャート作成ライブラリです。複雑なフローチャートやシーケンス図が簡単に書けちゃいます。

mermaid.js 公式サイトはこちら

で、今回フローチャートに画像を表示させたかったのですが、思いのほか上手くいかず四苦八苦してやっと表示できるようになったので紹介します。

完成系

手っ取り早く完成系から紹介します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<html>
<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mermaid/6.0.0/mermaid.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/6.0.0/mermaid.js"></script>
  <script>
    window.onload = function () {
      var mermaidAPI = mermaid.mermaidAPI;
      var config = {
        startOnLoad: false,
        htmlLabels: true,
        callback: function (id) {
          console.log(id, ' rendered');
        },
        flowchart: {
          useMaxWidth: false,
        }
      };
      mermaid.initialize(config);
      var element = document.getElementById("app");
      var insertSvg = function (svgCode, bindFunctions) {
        element.innerHTML = svgCode;
      };
      var graphDefinition = `
    graph LR
    subgraph \u5e7c\u5e74\u671f
    botamon(<img src='https://digimon.net/cimages/digimon/botamon.jpg' width='40' height='40' /><br>\u30dc\u30bf\u30e2\u30f3)
    koromon(<img src='https://digimon.net/cimages/digimon/koromon.jpg' width='40' height='40' /><br>\u30b3\u30ed\u30e2\u30f3)
    end
    subgraph \u6210\u9577\u671f
    agumon(<img src='https://digimon.net/cimages/digimon/agumon.jpg' width='40' height='40' /><br>\u30a2\u30b0\u30e2\u30f3)
    betamon(<img src='https://digimon.net/cimages/digimon/betamon.jpg' width='40' height='40' /><br>\u30d9\u30bf\u30e2\u30f3)
    end
    subgraph \u6210\u719f\u671f
    greymon-first(<img src='https://digimon.net/cimages/digimon/greymon-first.jpg' width='40' height='40' /><br>\u30b0\u30ec\u30a4\u30e2\u30f3)
    tyranomon(<img src='https://digimon.net/cimages/digimon/tyranomon.jpg' width='40' height='40' /><br>\u30c6\u30a3\u30e9\u30ce\u30e2\u30f3)
    devimon(<img src='https://digimon.net/cimages/digimon/devimon.jpg' width='40' height='40' /><br>\u30c7\u30d3\u30e2\u30f3)
    meramon(<img src='https://digimon.net/cimages/digimon/meramon.jpg' width='40' height='40' /><br>\u30e1\u30e9\u30e2\u30f3)
    airdramon(<img src='https://digimon.net/cimages/digimon/airdramon.jpg' width='40' height='40' /><br>\u30a8\u30a2\u30c9\u30e9\u30e2\u30f3)
    seadramon(<img src='https://digimon.net/cimages/digimon/seadramon.jpg' width='40' height='40' /><br>\u30a8\u30a2\u30c9\u30e9\u30e2\u30f3)
    numemon(<img src='https://digimon.net/cimages/digimon/numemon.jpg' width='40' height='40' /><br>\u30cc\u30e1\u30e2\u30f3)
    end
    subgraph \u5b8c\u5168\u4f53
    metalgreymon-v(<img src='https://digimon.net/cimages/digimon/metalgreymon-v.jpg' width='40' height='40' /><br>\u30e1\u30bf\u30eb\u30b0\u30ec\u30a4\u30e2\u30f3)
    mamemon(<img src='https://digimon.net/cimages/digimon/mamemon.jpg' width='40' height='40' /><br>\u30de\u30e1\u30e2\u30f3)
    monzaemon(<img src='https://digimon.net/cimages/digimon/monzaemon.jpg' width='40' height='40' /><br>\u3082\u3093\u3056\u3048\u30e2\u30f3)
    end
    botamon-->koromon
    koromon-->agumon
    koromon-->betamon
    agumon-->greymon-first
    agumon-->tyranomon
    agumon-->devimon
    betamon-->devimon
    agumon-->meramon
    betamon-->meramon
    betamon-->airdramon
    betamon-->seadramon
    agumon-->numemon
    betamon-->numemon
    greymon-first-->metalgreymon-v
    devimon-->metalgreymon-v
    airdramon-->metalgreymon-v
    tyranomon-->mamemon
    meramon-->mamemon
    seadramon-->mamemon
    numemon-->monzaemon
    `;
      var graph = mermaidAPI.render("mermaid", graphDefinition, insertSvg);
    };
  </script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

これを HTML に張り付けてブラウザで表示させると、こんなフローチャートが表示されます。

なんでデジモンなのかは置いておいて、こんな感じにフローチャート内に画像を表示することができます。

つまづいた点

render関数 を通さないと画像が表示できない

mermaid.js は HTML内に直接書けるように出来ているのですが、画像を表示させるために、JavaScript の mermaidAPI.render関数 を通さないと画像が表示できませんでした。

例えば、このように書くだけでフローチャートができちゃうんですよ、普通は。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mermaid/6.0.0/mermaid.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/6.0.0/mermaid.js"></script>
  <script>mermaid.initialize({ startOnLoad: true });</script>
</head>
<body>
  <div class="mermaid">
    graph LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
  </div>
</body>
</html>

この書き方が出来なかったのが辛かった。

参考

https://stackoverflow.com/questions/42402912/how-to-embed-an-image-in-a-node-with-mermaid-js

日本語表示が出来なかった

え？いや、出来てるじゃん。って思ったと思いますが、日本語を1文字ずつわざわざ Unicodeエスケープシーケンス に変換して表示しています。

日本語の変換にはこちらを使わせてもらいました。

Unicodeエスケープシーケンス変換ツール

わざわざ変換するのがクソめんどくさい。

おわりに

そんなこんなで、JavaScript製のフローチャート作成ライブラリの紹介でした。