kaishuu0123/drawio_integration.html

## drawio_integration.html
<html style="margin:0px;overflow:hidden;">
<head>
	<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.css" />
	<script type="text/javascript">
		const DRAW_IFRAME_URL = 'https://www.draw.io/?embed=1&lang=ja';
		let graph = null;
		let xml = null;
		let globalMxStyleSheet = null;

		function bytesToString(arr)
		{
				var str = '';
				for (var i = 0; i < arr.length; i++)
				{
						str += String.fromCharCode(arr[i]);
				}
				return str;
		};

		function decode(data) {
			try {
				var node = mxUtils.parseXml(data).documentElement;
				if (node != null && node.nodeName == 'mxfile') {
					var diagrams = node.getElementsByTagName('diagram');
					if (diagrams.length > 0) {
						// data = getTextContent(diagrams[0]);
						data = diagrams[0].textContent;
					}
				}
			} catch (e) {
				// ignore
			}

			try {
				data = atob(data);
			} catch (e) {
				console.log(e);
				alert('atob failed: ' + e);
				return;
			}

			try {
				data = bytesToString(pako.inflateRaw(data));
			} catch (e) {
				console.log(e);
				alert('inflateRaw failed: ' + e);
				return;
			}

			try {
				data = decodeURIComponent(data);
			} catch (e) {
				console.log(e);
				alert('decodeURIComponent failed: ' + e);
				return;
			}

			return data;
		}

		function mxClientOnLoad(mxStylesheet) {
			xml = document.getElementById('mxfile').value;
			let xmlDecoded = decode(xml)

			var div = document.getElementById('preview');

			if (mxStylesheet != null) {
				globalMxStyleSheet = mxStylesheet
			}

			updateGraph(div, xmlDecoded)

			window.addEventListener('resize', function () {
				graph.fit();
				graph.center(true, false);
			});
		}

		function updateGraph(element, xml) {
			// Removes all illegal control characters before parsing
			let checked = [];

			for (let i = 0; i < xml.length; i++) {
				let code = xml.charCodeAt(i);

				// Removes all control chars except TAB, LF and CR
				if (code >= 32 || code == 9 || code == 10 || code == 13) {
					checked.push(xml.charAt(i));
				}
			}

			xml = checked.join('');

			if (graph != null) {
				graph.destroy()
			}

			graph = new mxGraph(element);

			graph.resetViewOnRootChange = false;
			graph.foldingEnabled = false;
			// NOTE: Tooltips require CSS
			graph.setTooltips(false);
			graph.setEnabled(false);

			// Loads the stylesheet
			if (globalMxStyleSheet != null) {
				var xmlDoc = mxUtils.parseXml(globalMxStyleSheet);
				var dec = new mxCodec(xmlDoc);
				dec.decode(xmlDoc.documentElement, graph.getStylesheet());
			}

			var xmlDoc = mxUtils.parseXml(xml);
			var codec = new mxCodec(xmlDoc);
			codec.decode(codec.document.documentElement, graph.getModel());
			graph.maxFitScale = 1;
			graph.fit();
			graph.center(true, false);
		}

		function edit(url) {
			xml = document.getElementById('mxfile').value;

			var border = 0;
			var iframe = document.createElement('iframe');
			iframe.style.zIndex = '9999';
			iframe.style.position = 'absolute';
			iframe.style.top = border + 'px';
			iframe.style.left = border + 'px';

			if (border == 0) {
				iframe.setAttribute('frameborder', '0');
			}

			var resize = function () {
				iframe.setAttribute('width', document.body.clientWidth - 2 * border);
				iframe.setAttribute('height', document.body.clientHeight - 2 * border);
			};

			window.addEventListener('resize', resize);
			resize();

			var receive = function (evt) {
				if (evt.data == 'ready') {
					iframe.contentWindow.postMessage(xml, '*');
					resize();
				} else {
					if (evt.data.length > 0) {
						// Update the graph
						var xmlDoc = mxUtils.parseXml(evt.data);
						// var codec = new mxCodec(xmlDoc);
						// codec.decode(codec.document.documentElement, graph.getModel());
						// graph.fit();

						save(xmlDoc, location.pathname.substring(location.pathname.lastIndexOf("/") + 1));
					}

					window.removeEventListener('resize', resize);
					window.removeEventListener('message', receive);
					document.body.removeChild(iframe);
				}
			};

			window.addEventListener('message', receive);
			iframe.setAttribute('src', DRAW_IFRAME_URL);
			document.body.appendChild(iframe);
		}

		function save(data, filename) {
			try {
				let xmlString = new XMLSerializer().serializeToString(data)
				document.getElementById('mxfile').value = xmlString
				let div = document.getElementById('preview')

				let xmlDecoded = decode(xmlString)

				updateGraph(div, xmlDecoded)
			} catch (e) {
				console.log('error', e);
				console.log('html', data);
			}
		};
	</script>
