Welcome

カキノタblog

自分の興味あるテーマを中心に、図解多めに記事を作成していきたいと思います。

フローチャート flowchart.jsの使い方（導入）

flowchart.jsとは

テキストコードからSVG形式のフローチャート図を描画してくれるJavaScript製（jQuery）のドローツールです。

導入

flowchart.js本体、jQuery、Raphaelを使えるようにします。

<!doctype html>
<html lang="ja">
	<head>
	<meta charset="utf-8">
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
	<script src="http://flowchart.js.org/flowchart-latest.js"></script>

	<script>
	$(function(){
		// コードをフローチャート化します
		$('#canvas').flowChart();
	});
	</script>

</head>
<body>

<div id="canvas">
<!-- ここにコードを書きます -->

</div>

</body>
</html>

CDNから読み込んでいますが、GitHubからダウンロードもできます。

https://github.com/adrai/flowchart.js

コードを書く場所

Html文書の中に書く

<body>

<div id="canvas">
<!-- ここにコードを書きます -->

</div>

Html文書の中に直接コードを書くことができます。次回以降のチュートリアルでは<div id="canvas">の中に書いていくこととします。

ファイルから読み込む

テキストファイルに書いたものを読み込むこともできます。

<script>
	$(document).ready(function() {
		$.ajax({
			url : "test.txt",
			dataType : "text",
			success : function(data) {
				var chart = flowchart.parse(data);
				chart.drawSVG('#canvas');
			}
		});
	});

フローチャート化実行

<script>
$(function(){
	// コードをフローチャート化します
	$('#canvas').flowChart();
});
</script>

flowChart()で<div id="canvas">内に書かれたテキストをフローチャートの図に変換してくれます。