jexelmans
/
drawio


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450
							<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5,IE=9" ><![endif]-->
<!DOCTYPE html>
<html>
<head>
    <title>Flowchart Maker &amp; Online Diagram Software</title>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="Description" content="draw.io is free online diagram software for making flowcharts, process diagrams, org charts, UML, ER and network diagrams">
    <meta name="Keywords" content="diagram, online, flow chart, flowchart maker, uml, erd">
    <meta itemprop="name" content="draw.io - free flowchart maker and diagrams online">
	<meta itemprop="description" content="draw.io is a free online diagramming application  and flowchart maker . You can use it to create UML, entity relationship,
		org charts, BPMN and BPM, database schema and networks. Also possible are telecommunication network, workflow, flowcharts, maps overlays and GIS, electronic 
		circuit and social network diagrams.">
	<meta itemprop="image" content="https://lh4.googleusercontent.com/-cLKEldMbT_E/Tx8qXDuw6eI/AAAAAAAAAAs/Ke0pnlk8Gpg/w500-h344-k/BPMN%2Bdiagram%2Brc2f.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="canonical" href="https://www.draw.io">
    <script type="text/javascript">
		/**
		 * URL Parameters and protocol description are here:
		 *
		 * https://support.draw.io/pages/viewpage.action?pageId=12878136
		 *
		 * Parameters for developers:
		 *
		 * - dev=1: For developers only
		 * - test=1: For developers only
		 * - drawdev=1: For developers only
		 * - export=URL for export: For developers only
		 * - page=n: For developers only
		 * - ignoremime=1: For developers only (see DriveClient.js). Use Cmd-S to override mime.
		 * - createindex=1: For developers only (see etc/build/README)
		 * - filesupport=0: For developers only (see Editor.js in core)
		 * - savesidebar=1: For developers only (see Sidebar.js)
		 * - pages=1: For developers only (see Pages.js)
		 * - lic=email: For developers only (see LicenseServlet.java)
		 * --
		 * - networkshapes=1: For testing network shapes (temporary)
		 */
		var urlParams = (function()
		{
			var result = new Object();
			var params = window.location.search.slice(1).split('&');
			
			for (var i = 0; i < params.length; i++)
			{
				idx = params[i].indexOf('=');
				
				if (idx > 0)
				{
					result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
				}
			}
			
			return result;
		})();

		// Redirects page if required
		if (urlParams['dev'] != '1')
		{
			(function()
			{
				var proto = window.location.protocol;
				
				// Electron protocol is file:
				if (proto != 'file:')
				{
					var host = window.location.host;
		
					// Redirects apex and rt to www
					if (host === 'draw.io' || host === 'rt.draw.io')
					{
						host = 'www.draw.io';
					}
					
					// Redirects to SSL/non-SSL
					if (urlParams['demo'] != '1' && urlParams['offline'] != '1')
					{
						var ssl = (urlParams['https'] != null) ? urlParams['https'] == '1' :
							navigator.userAgent.indexOf('MSIE') < 0 || document.documentMode >= 9;
						
						if (ssl && proto != 'https:')
						{
							proto = 'https:';
						}
						else if (!ssl && proto != 'http:')
						{
							proto = 'http:';
						}
					}
					
					var href = proto + '//' + host + window.location.href.substring(
							window.location.protocol.length +
							window.location.host.length + 2);
		
					// Redirects if href changes
					if (href != window.location.href)
					{
						window.location.href = href;
					}
				}
			})();
		}
	</script>
    <link rel="alternate" type="application/rss+xml" title="RSS Feed for draw.io" href="http://blog.draw.io/feed/">
    <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/plgmlhohecdddhbmmkncjdmlhcmaachm">
	<link rel="apple-touch-icon" sizes="57x57" href="images/apple-touch-icon-57x57.png">
	<link rel="apple-touch-icon" sizes="60x60" href="images/apple-touch-icon-60x60.png">
	<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="76x76" href="images/apple-touch-icon-76x76.png">
	<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
	<link rel="apple-touch-icon" sizes="120x120" href="images/apple-touch-icon-120x120.png">
	<link rel="apple-touch-icon" sizes="144x144" href="images/apple-touch-icon-144x144.png">
	<link rel="apple-touch-icon" sizes="152x152" href="images/apple-touch-icon-152x152.png">
	<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon-180x180.png">
	<link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32">
	<link rel="icon" type="image/png" href="images/favicon-194x194.png" sizes="194x194">
	<link rel="icon" type="image/png" href="images/favicon-96x96.png" sizes="96x96">
	<link rel="icon" type="image/png" href="images/android-chrome-192x192.png" sizes="192x192">
	<link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16">
	<link rel="manifest" href="images/manifest.json">
	<link rel="mask-icon" href="images/safari-pinned-tab.svg" color="#f18808">
	<meta name="msapplication-TileColor" content="#da532c">
	<meta name="msapplication-TileImage" content="images/mstile-144x144.png">
	<meta name="msapplication-config" content="images/browserconfig.xml">
	<meta name="theme-color" content="#f18808">
    <link rel="apple-touch-startup-image" href="images/logo-flat.png">
    <link rel="stylesheet" type="text/css" href="styles/grapheditor.css">
	<style type="text/css">
		body { overflow:hidden; }
		.geSidebarContainer .geTitle { color:#505050; }
		.geSidebarContainer .geTitle input {
			font-size:8pt;
			color:#606060;
		}
		.geBlock {
			z-index:-3;
			margin:100px;
			margin-top:40px;
			margin-bottom:30px;
			padding:20px;
		}
		.geBlock h1, .geBlock h2 {
			margin-top:0px;
			padding-top:0px;
		}
		.geEditor ::-webkit-scrollbar {
		    width:12px;
		    height:12px;
		}
		.geEditor ::-webkit-scrollbar-track {
			background:whiteSmoke;
			-webkit-box-shadow:inset 0 0 4px rgba(0,0,0,0.1);
		}
		.geEditor ::-webkit-scrollbar-thumb {
			background:#c5c5c5;
		    border-radius:10px;
			border:whiteSmoke solid 3px;
		}
		.geEditor ::-webkit-scrollbar-thumb:hover {
			background:#b5b5b5;
		}
		.geTemplate {
			border:1px solid transparent;
			display:inline-block;
			_display:inline;
			vertical-align:top;
			border-radius:3px;
			overflow:hidden;
			font-size:14pt;
			cursor:pointer;
			margin:5px;
		}
		.geFooterContainer div.geSocialFooter a {
			display:inline;
			padding:0px;
		}
		.geFooterContainer div.geSocialFooter a img {
			margin-top:10px;
			opacity:0.8;
		}
		.geFooterContainer div.geSocialFooter a img:hover {
			opacity:1;
		}
		#geFooterItem1 {
			background-color: #cdcdcd;
		}
		#geFooterItem1:hover {
			background-color: #b0b0b0;
		}		
		.geFooterContainer>div>img {
			opacity:0.5;
			background:#e5e5e5;
			border:1px solid transparent;
			cusor:pointer;
			margin-top:3px;
			margin-right:6px;
			position:absolute;
			right:4px;
			top:12px;
			padding:1px;
			cursor:pointer;
		}
		.geFooterContainer>div>img:hover {
			opacity: 1;
		}
	</style>
	<!-- Workaround for binary XHR in IE 9/10, see App.loadUrl -->
	<!--[if (IE 9)|(IE 10)]><!-->
		<script type="text/vbscript">
			Function mxUtilsBinaryToArray(Binary)
				Dim i
				ReDim byteArray(LenB(Binary))
				For i = 1 To LenB(Binary)
					byteArray(i-1) = AscB(MidB(Binary, i, 1))
				Next
				mxUtilsBinaryToArray = byteArray
			End Function
		</script>
	<!--<![endif]-->
	<script type="text/javascript">
		/**
		 * Synchronously adds scripts to the page.
		 */
		function mxscript(src, onLoad, id, dataAppKey)
		{
			if (onLoad != null)
			{
				var s = document.createElement('script');
				s.setAttribute('type', 'text/javascript');
				s.setAttribute('src', src);
				var r = false;
				
				if (id != null)
				{
					s.setAttribute('id', id);
				}
				
				if (dataAppKey != null)
				{
					s.setAttribute('data-app-key', dataAppKey);
				}
				
				s.onload = s.onreadystatechange = function()
				{
					if (!r && (!this.readyState || this.readyState == 'complete'))
					{
			      		r = true;
			      		onLoad();
					}
			  	};
			  	
			  	var t = document.getElementsByTagName('script')[0];
			  	t.parentNode.insertBefore(s, t);
			}
			else
			{
				document.write('<script src="' + src + '"' + ((id != null) ? ' id="' + id +'" ' : '') +
					((dataAppKey != null) ? ' data-app-key="' + dataAppKey +'" ' : '') + '></scr' + 'ipt>');
			}
		};

		/**
		 * Asynchronously adds scripts to the page.
		 */
		function mxinclude(src)
		{
			var g = document.createElement('script'); g.type = 'text/javascript'; g.async = true; g.src = src;
		    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(g, s);
		};
		
		// Checks for local storage
		var isLocalStorage = false;
		
		try
		{
			isLocalStorage = urlParams['local'] != '1' && typeof(localStorage) != 'undefined';
		}
		catch (e)
		{
			// ignored
		}

		var t0 = new Date();

		// Changes paths for local development environment
		if (urlParams['dev'] == '1')
		{
			// Used to request grapheditor/mxgraph sources in dev mode
			var mxDevUrl = document.location.protocol + '//devhost.jgraph.com/mxgraph2';
			
			if (document.location.protocol == 'file:')
			{
				mxDevUrl = '../../mxgraph2';
				
				// Forces includes for dev environment in node.js
				mxForceIncludes = true;
			}

			var geBasePath = mxDevUrl + '/javascript/examples/grapheditor/www/js';
			var mxBasePath = mxDevUrl + '/javascript/src';
			
			// Used to request draw.io sources in dev mode
			var drawDevUrl = '';

			if (urlParams['drawdev'] == '1')
			{
				drawDevUrl = document.location.protocol + '//drawhost.jgraph.com/';
			}
			
			mxscript(drawDevUrl + 'js/diagramly/Init.js');
			mxscript(geBasePath + '/Init.js');
			mxscript(mxDevUrl + '/javascript/src/js/mxClient.js');
			
			// Adds all JS code that depends on mxClient. This indirection via Devel.js is
			// required in some browsers to make sure mxClient.js (and the files that it
			// loads asynchronously) are available when the code loaded in Devel.js runs.
			mxscript(drawDevUrl + 'js/diagramly/Devel.js');
		}
		else
		{
			mxscript('js/app.min.js');
		}

		if (window && window.process && window.process.type)
		{
			// Electron
			mxscript('js/diagramly/ElectronApp.js');
		}
		
		// Adds basic error handling
		window.onerror = function()
		{
			var status = document.getElementById('geStatus');
			
			if (status != null)
			{
				status.innerHTML = 'Page could not be loaded. Please try refreshing.';
			}
		};

	</script>
