概要
有向や無向グラフを書くのに優れたDot言語。しかし、これを視覚化するにはGraphvizというソフトをインストールしなければなりません。それって、面倒くさいですよね？
ということで、JavaScriptでGraphvizと同じ動きができるViz.jsを使って、ブラウザのみでDot言語を視覚化する関数を作りました。
余談
すぐにでもDot言語を図に起こしたい人は、次のViz.js公式サイトへ。マークダウンエディタで、視覚化できます。便利！
ソースコード
大まかには、Dot言語をSVGに→SVGをcanvasに→canvasをimg画像に、という流れで変換します。
<body>
<img id="graph">
<script type="text/javascript" src="https://unpkg.com/viz.js@1.8.0"></script>
</body>
// dot言語をSVGに変換する関数
function dotToSVGElement(dot) {
const container = document.createElement("div");
container.innerHTML = Viz(dot, {format: "svg"});
return container.querySelector("svg");
}
// SVGをpng画像に変換する関数
function SVGElementToPng(output, svg) {
const image = new Image();
image.addEventListener("load", () => {
const width = svg.getAttribute("width");
const height = svg.getAttribute("height");
const canvas = document.createElement("canvas");
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;
const context = canvas.getContext("2d");
context.drawImage(image, 0, 0, image.naturalWidth, image.naturalHeight);
const dataUrl = canvas.toDataURL("image/png");
output.src = dataUrl;
});
const svgData = new XMLSerializer().serializeToString(svg);
const svgDataBase64 = btoa(unescape(encodeURIComponent(svgData)));
const svgDataUrl = `data:image/svg+xml;charset=utf-8;base64,${svgDataBase64}`;
image.src = svgDataUrl;
}
// dot言語をpng画像に変換する関数
function dotToPng(dot) {
const output = document.getElementById("graph");// img
const svg = dotToSVGElement(dot);
SVGElementToPng(output, svg);
}
const graph = `graph G {A--B;B--C}`;
dotToPng(graph);
参考資料