1<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5" ><![endif]-->
2<!DOCTYPE html>
3<html>
4<head>
5    <title>Flowchart Maker &amp; Online Diagram Software</title>
6    <meta charset="utf-8">
7    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
8    <meta name="Description" content="diagrams.net is free online diagram software for making flowcharts, process diagrams, org charts, UML, ER and network diagrams">
9    <meta name="Keywords" content="diagram, online, flow chart, flowchart maker, uml, erd">
10    <meta itemprop="name" content="diagrams.net - free flowchart maker and diagrams online">
11	<meta itemprop="description" content="diagrams.net is a free online diagramming application  and flowchart maker . You can use it to create UML, entity relationship,
12		org charts, BPMN and BPM, database schema and networks. Also possible are telecommunication network, workflow, flowcharts, maps overlays and GIS, electronic
13		circuit and social network diagrams.">
14	<meta itemprop="image" content="https://lh4.googleusercontent.com/-cLKEldMbT_E/Tx8qXDuw6eI/AAAAAAAAAAs/Ke0pnlk8Gpg/w500-h344-k/BPMN%2Bdiagram%2Brc2f.png">
15    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
16	<meta name="msapplication-config" content="images/browserconfig.xml">
17    <meta name="mobile-web-app-capable" content="yes">
18	<meta name="theme-color" content="#d89000">
19	<script type="text/javascript">
20		/**
21		 * URL Parameters and protocol description are here:
22		 *
23		 * https://desk.draw.io/support/solutions/articles/16000042546-what-url-parameters-are-supported
24		 *
25		 * Parameters for developers:
26		 *
27		 * - dev=1: For developers only
28		 * - test=1: For developers only
29		 * - export=URL for export: For developers only
30		 * - ignoremime=1: For developers only (see DriveClient.js). Use Cmd-S to override mime.
31		 * - createindex=1: For developers only (see etc/build/README)
32		 * - filesupport=0: For developers only (see Editor.js in core)
33		 * - savesidebar=1: For developers only (see Sidebar.js)
34		 * - pages=1: For developers only (see Pages.js)
35		 * - lic=email: For developers only (see LicenseServlet.java)
36		 * --
37		 * - networkshapes=1: For testing network shapes (temporary)
38		 */
39		var urlParams = (function()
40		{
41			var result = new Object();
42			var params = window.location.search.slice(1).split('&');
43
44			for (var i = 0; i < params.length; i++)
45			{
46				idx = params[i].indexOf('=');
47
48				if (idx > 0)
49				{
50					result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
51				}
52			}
53
54			return result;
55		})();
56
57		// Forces CDN caches by passing URL parameters via URL hash
58		if (window.location.hash != null && window.location.hash.substring(0, 2) == '#P')
59		{
60			try
61			{
62				urlParams = JSON.parse(decodeURIComponent(window.location.hash.substring(2)));
63
64				if (urlParams.hash != null)
65				{
66					window.location.hash = urlParams.hash;
67				}
68			}
69			catch (e)
70			{
71				// ignore
72			}
73		}
74
75		// Global variable for desktop
76		var mxIsElectron = window && window.process && window.process.type;
77
78		// Redirects page if required
79		if (urlParams['dev'] != '1')
80		{
81			(function()
82			{
83				var proto = window.location.protocol;
84
85				if (!mxIsElectron)
86				{
87					var host = window.location.host;
88
89					// Redirects apex, drive and rt to www
90					if (host === 'draw.io' || host === 'rt.draw.io' || host === 'drive.draw.io')
91					{
92						host = 'www.draw.io';
93					}
94
95					var href = proto + '//' + host + window.location.href.substring(
96							window.location.protocol.length +
97							window.location.host.length + 2);
98
99					// Redirects if href changes
100					if (href != window.location.href)
101					{
102						window.location.href = href;
103					}
104				}
105			})();
106		}
107
108		/**
109		 * Adds meta tag to the page.
110		 */
111		function mxmeta(name, content, httpEquiv)
112		{
113			try
114			{
115				var s = document.createElement('meta');
116
117				if (name != null)
118				{
119					s.setAttribute('name', name);
120				}
121
122				s.setAttribute('content', content);
123
124				if (httpEquiv != null)
125				{
126					s.setAttribute('http-equiv', httpEquiv);
127				}
128
129			  	var t = document.getElementsByTagName('meta')[0];
130			  	t.parentNode.insertBefore(s, t);
131			}
132			catch (e)
133			{
134				// ignore
135			}
136		};
137
138		/**
139		 * Synchronously adds scripts to the page.
140		 */
141		function mxscript(src, onLoad, id, dataAppKey, noWrite)
142		{
143			var defer = onLoad == null && !noWrite;
144
145			if ((urlParams['dev'] != '1' && typeof document.createElement('canvas').getContext === "function") ||
146				onLoad != null || noWrite)
147			{
148				var s = document.createElement('script');
149				s.setAttribute('type', 'text/javascript');
150				s.setAttribute('defer', 'true');
151				s.setAttribute('src', src);
152
153				if (id != null)
154				{
155					s.setAttribute('id', id);
156				}
157
158				if (dataAppKey != null)
159				{
160					s.setAttribute('data-app-key', dataAppKey);
161				}
162
163				if (onLoad != null)
164				{
165					var r = false;
166
167					s.onload = s.onreadystatechange = function()
168					{
169						if (!r && (!this.readyState || this.readyState == 'complete'))
170						{
171				      		r = true;
172				      		onLoad();
173						}
174				  	};
175				}
176
177			  	var t = document.getElementsByTagName('script')[0];
178
179			  	if (t != null)
180			  	{
181			  		t.parentNode.insertBefore(s, t);
182			  	}
183			}
184			else
185			{
186				document.write('<script src="' + src + '"' + ((id != null) ? ' id="' + id +'" ' : '') +
187					((dataAppKey != null) ? ' data-app-key="' + dataAppKey +'" ' : '') + '></scr' + 'ipt>');
188			}
189		};
190
191		/**
192		 * Asynchronously adds scripts to the page.
193		 */
194		function mxinclude(src)
195		{
196			var g = document.createElement('script');
197			g.type = 'text/javascript';
198			g.async = true;
199			g.src = src;
200
201		    var s = document.getElementsByTagName('script')[0];
202		    s.parentNode.insertBefore(g, s);
203		};
204
205		/**
206		 * Adds meta tags with application name (depends on offline URL parameter)
207		 */
208		(function()
209		{
210			var name = 'diagrams.net';
211			mxmeta('apple-mobile-web-app-title', name);
212			mxmeta('application-name', name);
213
214			if (mxIsElectron)
215			{
216				mxmeta(null, 'default-src \'self\' \'unsafe-inline\'; connect-src \'self\' https://*.draw.io https://fonts.googleapis.com https://fonts.gstatic.com; img-src * data:; media-src *; font-src *; style-src-elem \'self\' \'unsafe-inline\' https://fonts.googleapis.com', 'Content-Security-Policy');
217			}
218		})();
219
220		// Checks for local storage
221		var isLocalStorage = false;
222
223		try
224		{
225			isLocalStorage = urlParams['local'] != '1' && typeof(localStorage) != 'undefined';
226		}
227		catch (e)
228		{
229			// ignored
230		}
231
232		var mxScriptsLoaded = false, mxWinLoaded = false;
233
234		function checkAllLoaded()
235		{
236			if (mxScriptsLoaded && mxWinLoaded)
237			{
238				App.main();
239			}
240		};
241
242		var t0 = new Date();
243
244		// Changes paths for local development environment
245		if (urlParams['dev'] == '1')
246		{
247			// Used to request grapheditor/mxgraph sources in dev mode
248			var mxDevUrl = document.location.protocol + '//devhost.jgraph.com/drawio/src/main';
249
250			// Used to request draw.io sources in dev mode
251			var drawDevUrl = document.location.protocol + '//devhost.jgraph.com/drawio/src/main/webapp/';
252			var geBasePath = drawDevUrl + '/js/grapheditor';
253			var mxBasePath = mxDevUrl + '/mxgraph';
254
255			if (document.location.protocol == 'file:')
256			{
257				geBasePath = './js/grapheditor';
258				mxBasePath = './mxgraph';
259				drawDevUrl = './';
260
261				// Forces includes for dev environment in node.js
262				mxForceIncludes = true;
263			}
264
265			mxscript(drawDevUrl + 'js/PreConfig.js');
266			mxscript(drawDevUrl + 'js/diagramly/Init.js');
267			mxscript(geBasePath + '/Init.js');
268			mxscript(mxBasePath + '/mxClient.js');
269
270			// Adds all JS code that depends on mxClient. This indirection via Devel.js is
271			// required in some browsers to make sure mxClient.js (and the files that it
272			// loads asynchronously) are available when the code loaded in Devel.js runs.
273			mxscript(drawDevUrl + 'js/diagramly/Devel.js');
274
275			// Electron
276			if (mxIsElectron)
277			{
278				mxscript('js/diagramly/DesktopLibrary.js');
279				mxscript('js/diagramly/ElectronApp.js');
280			}
281
282			mxscript(drawDevUrl + 'js/PostConfig.js');
283		}
284		else
285		{
286			(function()
287			{
288				var hostName = window.location.hostname;
289
290				// Supported domains are *.draw.io and the packaged version in Quip
291				var supportedDomain = (hostName.substring(hostName.length - 8, hostName.length) === '.draw.io') ||
292					(hostName.substring(hostName.length - 13, hostName.length) === '.diagrams.net');
293					(hostName.substring(hostName.length - 17, hostName.length) === '.quipelements.com');
294
295				function loadAppJS()
296				{
297					mxscript('js/app.min.js', function()
298					{
299						mxScriptsLoaded = true;
300						checkAllLoaded();
301
302						if (!supportedDomain)
303						{
304							mxscript('js/PostConfig.js');
305						}
306
307						// Electron
308						if (mxIsElectron)
309						{
310							mxscript('js/diagramly/DesktopLibrary.js', function()
311							{
312								mxscript('js/diagramly/ElectronApp.js', function()
313								{
314									mxscript('js/extensions.min.js', function()
315									{
316										mxscript('js/stencils.min.js', function()
317										{
318											mxscript('js/shapes-14-6-5.min.js', function()
319											{
320												mxscript('js/PostConfig.js');
321											});
322										});
323									});
324								});
325							});
326						}
327					});
328				};
329
330				if (!supportedDomain || mxIsElectron)
331				{
332					mxscript('js/PreConfig.js', loadAppJS);
333				}
334				else
335				{
336					loadAppJS();
337				}
338			})();
339		}
340
341		// Adds basic error handling
342		window.onerror = function()
343		{
344			var status = document.getElementById('geStatus');
345
346			if (status != null)
347			{
348				status.innerHTML = 'Page could not be loaded. Please try refreshing.';
349			}
350		};
351	</script>
352    <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/plgmlhohecdddhbmmkncjdmlhcmaachm">
353	<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
354	<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
355	<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
356	<link rel="mask-icon" href="images/safari-pinned-tab.svg" color="#d89000">
357	<link rel="stylesheet" type="text/css" href="js/croppie/croppie.min.css">
358    <link rel="stylesheet" type="text/css" href="styles/grapheditor.css">
359    <link rel="preconnect" href="https://storage.googleapis.com">
360    <link rel="canonical" href="https://app.diagrams.net">
361	<link rel="manifest" href="images/manifest.json">
362	<link rel="shortcut icon" href="favicon.ico">
363	<style type="text/css">
364		body { overflow:hidden; }
365		div.picker { z-index: 10007; }
366		.geSidebarContainer .geTitle input {
367			font-size:8pt;
368			color:#606060;
369		}
370		.geBlock {
371			z-index:-3;
372			margin:100px;
373			margin-top:40px;
374			margin-bottom:30px;
375			padding:20px;
376			text-align:center;
377			min-width:50%;
378		}
379		.geBlock h1, .geBlock h2 {
380			margin-top:0px;
381			padding-top:0px;
382		}
383		.geEditor *:not(.geScrollable)::-webkit-scrollbar {
384		    width:14px;
385		    height:14px;
386		}
387		.geEditor ::-webkit-scrollbar-track {
388			background-clip:padding-box;
389			border:solid transparent;
390			border-width:1px;
391		}
392		.geEditor ::-webkit-scrollbar-corner {
393			background-color:transparent;
394		}
395		.geEditor ::-webkit-scrollbar-thumb {
396			background-color:rgba(0,0,0,.1);
397			background-clip:padding-box;
398			border:solid transparent;
399			border-radius:10px;
400		}
401		.geEditor ::-webkit-scrollbar-thumb:hover {
402			background-color:rgba(0,0,0,.4);
403		}
404		.geTemplate {
405			border:1px solid transparent;
406			display:inline-block;
407			_display:inline;
408			vertical-align:top;
409			border-radius:3px;
410			overflow:hidden;
411			font-size:14pt;
412			cursor:pointer;
413			margin:5px;
414		}
415	</style>
416	<!-- Workaround for binary XHR in IE 9/10, see App.loadUrl -->
417	<!--[if (IE 9)|(IE 10)]><!-->
418		<script type="text/vbscript">
419			Function mxUtilsBinaryToArray(Binary)
420				Dim i
421				ReDim byteArray(LenB(Binary))
422				For i = 1 To LenB(Binary)
423					byteArray(i-1) = AscB(MidB(Binary, i, 1))
424				Next
425				mxUtilsBinaryToArray = byteArray
426			End Function
427		</script>
428	<!--<![endif]-->
429</head>
430<body class="geEditor">
431<div id="geInfo">
432	<div class="geBlock">
433		<h1>Flowchart Maker and Online Diagram Software</h1>
434		<p>
435			diagrams.net (formerly draw.io) is free online diagram software. You can use it as a flowchart maker, network diagram software, to create UML online, as an ER diagram tool,
436			to design database schema, to build BPMN online, as a circuit diagram maker, and more. draw.io can import .vsdx, Gliffy&trade; and Lucidchart&trade; files .
437		</p>
438		<h2 id="geStatus">Loading...</h2>
439		<p>
440			Please ensure JavaScript is enabled.
441		</p>
442	</div>
443</div>
444<script type="text/javascript">
445/**
446 * Main
447 */
448if (navigator.userAgent != null && navigator.userAgent.toLowerCase().
449	indexOf(' electron/') >= 0 && typeof process !== 'undefined' && process.versions.electron < 5)
450{
451	// Redirects old Electron app to latest version
452	var div = document.getElementById('geInfo');
453
454	if (div != null)
455	{
456		div.innerHTML = '<center><h2>You are using an out of date version of this app.<br>Please download the latest version ' +
457			'<a href="https://github.com/jgraph/drawio-desktop/releases/latest" target="_blank">here</a>.</h2></center>';
458	}
459}
460else
461{
462	if (urlParams['dev'] != '1' && typeof document.createElement('canvas').getContext === "function")
463	{
464		window.addEventListener('load', function()
465		{
466			mxWinLoaded = true;
467			checkAllLoaded();
468		});
469	}
470	else
471	{
472		App.main();
473	}
474}
475</script>
476</body>
477</html>
478