{"id":31212,"date":"2020-06-25T10:24:12","date_gmt":"2020-06-25T08:24:12","guid":{"rendered":"https:\/\/fotc.com\/drawio-diagram-online-instrukcja\/"},"modified":"2023-10-17T15:44:33","modified_gmt":"2023-10-17T13:44:33","slug":"drawio-diagram-online-instrukcja","status":"publish","type":"post","link":"https:\/\/fotc.com\/pl\/blog\/drawio-diagram-online-instrukcja\/","title":{"rendered":"Draw.io \u2013 diagram online krok po kroku"},"content":{"rendered":"\n
Tworzenie diagram\u00f3w to znana metoda nauki i szybkiego przekazywania z\u0142o\u017conych informacji. Teraz do zrobienia profesjonalnego diagramu wystarczy tylko komputer z internetem. Przedstawiamy instrukcj\u0119 obs\u0142ugi bezp\u0142atnej przegl\u0105darkowej aplikacji \u2013 Draw.io<\/span><\/p>\n\n\n\n\n\n\n\n Diagram to symboliczna reprezentacja informacji przy pomocy technik wizualnych. <\/span>Przy pomocy kilku strategicznie rozplanowanych strza\u0142ek i blok\u00f3w z tekstem mo\u017cna \u0142atwo zrozumie\u0107, a nast\u0119pnie przekaza\u0107 innym znaczenie skomplikowanych zagadnie\u0144. Dlatego t<\/span>worzenie diagram\u00f3w to jedna ze znanych mnemotechnik, czyli metod skutecznego zapami\u0119tywania. <\/span><\/p>\n\n\n\n Draw.io<\/a> (pos\u0142uguj\u0105ce si\u0119 te\u017c <\/span>domen\u0105 <\/span><\/a>diagrams.net) to bezp\u0142atna aplikacja do edycji diagram\u00f3w w przegl\u0105darce internetowej<\/strong>. Jest w pe\u0142ni zintegrowana z Dyskiem Google<\/a><\/strong>, dlatego umo\u017cliwia automatyczne zapisywanie wynik\u00f3w pracy w chmurowej przestrzeni konta Google Workspace lub Gmail.\u00a0<\/span><\/p>\n\n\n FOTC to d\u0142u\u017csze testy, ta\u0144sze pakiety i wsparcie 24\/7.<\/p><\/div>\r\n W edytorze diagram\u00f3w Draw.io nie musimy si\u0119 rejestrowa\u0107 \u2013 jest to oprogramowanie dost\u0119pne dla wszystkich za po\u015brednictwem przegl\u0105darki internetowej. Gdy wchodzimy na stron\u0119 aplikacji, to wita nas pierwsze okno dialogowe, w kt\u00f3rym mo\u017cemy wybra\u0107 miejsce zapisywania wynik\u00f3w naszej pracy. <\/span><\/p>\n\n\n\n Dost\u0119pne opcje to: <\/span><\/p>\n\n\n\n Je\u015bli wybieramy jedn\u0105 z opcji chmurowych (czyli Google Drive b\u0105d\u017a Microsoft OneDrive), to konieczne b\u0119dzie przeprowadzenie autoryzacji na odpowiednim koncie<\/strong>. <\/span><\/p>\n\n\n\n Warto zaznaczy\u0107, \u017ce us\u0142uga Google Drive dla os\u00f3b prywatnych jest bezp\u0142atna i dost\u0119pna dla ka\u017cdego<\/strong>, kto ma konto Google. Wielu u\u017cytkownik\u00f3w Gmaila nie zdaje sobie sprawy z tego, \u017ce dysponuj\u0105 zestawem aplikacji biurowych i chmurowym dyskiem o pojemno\u015bci 15 GB. Dla organizacji Google przygotowa\u0142o specjaln\u0105 us\u0142ug\u0119 o nazwie Google Workspace<\/a>. Zawiera konta Gmail z firmow\u0105 domen\u0105 i du\u017co wi\u0119ksz\u0105 (nawet nieograniczon\u0105) przestrze\u0144 w chmurze. <\/span><\/p>\n\n\n\n Po wybraniu folderu docelowego klikamy <\/span>Create New Diagram<\/b>.<\/span><\/p>\n\n\n\n W kolejnym oknie mamy mo\u017cliwo\u015b\u0107 ustawienia podstawowych parametr\u00f3w diagramu. Na pocz\u0105tek wpisujemy nazw\u0119 pliku i wybieramy format. Mamy do dyspozycji nast\u0119puj\u0105ce opcje: <\/span><\/p>\n\n\n\n Nast\u0119pnym krokiem jest dob\u00f3r odpowiedniego szablonu. W 13 kategoriach tematycznych znajdziemy <\/span>a\u017c 140 propozycji gotowych szablon\u00f3w<\/b>. Mo\u017cemy na ich podstawie stworzy\u0107 tabele, mapy my\u015bli, chmurki Venna czy specjalistyczne schematy. Wyb\u00f3r dobrze dopasowanego szablonu jest bardzo istotny, bo mo\u017ce zaoszcz\u0119dzi\u0107 nam mn\u00f3stwo pracy. Zach\u0119camy wi\u0119c do dok\u0142adnego przejrzenia wszystkich kategorii. <\/span><\/p>\n\n\n\n Edytor diagram\u00f3w Draw.io \u0142udz\u0105co przypomina edytory plik\u00f3w Google.<\/strong> G\u00f3rny pasek zak\u0142adek zawiera spis wszystkich funkcji w sze\u015bciu kategoriach: <\/span><\/p>\n\n\n\n Je\u015bli nie wy\u0142\u0105czymy funkcji autosave (jest domy\u015blnie w\u0142\u0105czona), to obok paska zak\u0142adek znajdziemy informacj\u0119 o tym, kiedy wprowadzono ostatnie zmiany w diagramie. Klikaj\u0105c ten komunikat, wywo\u0142amy <\/span>okno z histori\u0105 wszystkich zmian<\/b>. <\/span><\/p>\n\n\n\n Pasek podstawowych narz\u0119dzi edycji diagramu<\/b> tu\u017c pod paskiem zak\u0142adek pozwala nam na: <\/span><\/p>\n\n\n\n Pole robocze w Draw.io to interaktywna tablica do tworzenia diagramu.<\/strong> Mo\u017cemy na niej przy pomocy myszki zaznaczy\u0107 dowolny element lub grup\u0119 element\u00f3w, zmieni\u0107 ich po\u0142o\u017cenie czy rozmiar.<\/span><\/p>\n\n\n\n Wok\u00f3\u0142 pola z roboczego s\u0105 dwie kolumny. Lewa kolumna (widoczna na ilustracji powy\u017cej) zawiera <\/span>narz\u0119dzia do wyszukiwania kszta\u0142t\u00f3w i obiekt\u00f3w<\/b>. Obiekty mo\u017cemy umieszcza\u0107 na diagramie przy pomocy zwyk\u0142ego przeci\u0105gania i upuszczania w odpowiednim miejscu lewym przyciskiem myszy. <\/span><\/p>\n\n\n\n Przy tworzeniu du\u017cych lub powtarzalnych wykres\u00f3w szczeg\u00f3lnie przydatne jest jedno z narz\u0119dzi w prawej kolumnie \u2013 <\/span>Scratchpad<\/b>. Mo\u017cemy zapisa\u0107 w nim obiekty, kt\u00f3re chcemy wykorzysta\u0107 ponownie. Przeci\u0119gamy obiekt do scratchpadu, a nast\u0119pnie mo\u017cemy go wielokrotnie wyci\u0105ga\u0107, gdy tylko jest potrzebny. Taka operacja oszcz\u0119dza mn\u00f3stwo czasu na formatowaniu powtarzalnych element\u00f3w. <\/span><\/p>\n\n\n\n W kolumnie znajduj\u0105cej si\u0119 po lewej stronie obszaru roboczego znajdziemy zaawansowane opcje zaznaczonego elementu<\/strong>. <\/span><\/p>\n\n\n\n Ostatni wa\u017cny element interfejsu, to dolny pasek, kt\u00f3ry umo\u017cliwia tworzenie dodatkowych diagram\u00f3w w jednym pliku<\/strong> \u2013 podobnie jak w Arkuszach Google. Mo\u017cemy stworzy\u0107 kilka wariant\u00f3w jednego diagramu lub kontynuacj\u0119 diagramu, kt\u00f3ry nie zmie\u015bci\u0142 si\u0119 w pierwszym polu roboczym. <\/span><\/p>\n\n\n\n Draw.io to jedna z tych bezp\u0142atnych aplikacji, o kt\u00f3rych zawsze dowiadujemy si\u0119 za p\u00f3\u017ano \u2013 i \u017ca\u0142ujemy, \u017ce nie mog\u0142a pom\u00f3c nam we wcze\u015bniejszych projektach. Mamy nadziej\u0119, \u017ce dzi\u0119ki tej kr\u00f3tkiej instrukcji jak najwi\u0119cej os\u00f3b dowie si\u0119 o tym wygodnym edytorze diagram\u00f3w, kt\u00f3ry doskonale wsp\u00f3\u0142gra z Google Workspace<\/a>.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":" Tworzenie diagram\u00f3w to znana metoda nauki i szybkiego przekazywania z\u0142o\u017conych informacji. Teraz do zrobienia profesjonalnego diagramu wystarczy tylko komputer z internetem. Przedstawiamy instrukcj\u0119 obs\u0142ugi bezp\u0142atnej przegl\u0105darkowej aplikacji \u2013 Draw.io<\/p>\n","protected":false},"author":10,"featured_media":74479,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":4,"_editorskit_typography_data":[],"_editorskit_blocks_typography":"","_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}"},"categories":[563],"tags":[141,147,139],"yoast_head":"\nCo to jest Draw.io? <\/b><\/h2>\n\n\n\n
\r\n <\/div>\r\n <\/div>\r\n
Instrukcja tworzenia diagram\u00f3w w Draw.io<\/b><\/h2>\n\n\n\n
1. Wybieramy miejsce zapisywania diagramu<\/span><\/h3>\n\n\n\n
<\/figure><\/div>\n\n\n\n
2. Wst\u0119pne ustawienia edytora diagram\u00f3w<\/span><\/h3>\n\n\n\n
<\/figure><\/div>\n\n\n\n
3. Obs\u0142uga interfejsu Draw.io \u2013 edycja diagramu<\/span><\/h3>\n\n\n\n
<\/figure><\/div>\n\n\n\n
<\/figure><\/div>\n\n\n\n
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
\n
Podsumowanie<\/b><\/h2>\n\n\n\n