</head>

<body>
	<h1 class="title">Draw.io integration demo</h1>

	<div class="columns">
		<div class="column">
			<button onclick="edit();" class="button is-primary">
				Edit
			</button>

			<textarea id="mxfile" class="textarea" rows="20">
				<mxfile host="www.draw.io" modified="2020-01-07T02:27:36.350Z" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36" version="12.4.9" etag="14J0uzPSllv8-7iGFkXe"><diagram id="GzqZ6ak40Q6orY9AhMZG" name="Page-1">3Vvbbqs4FP2aPLYCDLk8nt7OvIw0UkeaM48UnGCVYMY4TXK+fmywCdhOjtMY6ExVVWEDBi/vy1re6Qw8bg/fSVxmv+MU5rPASw8z8DQLgoUXsb/ccGwM80AYNgSljck/GV7RTyiMnrDuUAqr3oUU45yism9McFHAhPZsMSF4379sjfP+U8t4AzXDaxLnuvUvlNKssS6D+cn+G0SbTD7Zn6+aM9tYXixmUmVxivcdE3iegUeCMW0+bQ+PMOfYSVya+17OnG1fjMCCWt0QNHd8xPlOTO7PjMA4ZTYxWEWPct7VHm3zuGBHD/sMUfhaxgk/tWerrD9Z3P8BCYWHjkm8yXeIt5CSI7tEnJ0LUIRXSIz2J4hbD8g68EYLYYzFsm7akU8zZx/E5M8AATQgtOmzO5iH8dmzZSu5saIxoa80pty4Rnn+iHNM6quBV//wiynB77BzZr0WZwyYBdeC5nt91EIdNWAADbjALLTALGWRIw5h/ob3zyfDQ21gJzJM0E9c0Jg96YFPHbFY+5ajTcFOvmFK8ZZfXaTfePAyGy5h0VhEcliacH55ETiz614Qn8aTz44I3hUp5HPwzi9AhXckgX3fYIu9gfI6kbH4/G5ZJhP+YpA/MGJvdRpBPvIoj5UhmtcTdymr2L6Q3cJG2sKilK2Yurgu/FcJ+nZWHf/1jVHvwoHn2jx3FSR81IQiXIwxYVOaG27CC4uI1cJsuMCKDIE1twwsAvOYoo9+Sb4JnKUGTokrWvOI7TYu0jHcAUgqNIo7rL6WO8wN7rCcyh1kXLqtbhfB08vbTXAubyhbXffzDO7XGq1xP1PV1HS4Uvy6mZFW1bSBtEKiDnSmPDLM42PnspJfUJ1/YaC8b9Qj2OxDM+BnS2/Lmg2EXPe/gQl5sFAma2Dky6EYuQy3iRn5zTJmREIe2IiY/xghl/h3M5ucVjezBaFlZjv0l0VxbfvMFfXpuGW6+UxK0GWWJRv/RMRPyMYDXXUkGUzeZ3yHhpNy9lvA/YmPVWNAMCo/D3RBogfwMITMGGehIc5sGYR7QqaLl5aYe//s4G6UkBiVoAe6JJnUHwx6Ta7KBP6gqxfhBR7clvSoIUUyvH3bVToxWLOfZHhi4EdqatFdyUSnLu0V2YIl6UUHrCPUE+j17CAWrCCHazoQWTgg+oM76X0kjv6uXfZ2d15Zuq5YvzsxhmPJ46uZwpFSaRWQfM7SrVQBulQp8PAeRXE5Kfdc6TkQXLkZ7MqRlAUGsq/mnoMCGzE2cSGyjWbnhQhYyC6pT3NUq/UGGdk8nF8sPQQzOct3o8HT6gI+V9QhZQ/DDxb3eiWKDJXIjxyg9T/sGpl8FBi6RteKVHWlVJH56xyh7lf5KplwmCN0/Zaiqoxpks06e+jeHpP3uslCxcbWAKTdDydk7UBXcQlBtXvymUJzb0lmiAJT834e89XGbWUX50aIvP4GRrgyCF3T1q8TiK5rRBW4kzUvx6qnxCp4SOMqqw8M344wFpeFHrhgsq4UsJCARl85i5UifoTdgUcFYd+jwMpQVXR/Cl0UFZtO1tVFhWFBjj9mUmywg1p51DpkoEaOsZIY2A6w7YuN1chRd72XSpaw7eOo6gioAzlTR0r689yqo1AX3G0jB+jJf9hGTqTuPBgaOaamhJNGTqjrxJLgBFbV7JrWeguo9awVeRR6I3KA0EYwfZXusYT2yySTO4W1hup3nWyzyZ2vdjTURo+jdHLnKxHmeLMlvLK1Z8OYbneYbkWSYf51nShY3StUw9aN1Eyij+RORoU2+ljre3NR+8mut4NMq+rUyNMLzFBN71CXnTpew2xNSaC6ZE2GQS80bGW/c/UQTtdQNBBZ0zeSRusfscPT9+qbuDz9cwJ4/hc=</diagram></mxfile>
			</textarea>
		</div>
		<div class="column">
			<figure id="preview" class="image">
			</figure>
		</div>
	</div>

	<script type="text/javascript">
		var doc = document.documentElement.outerHTML;
	</script>
	<script type="text/javascript" src="https://www.draw.io/embed.js"></script>
