2016-09-06 14:07:11 +00:00
<!-- [if IE]><meta http - equiv="X - UA - Compatible" content="IE=5,IE=9" ><![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 = "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" >
2017-06-07 16:10:08 +00:00
< meta name = "msapplication-config" content = "images/browserconfig.xml" >
2016-09-06 14:07:11 +00:00
< meta name = "mobile-web-app-capable" content = "yes" >
2017-06-07 16:10:08 +00:00
< meta name = "theme-color" content = "#d89000" >
2016-09-06 14:07:11 +00:00
< 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.
2016-09-26 14:05:37 +00:00
* - createindex=1: For developers only (see etc/build/README)
2016-09-06 14:07:11 +00:00
* - 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
2016-09-20 12:35:42 +00:00
if (urlParams['dev'] != '1')
2016-09-06 14:07:11 +00:00
{
2016-09-20 12:35:42 +00:00
(function()
2016-09-06 14:07:11 +00:00
{
2016-09-20 12:35:42 +00:00
var proto = window.location.protocol;
2016-09-06 14:07:11 +00:00
2016-09-26 14:05:37 +00:00
// Electron protocol is file:
2016-09-27 11:07:02 +00:00
if (proto != 'file:')
2016-09-06 14:07:11 +00:00
{
2016-09-26 14:05:37 +00:00
var host = window.location.host;
// Redirects apex and rt to www
if (host === 'draw.io' || host === 'rt.draw.io')
{
host = 'www.draw.io';
}
2016-09-20 12:35:42 +00:00
2016-09-26 14:05:37 +00:00
// Redirects to SSL/non-SSL
2017-05-12 23:24:17 +00:00
if (urlParams['demo'] != '1')
2016-09-20 12:35:42 +00:00
{
2016-09-26 14:05:37 +00:00
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:';
}
2016-09-20 12:35:42 +00:00
}
2016-09-26 14:05:37 +00:00
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)
2016-09-20 12:35:42 +00:00
{
2016-09-26 14:05:37 +00:00
window.location.href = href;
2016-09-20 12:35:42 +00:00
}
2016-09-06 14:07:11 +00:00
}
2016-09-20 12:35:42 +00:00
})();
}
2017-06-07 16:10:08 +00:00
/**
* Adds meta tags with application name (depends on offline URL parameter)
*/
(function()
{
function addMeta(name, content)
{
try
{
var s = document.createElement('meta');
s.setAttribute('name', name);
s.setAttribute('content', content);
var t = document.getElementsByTagName('meta')[0];
t.parentNode.insertBefore(s, t);
}
catch (e)
{
// ignore
}
};
var name = 'draw.io';
if (urlParams['offline'] === '1')
{
name += ' app';
}
addMeta('apple-mobile-web-app-title', name);
addMeta('application-name', name);
})();
2016-09-06 14:07:11 +00:00
< / script >
< link rel = "chrome-webstore-item" href = "https://chrome.google.com/webstore/detail/plgmlhohecdddhbmmkncjdmlhcmaachm" >
2017-06-06 19:48:38 +00:00
< link rel = "apple-touch-icon" sizes = "180x180" href = "images/apple-touch-icon.png" >
< link rel = "icon" type = "image/png" sizes = "32x32" href = "images/favicon-32x32.png" >
< link rel = "icon" type = "image/png" sizes = "16x16" href = "images/favicon-16x16.png" >
< link rel = "mask-icon" href = "images/safari-pinned-tab.svg" color = "#d89000" >
2017-06-07 16:10:08 +00:00
< link rel = "stylesheet" type = "text/css" href = "styles/grapheditor.css" >
< link rel = "canonical" href = "https://www.draw.io" >
2017-06-06 19:48:38 +00:00
< link rel = "manifest" href = "images/manifest.json" >
< link rel = "shortcut icon" href = "favicon.ico" >
2016-09-06 14:07:11 +00:00
< 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';
2016-09-26 14:05:37 +00:00
if (document.location.protocol == 'file:')
{
mxDevUrl = '../../mxgraph2';
2017-04-29 18:12:53 +00:00
// Forces includes for dev environment in node.js
mxForceIncludes = true;
2016-09-26 14:05:37 +00:00
}
2016-09-06 14:07:11 +00:00
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');
}
2016-10-03 16:15:00 +00:00
if (window & & window.process & & window.process.type)
{
// Electron
2017-06-07 16:10:08 +00:00
mxscript('js/diagramly/ElectronApp.js');
2016-10-03 16:15:00 +00:00
}
2016-09-06 14:07:11 +00:00
// 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.';
}
};
2016-10-03 16:15:00 +00:00
2016-09-06 14:07:11 +00:00
< / 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™ and Lucidchart™ 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;" >
2017-07-12 14:43:09 +00:00
< a href = "https://www.youtube.com/channel/UCiTtRN9b8P4CoSfpkfgEJHA" title = "draw.io on Youtube" target = "_blank" >
< img border = "0" width = "24" height = "24" src = "images/glyphicons_youtube.png" alt = "draw.io on Youtube" / >
2016-09-06 14:07:11 +00:00
< / a >
< 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 >
< 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 >
2016-09-12 11:14:09 +00:00
2017-07-12 14:43:09 +00:00
< 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 >
2016-09-12 11:14:09 +00:00
< 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 >
2016-09-06 14:07:11 +00:00
< / div >
< table align = "center" >
< tr >
< td id = "geFooterItem2" >
2017-07-12 14:43:09 +00:00
< a title = "Quick Start Video" href = "https://www.youtube.com/watch?v=Z0D96ZikMkc" target = "_blank" >
2017-07-18 18:01:31 +00:00
< img border = "0" align = "absmiddle" style = "margin-top:-3px;padding-right:8px;"
2017-07-12 14:43:09 +00:00
src="images/glyphicons_youtube_red.png"/>Quick Start Video< / a >
2016-09-06 14:07:11 +00:00
< / td >
< td id = "geFooterItem1" >
2016-10-03 16:15:00 +00:00
< a id = "geFooterLink1" title = "#1 Rated Confluence Add-on" target = "_blank"
2017-02-28 15:40:36 +00:00
href="https://marketplace.atlassian.com/plugins/com.mxgraph.confluence.plugins.diagramly/server/overview">
2017-07-12 14:43:09 +00:00
< img border = "0" width = "27" height = "24" align = "absmiddle" style = "padding-right:10px;"
2016-09-06 14:07:11 +00:00
src="images/logo-confluence.png"/>#1 Rated Confluence Add-on
< / a >
< / td >
< / tr >
< / table >
< / div >
< script type = "text/javascript" >
2016-09-20 12:35:42 +00:00
/**
* Main
*/
App.main();
2016-10-03 16:15:00 +00:00
// Logs footer1 clicks
2016-10-05 16:17:29 +00:00
if (document != null)
2016-10-03 16:15:00 +00:00
{
2016-10-07 13:02:07 +00:00
var footerElem = document.getElementById('geFooterLink1');
if (footerElem != null)
2016-10-05 16:17:29 +00:00
{
2016-10-07 13:02:07 +00:00
footerElem.onclick = function()
{
var img = new Image();
img.src = 'https://log.draw.io/log?msg=geFooterLink1:%20location=' + encodeURIComponent(window.location) + '& v=' + encodeURIComponent(EditorUi.VERSION);
}
2016-10-05 16:17:29 +00:00
}
2016-10-03 16:15:00 +00:00
}
2016-09-20 12:35:42 +00:00
/**
* Analytics
*/
2016-09-06 14:07:11 +00:00
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 >
