概要

有向や無向グラフを書くのに優れた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);

ブラウザのみでDot言語をSVGや画像に変換する【Javascript】

概要

ソースコード

参考資料