| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463 |
- <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5" ><![endif]-->
- <!DOCTYPE html>
- <html>
- <head>
- <title>Flowchart Maker & 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="drawio, 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="msapplication-config" content="images/browserconfig.xml">
- <meta name="mobile-web-app-capable" content="yes">
- <meta name="theme-color" content="#d89000">
- <script id="geBootstrap" type="text/javascript">
- /**
- * URL Parameters and protocol description are here:
- *
- * https://www.drawio.com/doc/faq/supported-url-parameters
- *
- * Parameters for developers:
- *
- * - dev=1: For developers only
- * - test=1: For developers only
- * - export=URL for export: 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++)
- {
- var idx = params[i].indexOf('=');
-
- if (idx > 0)
- {
- result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
- }
- }
-
- return result;
- })();
-
- // Forces CDN caches by passing URL parameters via URL hash
- if (window.location.hash != null && window.location.hash.substring(0, 2) == '#P')
- {
- try
- {
- urlParams = JSON.parse(decodeURIComponent(window.location.hash.substring(2)));
-
- if (urlParams.hash != null)
- {
- window.location.hash = urlParams.hash;
- }
- }
- catch (e)
- {
- // ignore
- }
- }
-
- // Global variable for desktop
- var mxIsElectron = navigator.userAgent != null && navigator.userAgent.toLowerCase().indexOf(' electron/') > -1 &&
- navigator.userAgent.indexOf(' draw.io/') > -1;
- // Redirects page if required
- if (urlParams['dev'] != '1')
- {
- (function()
- {
- var proto = window.location.protocol;
-
- if (!mxIsElectron)
- {
- var host = window.location.host;
-
- // Redirects apex, drive and rt to www
- if (host === 'draw.io' || host === 'rt.draw.io' || host === 'drive.draw.io')
- {
- host = 'www.draw.io';
- }
-
- 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;
- }
- }
- })();
- }
-
- /**
- * Adds meta tag to the page.
- */
- function mxmeta(name, content, httpEquiv)
- {
- try
- {
- var s = document.createElement('meta');
-
- if (name != null)
- {
- s.setAttribute('name', name);
- }
- s.setAttribute('content', content);
-
- if (httpEquiv != null)
- {
- s.setAttribute('http-equiv', httpEquiv);
- }
- var t = document.getElementsByTagName('meta')[0];
- t.parentNode.insertBefore(s, t);
- }
- catch (e)
- {
- // ignore
- }
- };
-
- /**
- * Synchronously adds scripts to the page.
- */
- function mxscript(src, onLoad, id, dataAppKey, noWrite, onError)
- {
- var defer = onLoad == null && !noWrite;
-
- if ((urlParams['dev'] != '1' && typeof document.createElement('canvas').getContext === "function") ||
- onLoad != null || noWrite)
- {
- var s = document.createElement('script');
- s.setAttribute('type', 'text/javascript');
- s.setAttribute('defer', 'true');
- s.setAttribute('src', src);
- if (id != null)
- {
- s.setAttribute('id', id);
- }
-
- if (dataAppKey != null)
- {
- s.setAttribute('data-app-key', dataAppKey);
- }
-
- if (onLoad != null)
- {
- var r = false;
-
- s.onload = s.onreadystatechange = function()
- {
- if (!r && (!this.readyState || this.readyState == 'complete'))
- {
- r = true;
- onLoad();
- }
- };
- }
- if (onError != null)
- {
- s.onerror = function(e)
- {
- onError('Failed to load ' + src, e);
- };
- }
-
- var t = document.getElementsByTagName('script')[0];
-
- if (t != null)
- {
- 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);
- };
-
- /**
- * Adds meta tags with application name (depends on offline URL parameter)
- */
- (function()
- {
- var name = 'diagrams.net';
- mxmeta('apple-mobile-web-app-title', name);
- mxmeta('application-name', name);
- if (mxIsElectron)
- {
- mxmeta(null, 'default-src \'self\'; script-src \'self\' \'sha256-6g514VrT/cZFZltSaKxIVNFF46+MFaTSDTPB8WfYK+c=\'; connect-src \'self\' https://*.draw.io https://*.diagrams.net https://fonts.googleapis.com https://fonts.gstatic.com; img-src * data:; media-src *; font-src *; frame-src \'none\'; style-src \'self\' \'unsafe-inline\' https://fonts.googleapis.com; base-uri \'none\';child-src \'self\';object-src \'none\';', 'Content-Security-Policy');
- }
- })();
-
- // Checks for local storage
- var isLocalStorage = false;
-
- try
- {
- isLocalStorage = urlParams['local'] != '1' && typeof(localStorage) != 'undefined';
- }
- catch (e)
- {
- // ignored
- }
- var mxScriptsLoaded = false, mxWinLoaded = false;
-
- function checkAllLoaded()
- {
- if (mxScriptsLoaded && mxWinLoaded)
- {
- App.main();
- }
- };
-
- 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 = '';
-
- // Used to request draw.io sources in dev mode
- var drawDevUrl = '';
- var geBasePath = 'js/grapheditor';
- var mxBasePath = 'mxgraph/src';
-
- if (document.location.protocol == 'file:')
- {
- // Forces includes for dev environment in node.js
- mxForceIncludes = true;
- }
- mxForceIncludes = false;
- mxscript(drawDevUrl + 'js/PreConfig.js');
- mxscript(drawDevUrl + 'js/diagramly/Init.js');
- mxscript(geBasePath + '/Init.js');
- mxscript(mxBasePath + '/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');
-
- // Electron
- if (mxIsElectron)
- {
- mxscript('js/diagramly/DesktopLibrary.js');
- mxscript('js/diagramly/ElectronApp.js');
- }
-
- mxscript(drawDevUrl + 'js/PostConfig.js');
- }
- else
- {
- (function()
- {
- var hostName = window.location.hostname;
-
- // Supported domains are *.draw.io and the packaged version in Quip
- var supportedDomain = (hostName.substring(hostName.length - 8, hostName.length) === '.draw.io') ||
- (hostName.substring(hostName.length - 13, hostName.length) === '.diagrams.net');
-
- function loadAppJS()
- {
- mxscript('js/app.min.js', function()
- {
- mxScriptsLoaded = true;
- checkAllLoaded();
-
- // Electron
- if (mxIsElectron)
- {
- mxscript('js/diagramly/DesktopLibrary.js', function()
- {
- mxscript('js/diagramly/ElectronApp.js', function()
- {
- mxscript('js/extensions.min.js', function()
- {
- mxscript('js/stencils.min.js', function()
- {
- mxscript('js/shapes-14-6-5.min.js', function()
- {
- mxscript('js/PostConfig.js');
- });
- });
- });
- });
- });
- }
- else if (!supportedDomain || navigator.onLine)
- {
- mxscript('js/PostConfig.js');
- }
- });
- };
-
- if (!supportedDomain || mxIsElectron || navigator.onLine)
- {
- mxscript('js/PreConfig.js', loadAppJS);
- }
- else
- {
- loadAppJS();
- }
- })();
- }
- // 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>
- <link rel="icon" href="favicon.ico" sizes="any">
- <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
- <link rel="stylesheet" type="text/css" href="styles/grapheditor.css">
- <link rel="stylesheet" media="(forced-colors: active)" href="styles/high-contrast.css" id="high-contrast-stylesheet">
- <link rel="canonical" href="https://app.diagrams.net">
- <link rel="manifest" href="images/manifest.json">
- <link rel="shortcut icon" href="favicon.ico">
- <style type="text/css">
- body { overflow:hidden; }
- div.picker { z-index: 10007; }
- .geSidebarContainer .geTitle input {
- font-size:8pt;
- color:#606060;
- }
- .geBlock {
- z-index:-3;
- margin:100px;
- margin-top:40px;
- margin-bottom:30px;
- padding:20px;
- text-align:center;
- min-width:50%;
- }
- .geBlock h1, .geBlock h2 {
- margin-top:0px;
- padding-top:0px;
- }
- .geEditor *:not(.geScrollable)::-webkit-scrollbar {
- width:10px;
- height:10px;
- }
- .geEditor ::-webkit-scrollbar-track {
- background-clip:padding-box;
- border:solid transparent;
- border-width:1px;
- }
- .geEditor ::-webkit-scrollbar-corner {
- background-color:transparent;
- }
- .geEditor ::-webkit-scrollbar-thumb {
- background-color:rgba(0,0,0,.1);
- background-clip:padding-box;
- border:solid transparent;
- border-radius:10px;
- }
- .geEditor ::-webkit-scrollbar-thumb:hover {
- background-color:rgba(0,0,0,.4);
- }
- .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;
- }
- </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]-->
- </head>
- <body class="geEditor">
- <div id="geInfo">
- <div class="geBlock">
- <h1>Flowchart Maker and Online Diagram Software</h1>
- <p>
- 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,
- to design database schema, to build BPMN online, as a circuit diagram maker, and more. draw.io can import .vsdx, Gliffy™ and Lucidchart™ files .
- </p>
- <h2 id="geStatus">Loading...</h2>
- <p>
-
- </p>
- </div>
- </div>
- <script id="geMain" type="text/javascript">
- /**
- * Main
- */
- if (urlParams['dev'] != '1' && typeof document.createElement('canvas').getContext === "function")
- {
- window.addEventListener('load', function()
- {
- mxWinLoaded = true;
- checkAllLoaded();
- });
- }
- else
- {
- App.main();
- }
- </script>
- </body>
- </html>
|