【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製のフローチャート作成ライブラリの紹介でした。