nukisashineko · October 9, 2017 20:48
diff --git a/flowchartをpngとsvgで保存できるボタン.html b/flowchartをpngとsvgで保存できるボタン.html
 <!DOCTYPE html>
 <!--
 このソースもほぼほぼコピペ＋改変。
 元ソース：
 https://github.com/adrai/flowchart.js/blob/master/example/index.html
 -->
 <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>flowchart.js · Playground</title>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.0/raphael-min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="http://flowchart.js.org/flowchart-latest.js"></script>


        <script type="text/javascript">
        // 参考（ほぼコピペ）：https://qiita.com/skryoooo/items/a37455bef54321a6195a
        function saveSVG2PNGImage(){
          var svg = document.querySelector("svg");
          var svgData = new XMLSerializer().serializeToString(svg);
          var canvas = document.createElement("canvas");
          canvas.width = svg.width.baseVal.value;
          canvas.height = svg.height.baseVal.value;

          var ctx = canvas.getContext("2d");
          var image = new Image;
          image.onload = function(){
              ctx.drawImage( image, 0, 0 );
              var a = document.createElement("a");
              a.href = canvas.toDataURL("image/png");
              a.setAttribute("download", "image.png");
              // 参考：http://hogashi.hatenablog.com/entry/2016/09/02/042652
              //a.dispatchEvent(new CustomEvent("click")); //  <= chrome 52
              a.dispatchEvent(new MouseEvent("click")); //  >= chrome 53
            }
          image.src = "data:image/svg+xml;charset=utf-8;base64," + btoa(unescape(encodeURIComponent(svgData)));
        }

        //  参考：http://furudate.hatenablog.com/entry/2014/06/02/172923
        function saveSVGfile(){
          var context = document.querySelector("svg").outerHTML;
          var blob = new Blob([ context ], { "type" : "application/x-msdownload" });
          var a = document.createElement("a");
          a.setAttribute("download", "tmp.svg");
          a.setAttribute("href", window.URL.createObjectURL(blob))
          // a.dispatchEvent(new CustomEvent("click")); //  <= chrome 52
          a.dispatchEvent(new MouseEvent("click")); //  >= chrome 53
        }


        function drowSVGFlowChart () {
          var cd = document.getElementById("code"),
              chart;
            var code = cd.value;
            if (chart) {
              chart.clean();
            }
            chart = flowchart.parse(code);
            chart.drawSVG('canvas', {
              // 'x': 30,
              // 'y': 50,
              'line-width': 3,
              'maxWidth': 1000,
              'line-length': 50,
              'text-margin': 10,
              'font-size': 20,
              'font': 'normal',
              'font-family': 'Helvetica',
              'font-weight': 'bold',
              'font-color': 'black',
              'line-color': 'black',
              'element-color': 'black',
              'fill': 'white',
              'yes-text': 'yes',
              'no-text': 'no',
              'arrow-end': 'block',
              'scale': 1,
              'symbols': {
              },
              'flowstate' : {
                'comparexX' : { 'line-length': 100},
              }
            });
            $('[id^=sub1]').click(function(){
              alert('info here');
            });
        }

        window.onload = function () {
          const btnRun = document.getElementById("run");
          const btnSavePNG = document.getElementById("savePNG");
          const btnSaveSVG = document.getElementById("saveSVG");
          drowSVGFlowChart();
          btnRun.onclick = drowSVGFlowChart;
          btnSavePNG.onclick = saveSVG2PNGImage;
          btnSaveSVG.onclick = saveSVGfile;
        };
        </script>
    </head>
    <body>
      <!--chartのcodeの下書きは https://stackedit.io/editor で行うと楽。
          仕上げ時のフォントや文字サイズや経路の指定等にご利用下さい。-->
        <div><textarea id="code" style="width: 100%;" rows="11">
          st=>start: get news
          e=>end: end
          init=>operation: x=0;
                           i=0;
                           y=0;
          downtime=>operation: downtime
          count_device=>operation: count near smartphone
          compare_device_count=>condition: Is there a significant rate increase of
                                              device's count compared with last time?
          save_devices_count=>operation: save device's count
          init_i=>operation: i=0;
          random_sample=>operation: Selects a smartphone at random
          did_you_have_some_news=>condition: Has been it get the news already?
          sending=>operation: send completely;
                              x++;
          compare_x_X=>condition: x>=X; | comparexX
          i_plus=>operation: i++;
          compare_i_n=>condition: i>=n;
          y_plus=>operation: y++;
          compare_y_Y=>condition: y<Y;

          noop=>operation: noop to graph;

          st->init->downtime->count_device->compare_device_count
          compare_device_count(yes)->init_i
          compare_device_count(no)->save_devices_count
          save_devices_count(right)->downtime
          init_i->random_sample->did_you_have_some_news
          did_you_have_some_news(no)->sending->compare_x_X
          did_you_have_some_news(yes)->i_plus->compare_i_n
          compare_x_X(yes)->e
          compare_x_X(no,right)->init_i
          compare_i_n(yes)->y_plus->compare_y_Y
          compare_i_n(no)->noop(right)->random_sample
          compare_y_Y(no)->save_devices_count
          compare_y_Y(yes)->e

 </textarea></div>
        <div><button id="run" type="button">Run</button></div>
        <div><button type="button" id="savePNG">Save PNG</button></div>
        <div><button type="button" id="saveSVG">Save SVG</button></div>

        <div id="canvas"></div>
    </body>
 </html>
 <!--
 svgのd属性について
 http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_03.htm

 "nop=>operation: noop"等を利用してflowchartの型崩れを整形したのは場合は
 inkscapeを利用してd属性の書き換えを行う

 作業手順としては
 （SVGで保存する前にmark-endの中身をなくしておくとstyleで矢印が保存されなくて済む
 次の作業で先頭の線分は消してしまうから必要のない作業だけどね。）
 1. noopの枠を削除
 2. noopの文字列を削除
 3. d属性の変更
    1. 分断されているd属性を並べたときにそれぞれをa,bとする
    2. aの最後のCの３～６個目の数値を削除
    3. bの最初のM～Cの２個めの数値を削除
    4. 上記の捜査を行ったa,bを結合したd属性をabとして保存
    5. aを削除
    6. bのd属性をabで上書き
 -->
	<!DOCTYPE html>
	<!--
	このソースもほぼほぼコピペ＋改変。
	元ソース：
	https://github.com/adrai/flowchart.js/blob/master/example/index.html
	-->
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>flowchart.js · Playground</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.0/raphael-min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script src="http://flowchart.js.org/flowchart-latest.js"></script>


	<script type="text/javascript">
	// 参考（ほぼコピペ）：https://qiita.com/skryoooo/items/a37455bef54321a6195a
	function saveSVG2PNGImage(){
	var svg = document.querySelector("svg");
	var svgData = new XMLSerializer().serializeToString(svg);
	var canvas = document.createElement("canvas");
	canvas.width = svg.width.baseVal.value;
	canvas.height = svg.height.baseVal.value;

	var ctx = canvas.getContext("2d");
	var image = new Image;
	image.onload = function(){
	ctx.drawImage( image, 0, 0 );
	var a = document.createElement("a");
	a.href = canvas.toDataURL("image/png");
	a.setAttribute("download", "image.png");
	// 参考：http://hogashi.hatenablog.com/entry/2016/09/02/042652
	//a.dispatchEvent(new CustomEvent("click")); // <= chrome 52
	a.dispatchEvent(new MouseEvent("click")); // >= chrome 53
	}
	image.src = "data:image/svg+xml;charset=utf-8;base64," + btoa(unescape(encodeURIComponent(svgData)));
	}

	// 参考：http://furudate.hatenablog.com/entry/2014/06/02/172923
	function saveSVGfile(){
	var context = document.querySelector("svg").outerHTML;
	var blob = new Blob([ context ], { "type" : "application/x-msdownload" });
	var a = document.createElement("a");
	a.setAttribute("download", "tmp.svg");
	a.setAttribute("href", window.URL.createObjectURL(blob))
	// a.dispatchEvent(new CustomEvent("click")); // <= chrome 52
	a.dispatchEvent(new MouseEvent("click")); // >= chrome 53
	}


	function drowSVGFlowChart () {
	var cd = document.getElementById("code"),
	chart;
	var code = cd.value;
	if (chart) {
	chart.clean();
	}
	chart = flowchart.parse(code);
	chart.drawSVG('canvas', {
	// 'x': 30,
	// 'y': 50,
	'line-width': 3,
	'maxWidth': 1000,
	'line-length': 50,
	'text-margin': 10,
	'font-size': 20,
	'font': 'normal',
	'font-family': 'Helvetica',
	'font-weight': 'bold',
	'font-color': 'black',
	'line-color': 'black',
	'element-color': 'black',
	'fill': 'white',
	'yes-text': 'yes',
	'no-text': 'no',
	'arrow-end': 'block',
	'scale': 1,
	'symbols': {
	},
	'flowstate' : {
	'comparexX' : { 'line-length': 100},
	}
	});
	$('[id^=sub1]').click(function(){
	alert('info here');
	});
	}

	window.onload = function () {
	const btnRun = document.getElementById("run");
	const btnSavePNG = document.getElementById("savePNG");
	const btnSaveSVG = document.getElementById("saveSVG");
	drowSVGFlowChart();
	btnRun.onclick = drowSVGFlowChart;
	btnSavePNG.onclick = saveSVG2PNGImage;
	btnSaveSVG.onclick = saveSVGfile;
	};
	</script>
	</head>
	<body>
	<!--chartのcodeの下書きは https://stackedit.io/editor で行うと楽。
	仕上げ時のフォントや文字サイズや経路の指定等にご利用下さい。-->
	<div><textarea id="code" style="width: 100%;" rows="11">
	st=>start: get news
	e=>end: end
	init=>operation: x=0;
	i=0;
	y=0;
	downtime=>operation: downtime
	count_device=>operation: count near smartphone
	compare_device_count=>condition: Is there a significant rate increase of
	device's count compared with last time?
	save_devices_count=>operation: save device's count
	init_i=>operation: i=0;
	random_sample=>operation: Selects a smartphone at random
	did_you_have_some_news=>condition: Has been it get the news already?
	sending=>operation: send completely;
	x++;
	compare_x_X=>condition: x>=X; \| comparexX
	i_plus=>operation: i++;
	compare_i_n=>condition: i>=n;
	y_plus=>operation: y++;
	compare_y_Y=>condition: y<Y;

	noop=>operation: noop to graph;

	st->init->downtime->count_device->compare_device_count
	compare_device_count(yes)->init_i
	compare_device_count(no)->save_devices_count
	save_devices_count(right)->downtime
	init_i->random_sample->did_you_have_some_news
	did_you_have_some_news(no)->sending->compare_x_X
	did_you_have_some_news(yes)->i_plus->compare_i_n
	compare_x_X(yes)->e
	compare_x_X(no,right)->init_i
	compare_i_n(yes)->y_plus->compare_y_Y
	compare_i_n(no)->noop(right)->random_sample
	compare_y_Y(no)->save_devices_count
	compare_y_Y(yes)->e

	</textarea></div>
	<div><button id="run" type="button">Run</button></div>
	<div><button type="button" id="savePNG">Save PNG</button></div>
	<div><button type="button" id="saveSVG">Save SVG</button></div>

	<div id="canvas"></div>
	</body>
	</html>
	<!--
	svgのd属性について
	http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_03.htm

	"nop=>operation: noop"等を利用してflowchartの型崩れを整形したのは場合は
	inkscapeを利用してd属性の書き換えを行う

	作業手順としては
	（SVGで保存する前にmark-endの中身をなくしておくとstyleで矢印が保存されなくて済む
	次の作業で先頭の線分は消してしまうから必要のない作業だけどね。）
	1. noopの枠を削除
	2. noopの文字列を削除
	3. d属性の変更
	1. 分断されているd属性を並べたときにそれぞれをa,bとする
	2. aの最後のCの３～６個目の数値を削除
	3. bの最初のM～Cの２個めの数値を削除
	4. 上記の捜査を行ったa,bを結合したd属性をabとして保存
	5. aを削除
	6. bのd属性をabで上書き
	-->