</head>
<body class="geEditor">
<div id="geInfo">
	<div class="geBlock" style="text-align:center;min-width:50%;">
		<h1>Flowchart Maker and Online Diagram Software</h1>
		<p>
			draw.io (formerly Diagramly) 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, 
			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 .
		</p>
		<h2 id="geStatus">Loading...</h2>
		<p>
			Please ensure JavaScript is enabled
		</p>
	</div>
</div>
<div id="geFooter" style="visibility:hidden;overflow:hidden;margin-right:170px;">
	<div class="geSocialFooter" style="position:absolute;right:32px;white-space:nowrap;">
    	<a href="https://plus.google.com/u/0/+DrawIo1/posts" title="draw.io on Google+" target="_blank">
    		<img border="0" width="24" height="24" src="images/glyphicons_google.png" alt="draw.io on Google+"/>
    	</a>
    	&nbsp;
    	<a href="https://www.facebook.com/pages/drawio/161015263923018" title="draw.io on Facebook" target="_blank">
    		<img border="0" width="24" height="24" src="images/glyphicons_facebook.png" alt="draw.io on Facebook"/>
    	</a>
    	&nbsp;
    	<a href="https://www.twitter.com/drawio" title="draw.io on Twitter" target="_blank">
    		<img border="0" width="24" height="24" src="images/glyphicons_twitter.png" alt="draw.io on Twitter"/>
    	</a>
    	&nbsp;
    	<a href="https://github.com/jgraph/draw.io" title="draw.io on GitHub" target="_blank">
    		<img border="0" width="24" height="24" src="images/glyphicons_github.png" alt="draw.io on GitHub"/>
    	</a>
	</div>
	<table align="center">
		<tr>
			<td id="geFooterItem2">
				<a title="HTML5 JavaScript Diagramming" target="_blank" href="https://github.com/jgraph/draw.io">
					<img border="0" align="absmiddle" style="margin-top:-2px;padding-right:14px;"
						src="images/glyphicons_github.png"/>Fork us on GitHub
				</a>
			</td>
			<td id="geFooterItem1">
				<a id="geFooterLink1" title="#1 Rated Confluence Add-on" target="_blank"
					href="https://marketplace.atlassian.com/plugins/com.mxgraph.confluence.plugins.diagramly/server/overview">
					<img border="0" width="27" height="24" align="absmiddle" style="padding-right:16px;"
						src="images/logo-confluence.png"/>#1 Rated Confluence Add-on
				</a>
			</td>
		</tr>
	</table>
