draw.io docker image that is always up-to-date with draw.io releases
draw.io export server image which allow exporting draw.io diagrams to pdf and images
docker-compose to run draw.io with the export server
docker-compose to run draw.io integrated within nextcloud
docker-compose to run draw.io with PlantUML support
docker-compose to run draw.io self-contained without any dependency on draw.io website (with the export server, plantUml, Google Drive support, OneDrive support, and EMF conversion support (for VSDX export)
HTTPS SSL Certificate via Let's Encrypt
Prerequisites:
A Linux machine connected to the Internet with ports 443 and 80 open
A domain/subdomain name pointing to this machine's IP address. (e.g., drawio.example.com)
Method:
Using jgraph/drawio docker image, run the following command docker run -it -m1g -e LETS_ENCRYPT_ENABLED=true -e PUBLIC_DNS=drawio.example.com --rm --name="draw" -p 80:80 -p 443:8443 jgraph/drawio Notice that mapping port 80 to container's port 80 allows certbot to work in stand-alone mode. Mapping port 443 to container's port 8443 allows the container tomcat to serve https requests directly.
Changing draw.io configuration
Method 1 (Build you custom image with setting pre-loaded)
Edit PreConfig.js & PostConfig.js files (next to Dockerfile in debian or alpine folders)
draw.iois an online diagramming web site that delivers the source in this project.
draw.io uses the mxGraph library as the base of the stack, with the GraphEditor example from mxGraph as the base of the application part. The mxGraph library build used is stored under /etc/mxgraph/mxClient.js.
License
draw.io is licensed under the GPL v3.
Development
A development guide is being started on the GitHub project wiki. There is a draw.io tag on Stack Overflow currently, please make sure any questions adhere to their guidelines for question.
draw.io supports IE 9+, Chrome 30+, Firefox 31+, Safari versions actively patched by Apple (6.2.x, 7.1.x, 8.0.x and 9.x at time of writing), Opera 20+, Native Android browser 5.x+, the default browser in the current and previous major iOS versions (e.g. 9.x and 8.x) and Edge 20+
Menambah Ukuran Partisi LVM di Ubuntu Server. Ketika saya melakukan instalasi Ubuntu Server dengan mode guided partitioning with LVM, ternyata ukuran partisi sistemnya nya hanya sekitar seperempat dari total kapasitas hardisk yang tersedia. Nah, di artikel ini saya akan sharing bagaimana cara menambah ukuran partisi di sistem, yang dalam kasus ini saya akan menggunakan seluruh sisa kapasitas yang belum terpakai.
Jika kalian tidak mengubah pengaturan default saat instalasi, nama logical group dan logical volumenya harusnya sama dengan screenshot diatas.
Untuk meresize partisi LVM di Ubuntu Server jalankan perintah
Kali ini saya hadir dengan 2 versi, yaitu web dan youtube dan saya membuat judul ini sesuai dengan request sobat – sobat di email saya jadi jika ada yang mau request apa saja bisa email ya, saya list kan dulu ke daftar tutor yang akan dibuat.
Saya berbagi pengalaman saya biasanya saja, jika ada terdapat kesalahan kalian bisa komentar nanti saya akan revisi karena kita masih sama – sama belajar juga hehe
Mungkin masih pada bingung kalau di PHP biasa langsung deh ganti di html ke php untuk memanggil template – template nya, tetapi di Laravel lumayan berbeda. Kita harus menaruh file pendukung dari template tersebut dulu ke dalam folder publicnya Laravel misal nya JS dan CSS nya si template.
Okay cara ini bisa untuk kalian gunakan di semua versi Laravel 5++ (sekarang saya pakai Laravel 5.7) dan semua template juga, untuk list template yang sudah saya coba :
Setelah itu, Copy File yang diperlukan oleh template nya
Disini yang diperlukan yaitu bower_components dan folder dist
Taroh di folder public laravel boleh langsung paste atau buat foder baru lagi
Kalau saya buat folder baru lagi dengan nama adminlte
Buka file index.html si template tersebut , karena disini terdapat beberapa bagian jadi kita pisah aja biar lebih mudah custom nya nanti sob (pengalaman loh ini). Jadi bagian – bagian nya yaitu :
Header
Sidebar
Content
Footer
Biar enak aja nanti kalau ngerjain nya, ubah khusus sidebar ya di layout sidebar aja, ubah header ya di layout header. Coba aja nanti kalian akan merasakan nya kalau kerja bikin program tiap hari sob hehe
Okay lanjuut, saya pecah dulu ini bagian dari header.blade.php
<headerclass="main-header"><!-- Logo --><ahref="index2.html"class="logo"><!-- mini logo for sidebar mini 50x50 pixels --><spanclass="logo-mini"><b>A</b>LT</span><!-- logo for regular state and mobile devices --><spanclass="logo-lg"><b>GILACODING</b></span></a><!-- Header Navbar: style can be found in header.less --><navclass="navbar navbar-static-top"><!-- Sidebar toggle button--><ahref="#"class="sidebar-toggle"data-toggle="push-menu"role="button"><spanclass="sr-only">Toggle navigation</span></a><divclass="navbar-custom-menu"><ulclass="nav navbar-nav"><!-- User Account: style can be found in dropdown.less --><liclass="dropdown user user-menu"><ahref="#"class="dropdown-toggle"data-toggle="dropdown"><imgsrc="{{url('adminlte/dist/img/user2-160x160.jpg')}}"class="user-image"alt="User Image"><spanclass="hidden-xs">Alexander Pierce</span></a><ulclass="dropdown-menu"><!-- User image --><liclass="user-header"><imgsrc="dist/img/user2-160x160.jpg"class="img-circle"alt="User Image"><p>
Alexander Pierce - Web Developer
<small>Member since Nov. 2012</small></p></li><!-- Menu Body --><liclass="user-body"><divclass="row"><divclass="col-xs-4 text-center"><ahref="#">Followers</a></div><divclass="col-xs-4 text-center"><ahref="#">Sales</a></div><divclass="col-xs-4 text-center"><ahref="#">Friends</a></div></div><!-- /.row --></li><!-- Menu Footer--><liclass="user-footer"><divclass="pull-left"><ahref="#"class="btn btn-default btn-flat">Profile</a></div><divclass="pull-right"><ahref="#"class="btn btn-default btn-flat">Sign out</a></div></li></ul></li></ul></div></nav></header>
Simpan di Resources > View > layouts (ini folder baru) beri nama header.blade.php
Bagian sidebar.blade.php
<asideclass="main-sidebar"><!-- sidebar: style can be found in sidebar.less --><sectionclass="sidebar"><!-- Sidebar user panel --><divclass="user-panel"><divclass="pull-left image"><imgsrc="{{url('adminlte/dist/img/user2-160x160.jpg')}}"class="img-circle"alt="User Image"></div><divclass="pull-left info"><p>Gilacoding</p><ahref="#"><iclass="fa fa-circle text-success"></i> Online</a></div></div><!-- search form --><formaction="#"method="get"class="sidebar-form"><divclass="input-group"><inputtype="text"name="q"class="form-control"placeholder="Search..."><spanclass="input-group-btn"><buttontype="submit"name="search"id="search-btn"class="btn btn-flat"><iclass="fa fa-search"></i></button></span></div></form><!-- /.search form --><!-- sidebar menu: : style can be found in sidebar.less --><ulclass="sidebar-menu"data-widget="tree"><liclass="header">MAIN NAVIGATION</li><liclass="active treeview"><ahref="#"><iclass="fa fa-dashboard"></i><span>Dashboard</span><spanclass="pull-right-container"><iclass="fa fa-angle-left pull-right"></i></span></a><ulclass="treeview-menu"><liclass="active"><ahref="index.html"><iclass="fa fa-circle-o"></i> Dashboard v1</a></li><li><ahref="index2.html"><iclass="fa fa-circle-o"></i> Dashboard v2</a></li></ul></li><liclass="treeview"><ahref="#"><iclass="fa fa-files-o"></i><span>Layout Options</span><spanclass="pull-right-container"><spanclass="label label-primary pull-right">4</span></span></a><ulclass="treeview-menu"><li><ahref="pages/layout/top-nav.html"><iclass="fa fa-circle-o"></i> Top Navigation</a></li><li><ahref="pages/layout/boxed.html"><iclass="fa fa-circle-o"></i> Boxed</a></li><li><ahref="pages/layout/fixed.html"><iclass="fa fa-circle-o"></i> Fixed</a></li><li><ahref="pages/layout/collapsed-sidebar.html"><iclass="fa fa-circle-o"></i> Collapsed Sidebar</a></li></ul></li></ul></section><!-- /.sidebar --></aside>
<!DOCTYPE html><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title>AdminLTE 2| Dashboard</title><!-- Tell the browser to be responsive to screen width --><metacontent="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"name="viewport"><!-- Bootstrap 3.3.7 --><linkrel="stylesheet"href="{{url('adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css')}}"><!-- Font Awesome --><linkrel="stylesheet"href="{{url('adminlte/bower_components/font-awesome/css/font-awesome.min.css')}}"><!-- Ionicons --><linkrel="stylesheet"href="{{url('adminlte/bower_components/Ionicons/css/ionicons.min.css')}}"><!-- Theme style --><linkrel="stylesheet"href="{{url('adminlte/dist/css/AdminLTE.min.css')}}"><!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load.--><linkrel="stylesheet"href="{{url('adminlte/dist/css/skins/_all-skins.min.css')}}"><!-- Morris chart --><linkrel="stylesheet"href="{{url('adminlte/bower_components/morris.js/morris.css')}}"><!-- jvectormap --><linkrel="stylesheet"href="{{url('adminlte/bower_components/jvectormap/jquery-jvectormap.css')}}"><!-- Date Picker --><linkrel="stylesheet"href="{{url('adminlte/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css')}}"><!-- Daterange picker --><linkrel="stylesheet"href="{{url('adminlte/bower_components/bootstrap-daterangepicker/daterangepicker.css')}}"><!-- bootstrap wysihtml5 - text editor --><linkrel="stylesheet"href="{{url('adminlte/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css')}}"><!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[ifltIE9]><scriptsrc="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script><scriptsrc="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
@section('css')
@show
<!-- Google Font --><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic"></head><bodyclass="hold-transition skin-blue sidebar-mini"><divclass="wrapper">
@include('layouts.header')
@include('layouts.sidebar')<divclass="content-wrapper">
@yield('content')</div>
@include('layouts.footer')</div><!-- ./wrapper --><!-- jQuery 3 --><scriptsrc="{{url('adminlte/bower_components/jquery/dist/jquery.min.js')}}"></script><!-- jQuery UI 1.11.4 --><scriptsrc="{{url('adminlte/bower_components/jquery-ui/jquery-ui.min.js')}}"></script><!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip --><script>
$.widget.bridge('uibutton', $.ui.button);</script><!-- Bootstrap 3.3.7 --><scriptsrc="{{url('adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js')}}"></script><!-- Morris.js charts --><scriptsrc="{{url('adminlte/bower_components/raphael/raphael.min.js')}}"></script><scriptsrc="{{url('adminlte/bower_components/morris.js/morris.min.js')}}"></script><!-- Sparkline --><scriptsrc="{{url('adminlte/bower_components/jquery-sparkline/dist/jquery.sparkline.min.js')}}"></script><!-- jvectormap --><scriptsrc="{{url('adminlte/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js')}}"></script><scriptsrc="{{url('adminlte/plugins/jvectormap/jquery-jvectormap-world-mill-en.js')}}"></script><!-- jQuery Knob Chart --><scriptsrc="{{url('adminlte/bower_components/jquery-knob/dist/jquery.knob.min.js')}}"></script><!-- daterangepicker --><scriptsrc="{{url('adminlte/bower_components/moment/min/moment.min.js')}}"></script><scriptsrc="{{url('adminlte/bower_components/bootstrap-daterangepicker/daterangepicker.js')}}"></script><!-- datepicker --><scriptsrc="{{url('adminlte/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js')}}"></script><!-- Bootstrap WYSIHTML5 --><scriptsrc="{{url('adminlte/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js')}}"></script><!-- Slimscroll --><scriptsrc="{{url('adminlte/bower_components/jquery-slimscroll/jquery.slimscroll.min.js')}}"></script><!-- FastClick --><scriptsrc="{{url('adminlte/bower_components/fastclick/lib/fastclick.js')}}"></script><!-- AdminLTE App --><scriptsrc="{{url('adminlte/dist/js/adminlte.min.js')}}"></script><!-- AdminLTE dashboard demo (This is only for demo purposes) --><scriptsrc="{{url('adminlte/dist/js/pages/dashboard.js')}}"></script><!-- AdminLTE for demo purposes --><scriptsrc="{{url('adminlte/dist/js/demo.js')}}"></script>
@section('js')
@show
</body></html>
Kalian simpan ditempat yang sama dan beri nama app.blade.php
Untuk masalah @section, @yield dsb.. saya sudah jelaskan ya ditutorial sebelum nya
Pada app.blade.php , jangan lupa untuk mengganti url nya sob dengan {{url(‘isi dari css dan js’)}} lengkap nya kalian bisa lihat pada video ya yang saya maksud. Berfungsi juga untuk pemanggilan gambar ya
Lalu kita buat 1 contoh sebagai blank page, beri nama dashboard.blade.php , isi nya hanya seperti ini :
jadi ini merupakan isi konten sob, kalian hanya perlu rubah isi dari dashboard.blade.php saja untuk membuat view – view lainnya.
Baiklah sekian tutorial yang berdasarkan pengalaman saya, sekali lagi jika terdapat kesalahan baik text dan penyebutan bisa kalian komen dibawah
Demi kemajuan web dan youtube gilacoding, mohon untuk subscribe dan bagikan ke teman – teman kalian sob. Agar saya bisa konsisten untuk upload tutorial sesuai dengan request kalian.
Untuk yang mau download langsung bisa di github saya, dan video nya bisa kalian lihat disini :
