Diagrams.net (predtým draw.io) je multiplatformový softvér na kreslenie grafov vyvinutý v HTML5 a JavaScripte. Jeho rozhranie možno použiť na vytváranie diagramov, ako sú vývojové diagramy, elektro schémy, diagramy UML, organizačné diagramy, či sieťové diagramy a pod. Časti jeho zdrojového kódu sú poskytované pod open-source licenciou Apache 2.
Obsah
Predstavenie
Diagrams.net je k dispozícii bezplatne ako online webová aplikácia a ako offline desktopová aplikácia pre Linux, macOS a Windows. Jeho offline aplikácia je vytvorená pomocou rámca Electron. Webová aplikácia nevyžaduje online prihlásenie ani registráciu a môže sa otvoriť a uložiť na lokálny pevný disk. Podporované formáty ukladania a exportu na stiahnutie zahŕňajú PNG, JPEG, SVG a PDF.
Tiež sa integruje s cloudovými službami pre ukladanie dát vrátane Dropbox, OneDrive, Google Drive, GitHub a GitLab.com. Je k dispozícii aj ako plugin na vloženie webovej aplikácie do platforiem ako NextCloud, MediaWiki, Notion, Atlassian Confluence a Jira.
Predchádzajúce 3 odseky sú prebrané a preložené (google translátorom) z Wikipedie. Ďalší veľmi pekný a obsiahly článok je zverejnený na portály root.cz.
Nerád by som sa v blogu opakoval ako Draw.io funguje ako sa používa, čo všetko je možné pomocou aplikácie vytvoriť atď. Okrem dvoch linkov, ktoré som Vám poskytol je spústa ďalších tutoriálov, návodov, tak skutočne nemá význam riešiť tieto problémy.
Ako už bolo spomenuté v predošlých odsekoch, tak aplikácia Draw.io funguje tiež ako webová online aplikácia a preto sa dá použiť na akomkoľvek zariadení, ktoré používa webový prehliadač (iným spôsobom som ju ani nepoužíval). Avšak kreslenie na mobilných zariadeniach (smartfónoch) nie je veľmi praktické, preto odporúčam kresliť min. na NTB, ideálne na PC s väčším monitorom (v tomto prípade platí „čím väčší tým lepší„).
Ja osobne som zástancom online webových aplikácii. Už niekoľko rokov používam na ukladanie súborov projekt známy pod názvom Nextcloud Hub. Ak si v mojom blogu vyhľadáte kľúčove slovo Nextcloud, tak sa dozviete, čo všetko som ohľadom Nexcloud riešil. Dosť často (aj keď osobne to využívam len zriedka) som riešil online office pod názvom Collabora (čo je bezplatná alternatíva k office 365).
Aj keď nie som programátor, resp. vývojár, ale občas potrebujem nakresliť nejaký jednoduchý projekt (skôr sa jedná o elektro projekt). Predtým keď som nevedel nič o Draw.io, tak veľmi dávno som používal ako laik AutoCAD (to bolo skôr na VŠ). Neskôr som prešiel na neplatenú ver. Draftsight (pre nekomerčné účely bol zdarma). Keď Draftsight prešiel čisto na platenú ver. tak som zase hľadal niečo iné. Moje trápenie pokračovalo v LibreCAD, FreeCAD a pod. Avšak tieto programy neboli určene pre online prístup, ale ako desktop. aplikácie.
Draw.io resp app.diagrams poznám asi 1-2 roky a na moje 2D kreslenie je to ideálna aplikácia. Dôležité pre mňa je, že môžem pracovať online, cez webový prehliadač. Aplikáciu je možné okrem iného integrovať ako modul do Nextcloud, stačí stiahnuť modul draw.io (pokiaľ sa nemýlim, tak nie je potrebné ani nič nastavovať) a môžeme kresliť.
Online veci sú fajn a väčšinou sú založené na architektúre server/klient. Dnes môžeme server nazvať moderným slovom Cloud. Ak to vezmem veľmi zjednodušene a dovolím si to prirovnať k autám, tak server/cloud môžeme nazvať ako motor, následne cez webový prehliadač (volant, plyn, brzda, spojka) ten motor riadime (čiže sme vodiči).
Ďalšia dôležitá vec, ktorú každému odporúčam a ak je to možné, hosťujte si aplikácie sami (self-hosting) a nenechávajte to na tretiu stranu. Napr. online office Collabora, správca hesiel VaultWarden, IP kamery a tak isto aj draw.io je možne spravovať na vlastnom cloude. Ak máme nainštalovaný v Nextcloud Hub modul draw.io, tak ono sa to zdá, že kreslíme na vlastnom servery, ale nie je to tak a ako backend je nám podstrčené draw.io plátno (viď nastavenie draw.io a URL).
Inštalujeme draw.io v dockery
Poďme si teda Draw.io nainštalovať na vlastný server. Existuje viac možností ako to spraviť, ale v dnešnej dobe je veľmi moderný a populárny Docker. V mojom blogu som už dávnejšie písal ako sa inštaluje Docker, resp. Portainer (čo je akýsi webový správca docker kontejnerov). To znamená, že predpokladom je mať nainštalovaný docker. Ak sme ešte nenainštalovali Portainer, tak to spravime. Prihlásime sa cez web do Portainera a v hlavnom okne klikneme na ikonu local. V ľavom menu prejdeme na Containers a + Add Container. Následne to nastavíme podľa obrázku.
V mojom prípade som použil mapovanie portov 8080 na 8080, to znamená, že do URL zadávam IP adresu servera, kde beží draw.io docker, vrátane portu, čiže ak docker beží napr. na IP adrese 192.168.1.109, tak draw.io bude fungovať na:
http://192.168.1.109:8080Teraz by nám mal draw.io bez problémov bežať. Zámerne som použil port 8080, ktorý je určený pre http (nie https), pretože ja riešim Let’s Encrypt wildcard certifikáty na reverznom proxy servery nginx. Ak chceme riešiť certifikát už v dockery, tak použijeme port 8443. Nie som si na 100% istý, ale ak budeme integrovať vlastný draw.io server do Nextcloud hub a nepoužijeme v zabezpečený protokol https pre draw.io, tak to nebude fungovať.
Prikladám sem nejaké jednoduché projekty, ktoré som kreslil v draw.io cez Nextcloud hub.
Záver
Aj keď draw.io nie je prioritne určený pre kreslenie elektrických schém, ale v časti shapes máme na výber aj z množstva elektronických súčiastok ako sú napr. rezistory, diódy, cievky, tranzistory atď. Samozrejme v scratchpad si vieme vytvoriť knižnicu s vlastnými modulmi, resp. komponentami, ktoré často používame. Vrelo odporúčam používať draw.io ako online aplikáciu. Ak neriešime v diagramoch vlastné know how, tak nie je nutnosť inštalovať to na vlastný server. Pokojne môžeme použiť integráciu do Nextcloud hub (dokonca som to testoval aj s pluginom v dokuwiki). Jednoducho sa dá kresliť úplne bezplatne (bez registrácie a prihlásenia) na oficiálnom webe draw.io.