drawio-desktop/docs/index.html
2017-08-16 17:44:22 +01:00

82 lines
20 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html style="padding-top: 0px;">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style> html{overflow-x:hidden!important}body,html{height:auto!important}body{margin:0!important;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}[hidden]{display:none!important}html.i-amphtml-singledoc.i-amphtml-embedded{-ms-touch-action:pan-y;touch-action:pan-y}html.i-amphtml-singledoc>body{overflow:visible!important;position:relative!important}html.i-amphtml-webview>body{overflow-x:hidden!important;overflow-y:visible!important}html.i-amphtml-ios-embed-legacy>body{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important}html.i-amphtml-ios-embed{overflow-y:auto!important;position:static}#i-amphtml-wrapper{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;display:block!important}html.i-amphtml-ios-embed.i-amphtml-ios-overscroll,html.i-amphtml-ios-embed.i-amphtml-ios-overscroll>#i-amphtml-wrapper{-webkit-overflow-scrolling:touch!important}#i-amphtml-wrapper>body{position:relative!important;border-top:1px solid transparent!important}.i-amphtml-element{display:inline-block}.i-amphtml-layout-fixed{display:inline-block;position:relative}.i-amphtml-layout-container,.i-amphtml-layout-fixed-height,.i-amphtml-layout-responsive{display:block;position:relative}.i-amphtml-layout-fill{display:block;overflow:hidden!important;position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-layout-flex-item{display:block;position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.i-amphtml-layout-size-defined{overflow:hidden!important}.i-amphtml-layout-awaiting-size{position:absolute!important;top:auto!important;bottom:auto!important}i-amphtml-sizer{display:block!important}.i-amphtml-fill-content{display:block;width:1px;min-width:100%;height:1px;min-height:100%;margin:auto}.i-amphtml-layout-size-defined .i-amphtml-fill-content{position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-replaced-content,.i-amphtml-screen-reader{padding:0!important;border:none!important}.i-amphtml-screen-reader{position:fixed!important;top:0px!important;left:0px!important;width:2px!important;height:2px!important;opacity:0!important;overflow:hidden!important;margin:0!important;display:block!important;visibility:visible!important}.i-amphtml-unresolved{position:relative;overflow:hidden!important}#i-amphtml-wrapper.i-amphtml-scroll-disabled,.i-amphtml-scroll-disabled{overflow-x:hidden!important;overflow-y:hidden!important}.i-amphtml-notbuilt{position:relative;overflow:hidden!important;color:transparent!important}.i-amphtml-notbuilt:not(.i-amphtml-layout-container)>*{display:none}.i-amphtml-ghost{visibility:hidden!important}[layout=nodisplay]:not(.i-amphtml-display){display:none!important}.i-amphtml-element>[placeholder]{display:block}.i-amphtml-element>[placeholder].amp-hidden,.i-amphtml-element>[placeholder].hidden{visibility:hidden}.i-amphtml-element:not(.amp-notsupported)>[fallback]{display:none}.i-amphtml-layout-size-defined>[fallback],.i-amphtml-layout-size-defined>[placeholder]{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:1}.i-amphtml-notbuilt>[placeholder]{display:block!important}.i-amphtml-hidden-by-media-query{display:none}.i-amphtml-element-error{background:red!important;color:#fff!important;position:relative!important}.i-amphtml-element-error:before{content:attr(error-message)}i-amp-scroll-container,i-amphtml-scroll-container{position:absolute;top:0;left:0;right:0;bottom:0;display:block}i-amp-scroll-container.amp-active,i-amphtml-scroll-container.amp-active{overflow:auto;-webkit-overflow-scrolling:touch}.i-amphtml-loading-container{display:block!important;z-index:1}.i-amphtml-notbuilt>.i-amphtml-loading-container{display:block!important}.i-amphtml-loading-container.amp-hidden{visibility:hidden}.i-amphtml-loader-line{position:absolute;top:0;left:0;right:0;height:1px;overflow:hidden!important;background-color:hsla(0,0%,59%,.2);display:block}.i-amphtml-loader-moving-line{display:block;position:absolute;width:100%;height:100%!important;background-color:hsla(0,0%,59%,.65);z-index:2}@-webkit-keyframes i-amphtml-loader-line-moving{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes i-amphtml-loader-line-moving{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.i-amphtml-loader-line.amp-active .i-amphtml-loader-moving-line{-webkit-animation:i-amphtml-loader-line-moving 4s ease infinite;animation:i-amphtml-loader-line-moving 4s ease infinite}.i-amphtml-loader{position:absolute;display:block;height:10px;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;white-space:nowrap}.i-amphtml-loader.amp-active .i-amphtml-loader-dot{-webkit-animation:i-amphtml-loader-dots 2s infinite;animation:i-amphtml-loader-dots 2s infinite}.i-amphtml-loader-dot{position:relative;display:inline-block;height:10px;width:10px;margin:2px;border-radius:100%;background-color:rgba(0,0,0,.3);box-shadow:2px 2px 2px 1px rgba(0,0,0,.2);will-change:transform}.i-amphtml-loader .i-amphtml-loader-dot:first-child{-webkit-animation-delay:0s;animation-delay:0s}.i-amphtml-loader .i-amphtml-loader-dot:nth-child(2){-webkit-animation-delay:.1s;animation-delay:.1s}.i-amphtml-loader .i-amphtml-loader-dot:nth-child(3){-webkit-animation-delay:.2s;animation-delay:.2s}@-webkit-keyframes i-amphtml-loader-dots{0%,to{-webkit-transform:scale(.7);transform:scale(.7);background-color:rgba(0,0,0,.3)}50%{-webkit-transform:scale(.8);transform:scale(.8);background-color:rgba(0,0,0,.5)}}@keyframes i-amphtml-loader-dots{0%,to{-webkit-transform:scale(.7);transform:scale(.7);background-color:rgba(0,0,0,.3)}50%{-webkit-transform:scale(.8);transform:scale(.8);background-color:rgba(0,0,0,.5)}}.i-amphtml-element>[overflow]{cursor:pointer;position:relative;z-index:2;visibility:hidden}.i-amphtml-element>[overflow].amp-visible{visibility:visible}template{display:none!important}.amp-border-box,.amp-border-box *,.amp-border-box :after,.amp-border-box :before{box-sizing:border-box}amp-pixel{display:none!important}amp-instagram{padding:64px 0px 0px!important;background-color:#fff}amp-analytics{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}amp-iframe iframe{box-sizing:border-box!important}[amp-access][amp-access-hide],amp-experiment,amp-live-list>[update],amp-share-tracking,form [submit-error],form [submit-success],form [submitting]{display:none}amp-fresh{visibility:hidden}.i-amphtml-jank-meter{position:fixed;background-color:rgba(232,72,95,.5);bottom:0;right:0;color:#fff;font-size:16px;z-index:1000;padding:5px}i-amp-video-mask,i-amphtml-video-mask{z-index:1}.amp-video-eq{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;bottom:7px;display:-webkit-box;display:-ms-flexbox;display:flex;height:12px;opacity:0.8;overflow:hidden;position:absolute;right:7px;width:20px;z-index:1}.amp-video-eq .amp-video-eq-col{-webkit-box-flex:1;-ms-flex:1;flex:1;height:100%;margin-right:1px;position:relative}.amp-video-eq .amp-video-eq-col div{-webkit-animation-name:amp-video-eq-animation;animation-name:amp-video-eq-animation;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate;background-color:#fafafa;height:100%;position:absolute;width:100%;will-change:transform;-webkit-animation-play-state:paused;animation-play-state:paused}.amp-video-eq[unpausable] .amp-video-eq-col div{-webkit-animation-name:none;animation-name:none}.amp-video-eq[unpausable].amp-video-eq-play .amp-video-eq-col div{-webkit-animation-name:amp-video-eq-animation;animation-name:amp-video-eq-animation}.amp-video-eq.amp-video-eq-play .amp-video-eq-col div{-webkit-animation-play-state:running;animation-play-state:running}.amp-video-eq-1-1{-webkit-animation-duration:0.3s;animation-duration:0.3s}.amp-video-eq-1-1,.amp-video-eq-1-2{-webkit-transform:translateY(60%);transform:translateY(60%)}.amp-video-eq-1-2{-webkit-animation-duration:0.45s;animation-duration:0.45s}.amp-video-eq-2-1{-webkit-animation-duration:0.5s;animation-duration:0.5s}.amp-video-eq-2-1,.amp-video-eq-2-2{-webkit-transform:translateY(30%);transform:translateY(30%)}.amp-video-eq-2-2{-webkit-animation-duration:0.4s;animation-duration:0.4s}.amp-video-eq-3-1{-webkit-animation-duration:0.3s;animation-duration:0.3s}.amp-video-eq-3-1,.amp-video-eq-3-2{-webkit-transform:translateY(70%);transform:translateY(70%)}.amp-video-eq-3-2{-webkit-animation-duration:0.35s;animation-duration:0.35s}.amp-video-eq-4-1{-webkit-animation-duration:0.4s;animation-duration:0.4s}.amp-video-eq-4-1,.amp-video-eq-4-2{-webkit-transform:translateY(50%);transform:translateY(50%)}.amp-video-eq-4-2{-webkit-animation-duration:0.25s;animation-duration:0.25s}@-webkit-keyframes amp-video-eq-animation{0%{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes amp-video-eq-animation{0%{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}.i-amphtml-dockable-video{padding:0px;margin:0px;-webkit-transition:background-color 1s;transition:background-color 1s}.i-amphtml-dockable-video>iframe.i-amphtml-dockable-video-minimizing,.i-amphtml-dockable-video>video.i-amphtml-dockable-video-minimizing{position:fixed;height:auto;overflow:hidden;z-index:16;will-change:transform;-webkit-transform:scale(0.6) translateX(20px) translateY(20px);transform:scale(0.6) translateX(20px) translateY(20px);border-radius:6px;box-shadow:0px 3px 9px 3px rgba(0,0,0,.1);-webkit-transition:box-shadow 1s,border-radius 1s;transition:box-shadow 1s,border-radius 1s;min-width:initial!important;min-height:initial!important;margin:initial!important}amp-accordion{display:block!important}amp-accordion>section{float:none!important}amp-accordion>section>*{float:none!important;display:block!important;overflow:hidden!important;position:relative!important}.i-amphtml-accordion-content,.i-amphtml-accordion-header,amp-accordion,amp-accordion>section{margin:0}.i-amphtml-accordion-header{cursor:pointer;background-color:#efefef;padding-right:20px;border:1px solid #dfdfdf}amp-accordion>section>:last-child{display:none!important}amp-accordion>section[expanded]>:last-child{display:block!important}
</style>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<title>Download draw.io</title>
<link rel="canonical" href="https://download.draw.io/">
<link rel="shortcut icon" href="https://www.draw.io/favicon.ico">
<meta name="description" content="Download draw.io ">
<style> @font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v13/v0SdcGFAl2aezM9Vq_aFTQ.ttf) format('truetype'); } /* Preserve some sanity */ .grid, .unit { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* Set up some rules to govern the grid */ .grid { display: block; clear: both; } .grid .unit { float: left; width: 100%; padding: 10px; } /* This ensures the outer gutters are equal to the (doubled) inner gutters. */ .grid .unit:first-child { padding-left: 20px; } .grid .unit:last-child { padding-right: 20px; } /* Nested grids already have padding though, so lets nuke it */ .unit .unit:first-child { padding-left: 0; } .unit .unit:last-child { padding-right: 0; } .unit .grid:first-child > .unit { padding-top: 0; } .unit .grid:last-child > .unit { padding-bottom: 0; } /* Let people nuke the gutters/padding completely in a couple of ways */ .no-gutters .unit, .unit.no-gutters { padding: 0; } /* Wrapping at a maximum width is optional */ .wrap .grid, .grid.wrap { max-width: 978px; margin: 0 auto; } /* Width classes also have shorthand versions numbered as fractions * For example: for a grid unit 1/3 (one third) of the parent width, * simply apply class="w-1-3" to the element. */ .grid .whole, .grid .w-1-1 { width: 100%; } .grid .half, .grid .w-1-2 { width: 50%; } .grid .one-third, .grid .w-1-3 { width: 33.3332%; } .grid .two-thirds, .grid .w-2-3 { width: 66.6665%; } .grid .one-quarter, .grid .w-1-4 { width: 25%; } .grid .three-quarters, .grid .w-3-4 { width: 75%; } .grid .one-fifth, .grid .w-1-5 { width: 20%; } .grid .two-fifths, .grid .w-2-5 { width: 40%; } .grid .three-fifths, .grid .w-3-5 { width: 60%; } .grid .four-fifths, .grid .w-4-5 { width: 80%; } .grid .golden-small, .grid .w-g-s { width: 38.2716%; } /* Golden section: smaller piece */ .grid .golden-large, .grid .w-g-l { width: 61.7283%; } /* Golden section: larger piece */ /* Clearfix after every .grid */ .grid:before, .grid:after { display: table; content: ""; line-height: 0; } .grid:after { clear: both; } /* Utility classes */ .align-center { text-align: center; } .align-left { text-align: left; } .align-right { text-align: right; } .pull-left { float: left; } .pull-right { float: right; } /* Responsive Stuff */ @media screen and (max-width: 568px) { /* Stack anything that isnt full-width on smaller screens */ .grid .unit { width: 100%; padding-left: 20px; padding-right: 20px; } .unit .grid .unit { padding-left: 0px; padding-right: 0px; } /* Sometimes, you just want to be different on small screens */ .center-on-mobiles { text-align: center; } .hide-on-mobiles { display: none; } } /* added by me */ @media screen and (min-width: 569px) { .hide-on-desktops { display: none; } .card-content{ padding: 10px 20px 20px; } } @media screen and (max-width: 568px) { .card-content{ padding: 7px 7px 5px; } } body{ font-family: 'Lato', sans-serif; font-size: 18px; } h1{ font-size: 3rem; } h2{ font-size: 2.5rem; } h3{ font-size: 1.5rem; } h4{ font-size: 1.4m; } h5{ font-size: 1.3rem; } h6{ font-size: 1.2rem; } h1, h2, h3, h4, h5, h6{ margin: 6px 0 6px; font-family: 'Lato', sans-serif; font-weight: 500; } a{ text-decoration: none; color: #db4646; cursor: pointer; } a:hover{ color: #b21c1c; } a:active{ color: #910b0b; } ul{ list-style-type:disc; padding-left:1rem; } ol{ list-style-type: decimal; padding-left:1rem; } li{ display: list-item; text-align: -webkit-match-parent; margin: 0; } .github-icon:hover, .github-icon:focus, .github-icon:active{ color: #85d063; } .twitter-icon:hover, .twitter-icon:focus, .twitter-icon:active{ color: #1da0f2; } .mail-icon:hover, .mail-icon:focus, .mail-icon:active{color: #db4646; } .rss-icon:hover, .rss-icon:focus, .rss-icon:active{color:#f49c52;} .btn{ border: none; border-radius: 2px; display: inline-block; height: 36px; line-height: 36px; padding: 0 0.6rem; cursor: pointer; transition: background-color .2s; vertical-align: middle; color: #343434; background-color: transparent; box-shadow: none; -webkit-tap-highlight-color: transparent; text-decoration: none; text-transform: uppercase; font-size: 15px; font-weight: 600; letter-spacing: .18rem; font-family:'Lato',sans-serif; margin: 0.4rem 0 0.4rem; } .github-icon, .twitter-icon, .mail-icon, .rss-icon{ padding: 0 1rem; } .btn i{ font-size: 17px; } .btn:focus, .btn:hover { background-color: rgba(0,0,0,0.1); } .btn:active { background-color: rgba(0, 0, 0, 0.2); } .btn.disabled, btn:disabled { background-color: transparent; color: #b3b3b3; cursor: default; } .card{ border: 1px solid lightgrey; border-radius: 5px; margin: 10px 0 10px; min-height: 175px; } .card-content{ margin: 0; min-height: calc(175px - 36px); } .card-action{ border-top: 1px solid lightgrey; background: #f7f7e6; margin: 0; padding: 5px 7px 7px; min-height: 36px; } .card-action .btn{ margin:0 } .card-content img{ max-width: 100%; } article p{ padding-left: 0.5rem; } .chip{ display: inline-block; height: 30px; text-transform: uppercase; font-size: 13px; font-weight: 600; letter-spacing: .18rem; font-family:'Lato',sans-serif; line-height: 30px; padding: 0 10px; border-radius: 15px; background-color: #f7f7e6; margin-bottom: 5px; margin-right: 5px; } .chip i{ font-size: 17px; } code, kbd{ background: #eaeaea; border-radius: 3px; line-height: 16.5px; font-family:monospace; font-size: 17px; padding: 2px 4px; } @font-face{font-family:"Ionicons";src:url("/assets/fonts/ionicons.ttf")format("truetype");font-weight:normal;font-style:normal} .ion-social-github:before{content:"\f233"} .ion-social-twitter:before{content:"\f243"} .ion-email:before{content:"\f132"} .ion-social-rss:before{content:"\f23d"} .ion-earth:before{content:"\f276"} .ion-social-github:before,.ion-earth:before,.ion-email:before,.ion-social-rss:before,.ion-social-twitter:before{display:inline-block;font-family:"Ionicons";speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;text-rendering:auto;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
</style>
<style> body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style> body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}
</style>
</noscript>
<script async="" src="download_files/v0.js">
</script>
</head>
<body class="wrap amp-mode-mouse" style="opacity: 1; visibility: visible; animation: 0s ease 0s normal none 1 running none;">
<div class="grid">
<nav>
<div id="/home" class="unit whole align-center">
<h1>
Download draw.io
</h1>
</div>
</nav>
<main>
<div class="unit whole" id="content">
<div class="grid">
<div class="unit one-third">
<div class="card align-left">
<div class="card-content">
<h3>
Windows
</h3>
<span>Download and run the .exe (self-updating)</span>
</div>
<div class="card-action">
<a href="https://github.com/jgraph/drawio-desktop/releases/download/v7.1.2/draw.io-setup-7.1.2.exe" class="btn"><i class="icon ion-earth"></i> Download (.exe)</a>
</div>
</div>
</div>
<div class="unit one-third">
<div class="card align-left">
<div class="card-content">
<h3>
Mac OS
</h3>
<span>Download and install the .dmg (self-updating)</span>
</div>
<div class="card-action">
<a href="https://github.com/jgraph/drawio-desktop/releases/download/v7.1.3/draw.io-7.1.3.dmg" class="btn"><i class="icon ion-earth"></i> Download (.dmg)</a>
</div>
</div>
</div>
<div class="unit one-third">
<div class="card align-left">
<div class="card-content">
<h3>
Linux (Debian/Ubuntu)
</h3>
<span>Download Debian installer</span>
</div>
<div class="card-action">
<a href="https://github.com/jgraph/drawio-desktop/releases/download/v7.1.3/draw.io-amd64-7.1.3.deb" class="btn"><i class="icon ion-earth"></i> Download (.deb)</a>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>