teams.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463
  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="draw.io is free online diagram software for making flowcharts, process diagrams, org charts, UML, ER and network diagrams">
  9. <meta name="Keywords" content="drawio, diagram, online, flow chart, flowchart maker, uml, erd">
  10. <meta itemprop="name" content="draw.io - free flowchart maker and diagrams online">
  11. <meta itemprop="description" content="draw.io 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 id="geBootstrap" type="text/javascript">
  20. /**
  21. * URL Parameters and protocol description are here:
  22. *
  23. * https://www.drawio.com/doc/faq/supported-url-parameters
  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. for (var i = 0; i < params.length; i++)
  44. {
  45. var idx = params[i].indexOf('=');
  46. if (idx > 0)
  47. {
  48. result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
  49. }
  50. }
  51. return result;
  52. })();
  53. // Forces CDN caches by passing URL parameters via URL hash
  54. if (window.location.hash != null && window.location.hash.substring(0, 2) == '#P')
  55. {
  56. try
  57. {
  58. urlParams = JSON.parse(decodeURIComponent(window.location.hash.substring(2)));
  59. if (urlParams.hash != null)
  60. {
  61. window.location.hash = urlParams.hash;
  62. }
  63. }
  64. catch (e)
  65. {
  66. // ignore
  67. }
  68. }
  69. // Global variable for desktop
  70. var mxIsElectron = navigator.userAgent != null && navigator.userAgent.toLowerCase().indexOf(' electron/') > -1 &&
  71. navigator.userAgent.indexOf(' draw.io/') > -1;
  72. // Redirects page if required
  73. if (urlParams['dev'] != '1')
  74. {
  75. (function()
  76. {
  77. var proto = window.location.protocol;
  78. if (!mxIsElectron)
  79. {
  80. var host = window.location.host;
  81. // Redirects apex, drive and rt to www
  82. if (host === 'draw.io' || host === 'rt.draw.io' || host === 'drive.draw.io')
  83. {
  84. host = 'www.draw.io';
  85. }
  86. var href = proto + '//' + host + window.location.href.substring(
  87. window.location.protocol.length +
  88. window.location.host.length + 2);
  89. // Redirects if href changes
  90. if (href != window.location.href)
  91. {
  92. window.location.href = href;
  93. }
  94. }
  95. })();
  96. }
  97. /**
  98. * Adds meta tag to the page.
  99. */
  100. function mxmeta(name, content, httpEquiv)
  101. {
  102. try
  103. {
  104. var s = document.createElement('meta');
  105. if (name != null)
  106. {
  107. s.setAttribute('name', name);
  108. }
  109. s.setAttribute('content', content);
  110. if (httpEquiv != null)
  111. {
  112. s.setAttribute('http-equiv', httpEquiv);
  113. }
  114. var t = document.getElementsByTagName('meta')[0];
  115. t.parentNode.insertBefore(s, t);
  116. }
  117. catch (e)
  118. {
  119. // ignore
  120. }
  121. };
  122. /**
  123. * Synchronously adds scripts to the page.
  124. */
  125. function mxscript(src, onLoad, id, dataAppKey, noWrite, onError)
  126. {
  127. var defer = onLoad == null && !noWrite;
  128. if ((urlParams['dev'] != '1' && typeof document.createElement('canvas').getContext === "function") ||
  129. onLoad != null || noWrite)
  130. {
  131. var s = document.createElement('script');
  132. s.setAttribute('type', 'text/javascript');
  133. s.setAttribute('defer', 'true');
  134. s.setAttribute('src', src);
  135. if (id != null)
  136. {
  137. s.setAttribute('id', id);
  138. }
  139. if (dataAppKey != null)
  140. {
  141. s.setAttribute('data-app-key', dataAppKey);
  142. }
  143. if (onLoad != null)
  144. {
  145. var r = false;
  146. s.onload = s.onreadystatechange = function()
  147. {
  148. if (!r && (!this.readyState || this.readyState == 'complete'))
  149. {
  150. r = true;
  151. onLoad();
  152. }
  153. };
  154. }
  155. if (onError != null)
  156. {
  157. s.onerror = function(e)
  158. {
  159. onError('Failed to load ' + src, e);
  160. };
  161. }
  162. var t = document.getElementsByTagName('script')[0];
  163. if (t != null)
  164. {
  165. t.parentNode.insertBefore(s, t);
  166. }
  167. }
  168. else
  169. {
  170. document.write('<script src="' + src + '"' + ((id != null) ? ' id="' + id +'" ' : '') +
  171. ((dataAppKey != null) ? ' data-app-key="' + dataAppKey +'" ' : '') + '></scr' + 'ipt>');
  172. }
  173. };
  174. /**
  175. * Asynchronously adds scripts to the page.
  176. */
  177. function mxinclude(src)
  178. {
  179. var g = document.createElement('script');
  180. g.type = 'text/javascript';
  181. g.async = true;
  182. g.src = src;
  183. var s = document.getElementsByTagName('script')[0];
  184. s.parentNode.insertBefore(g, s);
  185. };
  186. /**
  187. * Adds meta tags with application name (depends on offline URL parameter)
  188. */
  189. (function()
  190. {
  191. var name = 'diagrams.net';
  192. mxmeta('apple-mobile-web-app-title', name);
  193. mxmeta('application-name', name);
  194. if (mxIsElectron)
  195. {
  196. 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');
  197. }
  198. })();
  199. // Checks for local storage
  200. var isLocalStorage = false;
  201. try
  202. {
  203. isLocalStorage = urlParams['local'] != '1' && typeof(localStorage) != 'undefined';
  204. }
  205. catch (e)
  206. {
  207. // ignored
  208. }
  209. var mxScriptsLoaded = false, mxWinLoaded = false;
  210. function checkAllLoaded()
  211. {
  212. if (mxScriptsLoaded && mxWinLoaded)
  213. {
  214. App.main();
  215. }
  216. };
  217. var t0 = new Date();
  218. // Changes paths for local development environment
  219. if (urlParams['dev'] == '1')
  220. {
  221. // Used to request grapheditor/mxgraph sources in dev mode
  222. var mxDevUrl = '';
  223. // Used to request draw.io sources in dev mode
  224. var drawDevUrl = '';
  225. var geBasePath = 'js/grapheditor';
  226. var mxBasePath = 'mxgraph/src';
  227. if (document.location.protocol == 'file:')
  228. {
  229. // Forces includes for dev environment in node.js
  230. mxForceIncludes = true;
  231. }
  232. mxForceIncludes = false;
  233. mxscript(drawDevUrl + 'js/PreConfig.js');
  234. mxscript(drawDevUrl + 'js/diagramly/Init.js');
  235. mxscript(geBasePath + '/Init.js');
  236. mxscript(mxBasePath + '/mxClient.js');
  237. // Adds all JS code that depends on mxClient. This indirection via Devel.js is
  238. // required in some browsers to make sure mxClient.js (and the files that it
  239. // loads asynchronously) are available when the code loaded in Devel.js runs.
  240. mxscript(drawDevUrl + 'js/diagramly/Devel.js');
  241. // Electron
  242. if (mxIsElectron)
  243. {
  244. mxscript('js/diagramly/DesktopLibrary.js');
  245. mxscript('js/diagramly/ElectronApp.js');
  246. }
  247. mxscript(drawDevUrl + 'js/PostConfig.js');
  248. }
  249. else
  250. {
  251. (function()
  252. {
  253. var hostName = window.location.hostname;
  254. // Supported domains are *.draw.io and the packaged version in Quip
  255. var supportedDomain = (hostName.substring(hostName.length - 8, hostName.length) === '.draw.io') ||
  256. (hostName.substring(hostName.length - 13, hostName.length) === '.diagrams.net');
  257. function loadAppJS()
  258. {
  259. mxscript('js/app.min.js', function()
  260. {
  261. mxScriptsLoaded = true;
  262. checkAllLoaded();
  263. // Electron
  264. if (mxIsElectron)
  265. {
  266. mxscript('js/diagramly/DesktopLibrary.js', function()
  267. {
  268. mxscript('js/diagramly/ElectronApp.js', function()
  269. {
  270. mxscript('js/extensions.min.js', function()
  271. {
  272. mxscript('js/stencils.min.js', function()
  273. {
  274. mxscript('js/shapes-14-6-5.min.js', function()
  275. {
  276. mxscript('js/PostConfig.js');
  277. });
  278. });
  279. });
  280. });
  281. });
  282. }
  283. else if (!supportedDomain || navigator.onLine)
  284. {
  285. mxscript('js/PostConfig.js');
  286. }
  287. });
  288. };
  289. if (!supportedDomain || mxIsElectron || navigator.onLine)
  290. {
  291. mxscript('js/PreConfig.js', loadAppJS);
  292. }
  293. else
  294. {
  295. loadAppJS();
  296. }
  297. })();
  298. }
  299. // Adds basic error handling
  300. window.onerror = function()
  301. {
  302. var status = document.getElementById('geStatus');
  303. if (status != null)
  304. {
  305. status.innerHTML = 'Page could not be loaded. Please try refreshing.';
  306. }
  307. };
  308. </script>
  309. <link rel="icon" href="favicon.ico" sizes="any">
  310. <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
  311. <link rel="stylesheet" type="text/css" href="styles/grapheditor.css">
  312. <link rel="stylesheet" media="(forced-colors: active)" href="styles/high-contrast.css" id="high-contrast-stylesheet">
  313. <link rel="canonical" href="https://app.diagrams.net">
  314. <link rel="manifest" href="images/manifest.json">
  315. <link rel="shortcut icon" href="favicon.ico">
  316. <style type="text/css">
  317. body { overflow:hidden; }
  318. div.picker { z-index: 10007; }
  319. .geSidebarContainer .geTitle input {
  320. font-size:8pt;
  321. color:#606060;
  322. }
  323. .geBlock {
  324. z-index:-3;
  325. margin:100px;
  326. margin-top:40px;
  327. margin-bottom:30px;
  328. padding:20px;
  329. text-align:center;
  330. min-width:50%;
  331. }
  332. .geBlock h1, .geBlock h2 {
  333. margin-top:0px;
  334. padding-top:0px;
  335. }
  336. .geEditor *:not(.geScrollable)::-webkit-scrollbar {
  337. width:10px;
  338. height:10px;
  339. }
  340. .geEditor ::-webkit-scrollbar-track {
  341. background-clip:padding-box;
  342. border:solid transparent;
  343. border-width:1px;
  344. }
  345. .geEditor ::-webkit-scrollbar-corner {
  346. background-color:transparent;
  347. }
  348. .geEditor ::-webkit-scrollbar-thumb {
  349. background-color:rgba(0,0,0,.1);
  350. background-clip:padding-box;
  351. border:solid transparent;
  352. border-radius:10px;
  353. }
  354. .geEditor ::-webkit-scrollbar-thumb:hover {
  355. background-color:rgba(0,0,0,.4);
  356. }
  357. .geTemplate {
  358. border:1px solid transparent;
  359. display:inline-block;
  360. _display:inline;
  361. vertical-align:top;
  362. border-radius:3px;
  363. overflow:hidden;
  364. font-size:14pt;
  365. cursor:pointer;
  366. margin:5px;
  367. }
  368. </style>
  369. <!-- Workaround for binary XHR in IE 9/10, see App.loadUrl -->
  370. <!--[if (IE 9)|(IE 10)]><!-->
  371. <script type="text/vbscript">
  372. Function mxUtilsBinaryToArray(Binary)
  373. Dim i
  374. ReDim byteArray(LenB(Binary))
  375. For i = 1 To LenB(Binary)
  376. byteArray(i-1) = AscB(MidB(Binary, i, 1))
  377. Next
  378. mxUtilsBinaryToArray = byteArray
  379. End Function
  380. </script>
  381. <!--<![endif]-->
  382. </head>
  383. <body class="geEditor">
  384. <div id="geInfo">
  385. <div class="geBlock">
  386. <h1>Flowchart Maker and Online Diagram Software</h1>
  387. <p>
  388. 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,
  389. 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 .
  390. </p>
  391. <h2 id="geStatus">Loading...</h2>
  392. <p>
  393. </p>
  394. </div>
  395. </div>
  396. <script id="geMain" type="text/javascript">
  397. /**
  398. * Main
  399. */
  400. if (urlParams['dev'] != '1' && typeof document.createElement('canvas').getContext === "function")
  401. {
  402. window.addEventListener('load', function()
  403. {
  404. mxWinLoaded = true;
  405. checkAllLoaded();
  406. });
  407. }
  408. else
  409. {
  410. App.main();
  411. }
  412. </script>
  413. </body>
  414. </html>