1<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5" ><![endif]--> 2<!DOCTYPE html> 3<html> 4<head> 5 <title>Flowchart Maker & 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™ and Lucidchart™ files . 437 </p> 438 <h2 id="geStatus">Loading...</h2> 439 <p> 440 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