</div>
<script type="text/javascript">
// Testing new icons
(function()
{
	if (urlParams['icons'] == 'test')
	{
		HoverIcons.prototype.triangleUp = new mxImage(IMAGE_PATH + '/connect-up-new.png', 20, 20);
		HoverIcons.prototype.triangleRight = new mxImage(IMAGE_PATH + '/connect-right-new.png', 20, 20);
		HoverIcons.prototype.triangleDown = new mxImage(IMAGE_PATH + '/connect-down-new.png', 20, 20);
		HoverIcons.prototype.triangleLeft = new mxImage(IMAGE_PATH + '/connect-left-new.png', 20, 20);
		HoverIcons.prototype.rotationHandle = new mxImage(IMAGE_PATH + '/handle-rotate-new.png', 18, 18);
		Sidebar.prototype.triangleUp = HoverIcons.prototype.triangleUp;
		Sidebar.prototype.triangleRight = HoverIcons.prototype.triangleRight;
		Sidebar.prototype.triangleDown = HoverIcons.prototype.triangleDown;
		Sidebar.prototype.triangleLeft = HoverIcons.prototype.triangleLeft;
		mxVertexHandler.prototype.rotationHandleVSpacing = -18;
		HoverIcons.prototype.inactiveOpacity = 30;
	}
})();
/**
 * Main
 */
App.main();

// Logs footer1 clicks
if (document != null)
{
	var footerElem = document.getElementById('geFooterLink1');
	
	if (footerElem != null)
	{
		footerElem.onclick = function()
		{
			var img = new Image();
			img.src = 'https://log.draw.io/log?msg=geFooterLink1:%20location=' + encodeURIComponent(window.location) + '&v=' + encodeURIComponent(EditorUi.VERSION);
		}
	}
}

/**
 * Analytics
 */
if (urlParams['analytics'] != '0' && urlParams['dev'] != '1' && urlParams['chrome'] != '0')
{
	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
		(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
		m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
		})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
	
		ga('create', 'UA-78007-10', 'auto');
		ga('send', 'pageview');
}
</script>
</body>
</html>