</body>

</html>
	<html style="margin:0px;overflow:hidden;">
	<head>
	<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.css" />
	<script type="text/javascript">
	const DRAW_IFRAME_URL = 'https://www.draw.io/?embed=1&lang=ja';
	let graph = null;
	let xml = null;
	let globalMxStyleSheet = null;

	function bytesToString(arr)
	{
	var str = '';
	for (var i = 0; i < arr.length; i++)
	{
	str += String.fromCharCode(arr[i]);
	}
	return str;
	};

	function decode(data) {
	try {
	var node = mxUtils.parseXml(data).documentElement;
	if (node != null && node.nodeName == 'mxfile') {
	var diagrams = node.getElementsByTagName('diagram');
	if (diagrams.length > 0) {
	// data = getTextContent(diagrams[0]);
	data = diagrams[0].textContent;
	}
	}
	} catch (e) {
	// ignore
	}

	try {
	data = atob(data);
	} catch (e) {
	console.log(e);
	alert('atob failed: ' + e);
	return;
	}

	try {
	data = bytesToString(pako.inflateRaw(data));
	} catch (e) {
	console.log(e);
	alert('inflateRaw failed: ' + e);
	return;
	}

	try {
	data = decodeURIComponent(data);
	} catch (e) {
	console.log(e);
	alert('decodeURIComponent failed: ' + e);
	return;
	}

	return data;
	}

	function mxClientOnLoad(mxStylesheet) {
	xml = document.getElementById('mxfile').value;
	let xmlDecoded = decode(xml)

	var div = document.getElementById('preview');

	if (mxStylesheet != null) {
	globalMxStyleSheet = mxStylesheet
	}

	updateGraph(div, xmlDecoded)

	window.addEventListener('resize', function () {
	graph.fit();
	graph.center(true, false);
	});
	}

	function updateGraph(element, xml) {
	// Removes all illegal control characters before parsing
	let checked = [];

	for (let i = 0; i < xml.length; i++) {
	let code = xml.charCodeAt(i);

	// Removes all control chars except TAB, LF and CR
	if (code >= 32 \|\| code == 9 \|\| code == 10 \|\| code == 13) {
	checked.push(xml.charAt(i));
	}
	}

	xml = checked.join('');

	if (graph != null) {
	graph.destroy()
	}

	graph = new mxGraph(element);

	graph.resetViewOnRootChange = false;
	graph.foldingEnabled = false;
	// NOTE: Tooltips require CSS
	graph.setTooltips(false);
	graph.setEnabled(false);

	// Loads the stylesheet
	if (globalMxStyleSheet != null) {
	var xmlDoc = mxUtils.parseXml(globalMxStyleSheet);
	var dec = new mxCodec(xmlDoc);
	dec.decode(xmlDoc.documentElement, graph.getStylesheet());
	}

	var xmlDoc = mxUtils.parseXml(xml);
	var codec = new mxCodec(xmlDoc);
	codec.decode(codec.document.documentElement, graph.getModel());
	graph.maxFitScale = 1;
	graph.fit();
	graph.center(true, false);
	}

	function edit(url) {
	xml = document.getElementById('mxfile').value;

	var border = 0;
	var iframe = document.createElement('iframe');
	iframe.style.zIndex = '9999';
	iframe.style.position = 'absolute';
	iframe.style.top = border + 'px';
	iframe.style.left = border + 'px';

	if (border == 0) {
	iframe.setAttribute('frameborder', '0');
	}

	var resize = function () {
	iframe.setAttribute('width', document.body.clientWidth - 2 * border);
	iframe.setAttribute('height', document.body.clientHeight - 2 * border);
	};

	window.addEventListener('resize', resize);
	resize();

	var receive = function (evt) {
	if (evt.data == 'ready') {
	iframe.contentWindow.postMessage(xml, '*');
	resize();
	} else {
	if (evt.data.length > 0) {
	// Update the graph
	var xmlDoc = mxUtils.parseXml(evt.data);
	// var codec = new mxCodec(xmlDoc);
	// codec.decode(codec.document.documentElement, graph.getModel());
	// graph.fit();

	save(xmlDoc, location.pathname.substring(location.pathname.lastIndexOf("/") + 1));
	}

	window.removeEventListener('resize', resize);
	window.removeEventListener('message', receive);
	document.body.removeChild(iframe);
	}
	};

	window.addEventListener('message', receive);
	iframe.setAttribute('src', DRAW_IFRAME_URL);
	document.body.appendChild(iframe);
	}

	function save(data, filename) {
	try {
	let xmlString = new XMLSerializer().serializeToString(data)
	document.getElementById('mxfile').value = xmlString
	let div = document.getElementById('preview')

	let xmlDecoded = decode(xmlString)

	updateGraph(div, xmlDecoded)
	} catch (e) {
	console.log('error', e);
	console.log('html', data);
	}
	};
	</script>
	</head>

	<body>
	<h1 class="title">Draw.io integration demo</h1>

	<div class="columns">
	<div class="column">
	<button onclick="edit();" class="button is-primary">
	Edit
	</button>

	<textarea id="mxfile" class="textarea" rows="20">
	<mxfile host="www.draw.io" modified="2020-01-07T02:27:36.350Z" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36" version="12.4.9" etag="14J0uzPSllv8-7iGFkXe"><diagram id="GzqZ6ak40Q6orY9AhMZG" name="Page-1">3Vvbbqs4FP2aPLYCDLk8nt7OvIw0UkeaM48UnGCVYMY4TXK+fmywCdhOjtMY6ExVVWEDBi/vy1re6Qw8bg/fSVxmv+MU5rPASw8z8DQLgoUXsb/ccGwM80AYNgSljck/GV7RTyiMnrDuUAqr3oUU45yism9McFHAhPZsMSF4379sjfP+U8t4AzXDaxLnuvUvlNKssS6D+cn+G0SbTD7Zn6+aM9tYXixmUmVxivcdE3iegUeCMW0+bQ+PMOfYSVya+17OnG1fjMCCWt0QNHd8xPlOTO7PjMA4ZTYxWEWPct7VHm3zuGBHD/sMUfhaxgk/tWerrD9Z3P8BCYWHjkm8yXeIt5CSI7tEnJ0LUIRXSIz2J4hbD8g68EYLYYzFsm7akU8zZx/E5M8AATQgtOmzO5iH8dmzZSu5saIxoa80pty4Rnn+iHNM6quBV//wiynB77BzZr0WZwyYBdeC5nt91EIdNWAADbjALLTALGWRIw5h/ob3zyfDQ21gJzJM0E9c0Jg96YFPHbFY+5ajTcFOvmFK8ZZfXaTfePAyGy5h0VhEcliacH55ETiz614Qn8aTz44I3hUp5HPwzi9AhXckgX3fYIu9gfI6kbH4/G5ZJhP+YpA/MGJvdRpBPvIoj5UhmtcTdymr2L6Q3cJG2sKilK2Yurgu/FcJ+nZWHf/1jVHvwoHn2jx3FSR81IQiXIwxYVOaG27CC4uI1cJsuMCKDIE1twwsAvOYoo9+Sb4JnKUGTokrWvOI7TYu0jHcAUgqNIo7rL6WO8wN7rCcyh1kXLqtbhfB08vbTXAubyhbXffzDO7XGq1xP1PV1HS4Uvy6mZFW1bSBtEKiDnSmPDLM42PnspJfUJ1/YaC8b9Qj2OxDM+BnS2/Lmg2EXPe/gQl5sFAma2Dky6EYuQy3iRn5zTJmREIe2IiY/xghl/h3M5ucVjezBaFlZjv0l0VxbfvMFfXpuGW6+UxK0GWWJRv/RMRPyMYDXXUkGUzeZ3yHhpNy9lvA/YmPVWNAMCo/D3RBogfwMITMGGehIc5sGYR7QqaLl5aYe//s4G6UkBiVoAe6JJnUHwx6Ta7KBP6gqxfhBR7clvSoIUUyvH3bVToxWLOfZHhi4EdqatFdyUSnLu0V2YIl6UUHrCPUE+j17CAWrCCHazoQWTgg+oM76X0kjv6uXfZ2d15Zuq5YvzsxhmPJ46uZwpFSaRWQfM7SrVQBulQp8PAeRXE5Kfdc6TkQXLkZ7MqRlAUGsq/mnoMCGzE2cSGyjWbnhQhYyC6pT3NUq/UGGdk8nF8sPQQzOct3o8HT6gI+V9QhZQ/DDxb3eiWKDJXIjxyg9T/sGpl8FBi6RteKVHWlVJH56xyh7lf5KplwmCN0/Zaiqoxpks06e+jeHpP3uslCxcbWAKTdDydk7UBXcQlBtXvymUJzb0lmiAJT834e89XGbWUX50aIvP4GRrgyCF3T1q8TiK5rRBW4kzUvx6qnxCp4SOMqqw8M344wFpeFHrhgsq4UsJCARl85i5UifoTdgUcFYd+jwMpQVXR/Cl0UFZtO1tVFhWFBjj9mUmywg1p51DpkoEaOsZIY2A6w7YuN1chRd72XSpaw7eOo6gioAzlTR0r689yqo1AX3G0jB+jJf9hGTqTuPBgaOaamhJNGTqjrxJLgBFbV7JrWeguo9awVeRR6I3KA0EYwfZXusYT2yySTO4W1hup3nWyzyZ2vdjTURo+jdHLnKxHmeLMlvLK1Z8OYbneYbkWSYf51nShY3StUw9aN1Eyij+RORoU2+ljre3NR+8mut4NMq+rUyNMLzFBN71CXnTpew2xNSaC6ZE2GQS80bGW/c/UQTtdQNBBZ0zeSRusfscPT9+qbuDz9cwJ4/hc=</diagram></mxfile>
	</textarea>
	</div>
	<div class="column">
	<figure id="preview" class="image">
	</figure>
	</div>
	</div>

	<script type="text/javascript">
	var doc = document.documentElement.outerHTML;
	</script>
	<script type="text/javascript" src="https://www.draw.io/embed.js"></script>
	</body>

	</html>