{"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<div class=\"wp-block-yoast-seo-table-of-contents yoast-table-of-contents collapsed\"><h2> Spis tre\u015bci <\/h2><ul><li><a href=\"#h-co-to-jest-draw-io\" data-level=\"2\">Co to jest Draw.io?\u00a0<\/a><\/li><li><a href=\"#h-instrukcja-tworzenia-diagram-w-w-draw-io\" data-level=\"2\">Instrukcja tworzenia diagram\u00f3w w Draw.io<\/a><ul><li><a href=\"#h-1-wybieramy-miejsce-zapisywania-diagramu\" data-level=\"3\">1. Wybieramy miejsce zapisywania diagramu<\/a><\/li><li><a href=\"#h-2-wst-pne-ustawienia-edytora-diagram-w\" data-level=\"3\">2. Wst\u0119pne ustawienia edytora diagram\u00f3w<\/a><\/li><li><a href=\"#h-3-obs-uga-interfejsu-draw-io-edycja-diagramu\" data-level=\"3\">3. Obs\u0142uga interfejsu Draw.io \u2013 edycja diagramu<\/a><\/li><\/ul><\/li><li><a href=\"#h-podsumowanie\" data-level=\"2\">Podsumowanie<\/a><\/li><\/ul><\/div>\n\n\n\n<p><span>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<!--more-->\n\n\n\n<p><span>Diagram to symboliczna reprezentacja informacji przy pomocy technik wizualnych.&nbsp;<\/span><span style=\"font-size: 1rem;\">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><span style=\"font-size: 1rem;\">worzenie diagram\u00f3w to jedna ze znanych mnemotechnik, czyli metod skutecznego zapami\u0119tywania.&nbsp;<\/span><\/p>\n\n\n\n<h2 id=\"h-co-to-jest-draw-io\"><b>Co to jest Draw.io?&nbsp;<\/b><\/h2>\n\n\n\n<p><span><a href=\"http:\/\/app.diagrams.net\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"ek-link\">Draw.io<\/a> (pos\u0142uguj\u0105ce si\u0119 te\u017c <\/span><a href=\"https:\/\/fotc.com\/pl\/blog\/domena-internetowa-wybor\/\" target=\"_blank\" rel=\"noopener nofollow noreferrer\" class=\"ek-link\"><span>domen\u0105 <\/span><\/a><span>diagrams.net) to <strong>bezp\u0142atna aplikacja do edycji diagram\u00f3w w przegl\u0105darce internetowej<\/strong>. Jest w pe\u0142ni zintegrowana z <strong><a href=\"https:\/\/fotc.com\/pl\/blog\/dysk-google-firmowe-pliki\/\" target=\"_blank\" aria-label=\"Dyskiem Google (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">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<div class=\"bg-blue banners mt-4 mb-4\">\r\n  <div class=\"container \">\r\n    <div class=\"row sw\">\r\n        <div class=\"col-md-7 sw col-12 mb-md-0\">\r\n        <span style=\"margin-bottom: 1rem;\r\n    font-weight: 500;margin-top: 25px;\r\n    line-height: 1.1;\r\n    font-size: 2rem; display: block; color:#fff\">Google Workspace to 2x wi\u0119cej miejsca na Dysku<\/span>\r\n        <\/div>\r\n        <div class=\"col-md-5 sw sww\">\r\n        <img style=\"margin-top:25px;\" src=\"\/app\/uploads\/2023\/02\/FOTC-LOGO-WWW-RGB-RED-2.png\">\r\n        <\/div>\r\n        <\/div>\r\n        <div class=\"row\">\r\n          <div class=\"col-md-7\"><p style=\"color:#fff\">FOTC to d\u0142u\u017csze testy, ta\u0144sze pakiety i wsparcie 24\/7.<\/p><\/div>\r\n        <div class=\"col-md-5 col-12 text-cent-right\">\r\n        <a class=\"newbtn bannerbtn\" href=\"https:\/\/fotc.com\/pl\/kontakt\/\">Wypr\u00f3buj za darmo<\/a>\r\n        \r\n        <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\n\n\n<h2 id=\"h-instrukcja-tworzenia-diagram-w-w-draw-io\"><b>Instrukcja tworzenia diagram\u00f3w w Draw.io<\/b><\/h2>\n\n\n\n<h3 id=\"h-1-wybieramy-miejsce-zapisywania-diagramu\"><span>1. Wybieramy miejsce zapisywania diagramu<\/span><\/h3>\n\n\n\n<p><span>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.&nbsp;<\/span><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/fotc.com\/app\/uploads\/2021\/08\/Capture1.png\" alt=\"wyb\u00f3r miejsca zapisu diagramu draw io\" class=\"wp-image-32651\"\/><\/figure><\/div>\n\n\n\n<p><span>Dost\u0119pne opcje to:&nbsp;<\/span><\/p>\n\n\n\n<ul><li><span>Google Drive<\/span><\/li><li><span>OneDrive<\/span><\/li><li><span>Device \u2013 po wybraniu tej opcji nasze diagramy b\u0119d\u0105 zapisywane lokalnie w pami\u0119ci komputera.&nbsp;<\/span><\/li><\/ul>\n\n\n\n<p><span>Je\u015bli wybieramy jedn\u0105 z opcji chmurowych (czyli Google Drive b\u0105d\u017a Microsoft OneDrive), to konieczne b\u0119dzie przeprowadzenie <strong>autoryzacji na odpowiednim koncie<\/strong>.&nbsp;<\/span><\/p>\n\n\n\n<p><span>Warto zaznaczy\u0107, \u017ce <strong>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 <a href=\"https:\/\/fotc.com\/pl\/google-workspace\/\">Google Workspace<\/a>. Zawiera konta Gmail z firmow\u0105 domen\u0105 i du\u017co wi\u0119ksz\u0105 (nawet nieograniczon\u0105) przestrze\u0144 w chmurze.&nbsp;<\/span><\/p>\n\n\n\n<p><span>Po wybraniu folderu docelowego klikamy <\/span><b>Create New Diagram<\/b><span>.<\/span><\/p>\n\n\n\n<h3 id=\"h-2-wst-pne-ustawienia-edytora-diagram-w\"><span>2. Wst\u0119pne ustawienia edytora diagram\u00f3w<\/span><\/h3>\n\n\n\n<p><span>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:&nbsp;<\/span><\/p>\n\n\n\n<ul><li><span>Plik XML z rozszerzeniem .drawio<\/span><\/li><li><span>Plik XML z rozszerzeniem .xml<\/span><\/li><li><span>Plik grafiki bitmapowej z mo\u017cliwo\u015bci\u0105 edycji (.png)<\/span><\/li><li><span>Plik grafiki wektorowej z mo\u017cliwo\u015bci\u0105 edycji (.svg)<\/span><\/li><li><span>Plik HTML do umieszczenia na stronie (.html)<\/span><\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/fotc.com\/app\/uploads\/2021\/08\/Capture2-1.png\" alt=\"Wyb\u00f3r szablonu diagramu draw io\" class=\"wp-image-32647\"\/><\/figure><\/div>\n\n\n\n<p><span>Nast\u0119pnym krokiem jest dob\u00f3r odpowiedniego szablonu. W 13 kategoriach tematycznych znajdziemy <\/span><b>a\u017c 140 propozycji gotowych szablon\u00f3w<\/b><span>. 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.&nbsp;<\/span><\/p>\n\n\n\n<h3 id=\"h-3-obs-uga-interfejsu-draw-io-edycja-diagramu\"><span>3. Obs\u0142uga interfejsu Draw.io \u2013 edycja diagramu<\/span><\/h3>\n\n\n\n<p><span><strong>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:&nbsp;<\/span><\/p>\n\n\n\n<ul><li><span><strong>File<\/strong> \u2013 opcje zwi\u0105zane z plikiem, czyli eksport, udost\u0119pnianie, wstawianie, etc.&nbsp;<\/span><\/li><li><span><strong>Edit<\/strong> \u2013 mo\u017cliwo\u015bci zwi\u0105zane z edycj\u0105 ustawie\u0144 styl\u00f3w, geometrii, link\u00f3w, wybranych obiekt\u00f3w czy danych.<\/span><\/li><li><span><strong>View<\/strong> \u2013 ustawienia widoku, gdzie mo\u017cemy wybra\u0107 narz\u0119dzia i elementy interfejsu, kt\u00f3re maj\u0105 by\u0107 na sta\u0142e widoczne w oknie aplikacji.<\/span><\/li><li><span><strong>Arrange<\/strong> \u2013 w tej zak\u0142adce mo\u017cemy ustala\u0107 kolejno\u015b\u0107 obiekt\u00f3w wykresu, przekszta\u0142ca\u0107 je czy grupowa\u0107.<\/span><\/li><li><span><strong>Extras<\/strong> \u2013 tutaj znajdziemy wszystkie zaawansowane opcje i mo\u017cliwo\u015b\u0107 instalacji specjalistycznych dodatk\u00f3w.<\/span><\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/fotc.com\/app\/uploads\/2021\/08\/Capture3-1.png\" alt=\"Pasek narz\u0119dzi diagramu draw io\" class=\"wp-image-32643\"\/><\/figure><\/div>\n\n\n\n<p><span>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><b>okno z histori\u0105 wszystkich zmian<\/b><span>.&nbsp;<\/span><\/p>\n\n\n\n<p><b>Pasek podstawowych narz\u0119dzi edycji diagramu<\/b><span> tu\u017c pod paskiem zak\u0142adek pozwala nam na:&nbsp;<\/span><\/p>\n\n\n\n<ul><li><span>Ustawienie widoku \u2013 wielko\u015b\u0107, szablon i przybli\u017cenie.<\/span><\/li><li><span>Cofanie i powtarzanie ostatnio wykonanej czynno\u015bci.<\/span><\/li><li><span>Usuwanie zaznaczonych element\u00f3w.<\/span><\/li><li><span>Przesuni\u0119cie zaznaczonego obiektu na wierzch lub pod sp\u00f3d wzgl\u0119dem innych.&nbsp;<\/span><\/li><li><span>Podstawowe zmiany wygl\u0105du zaznaczonego elementu.<\/span><\/li><li><span>\u0141\u0105czenie wybranych element\u00f3w.<\/span><\/li><li><span>Wstawianie dowolnego typu obiektu lub pola.<\/span><\/li><li><span>Tworzenie tabeli.<\/span><\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/fotc.com\/app\/uploads\/2021\/08\/Capture4.png\" alt=\"Pasek narz\u0119dzi do edycji diagramu draw io\" class=\"wp-image-32639\"\/><\/figure><\/div>\n\n\n\n<p><span><strong>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<figure class=\"wp-block-image\"><img src=\"https:\/\/fotc.com\/app\/uploads\/2021\/08\/Capture5.1-1024x542.png\" alt=\"narz\u0119dzia do wyszukiwania kszta\u0142t\u00f3w i obiekt\u00f3w draw io\" class=\"wp-image-32635\"\/><\/figure>\n\n\n\n<p><span>Wok\u00f3\u0142 pola z roboczego s\u0105 dwie kolumny. Lewa kolumna (widoczna na ilustracji powy\u017cej) zawiera <\/span><b>narz\u0119dzia do wyszukiwania kszta\u0142t\u00f3w i obiekt\u00f3w<\/b><span>. Obiekty mo\u017cemy umieszcza\u0107 na diagramie przy pomocy zwyk\u0142ego przeci\u0105gania i upuszczania w odpowiednim miejscu lewym przyciskiem myszy.&nbsp;<\/span><\/p>\n\n\n\n<p><span>Przy tworzeniu du\u017cych lub powtarzalnych wykres\u00f3w szczeg\u00f3lnie przydatne jest jedno z narz\u0119dzi w prawej kolumnie \u2013 <\/span><b>Scratchpad<\/b><span>. 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.&nbsp;<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/fotc.com\/app\/uploads\/2021\/08\/Capture6-1024x471.png\" alt=\"zaawansowane opcje elementu draw io\" class=\"wp-image-32631\"\/><\/figure>\n\n\n\n<p><span>W kolumnie znajduj\u0105cej si\u0119 po lewej stronie obszaru roboczego znajdziemy <strong>zaawansowane opcje zaznaczonego elementu<\/strong>.&nbsp;<\/span><\/p>\n\n\n\n<ul><li><span>Je\u015bli nie zaznaczymy \u017cadnego obiektu, to zaznaczony jest ca\u0142y obszar roboczy. W takiej sytuacji w lewej kolumnie zobaczymy opcje dostosowywania ca\u0142ego diagramu.&nbsp;<\/span><\/li><li><span>Po wybraniu obiektu zobaczymy kolumn\u0119 z trzema zak\u0142adkami:&nbsp;<\/span>\n<ul>\n<li><span><strong>Text<\/strong> \u2013 znajdziemy tu wszystkie opcje formatowania, uk\u0142ad\u00f3w i font\u00f3w.&nbsp;<\/span><\/li>\n<li><span><strong>Style<\/strong> \u2013 umo\u017cliwia edycj\u0119 obramowania i wype\u0142nienia kszta\u0142t\u00f3w. Raz stworzony styl mo\u017cemy zapisa\u0107 i u\u017cywa\u0107 ponownie.&nbsp;<\/span><\/li>\n<li><span><strong>Arrange<\/strong> \u2013 w tej zak\u0142adce mo\u017cemy zmienia\u0107 rozmiar i pozycj\u0119 element\u00f3w diagramu.&nbsp;<\/span><\/li>\n<\/ul>\n<\/li><\/ul>\n\n\n\n<p><span>Ostatni wa\u017cny element interfejsu, to dolny pasek, kt\u00f3ry umo\u017cliwia <strong>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.&nbsp;<\/span><\/p>\n\n\n\n<h2 id=\"h-podsumowanie\"><b>Podsumowanie<\/b><\/h2>\n\n\n\n<p><span>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 <a href=\"https:\/\/fotc.com\/pl\/google-workspace\/\">Google Workspace<\/a>.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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":"<!-- This site is optimized with the Yoast SEO Premium plugin v16.7 (Yoast SEO v19.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Draw.io \u2013 diagram online krok po kroku - FOTC<\/title>\n<meta name=\"description\" content=\"Diagram to symboliczna reprezentacja informacji przy pomocy technik wizualnych. Przedstawiamy instrukcj\u0119 obs\u0142ugi bezp\u0142atnej przegl\u0105darkowej aplikacji \u2013 Draw.io\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fotc.com\/pl\/blog\/drawio-diagram-online-instrukcja\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Draw.io \u2013 diagram online krok po kroku\" \/>\n<meta property=\"og:description\" content=\"Diagram to symboliczna reprezentacja informacji przy pomocy technik wizualnych. Przedstawiamy instrukcj\u0119 obs\u0142ugi bezp\u0142atnej przegl\u0105darkowej aplikacji \u2013 Draw.io\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fotc.com\/pl\/blog\/drawio-diagram-online-instrukcja\/\" \/>\n<meta property=\"og:site_name\" content=\"FOTC\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-25T08:24:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-17T13:44:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/fotc.com\/app\/uploads\/2020\/12\/BLOG_GW_Drawio-diagramy-online-instrukcja_PL.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Agata Koptewicz\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fotc.com\/pl\/blog\/drawio-diagram-online-instrukcja\/\",\"url\":\"https:\/\/fotc.com\/pl\/blog\/drawio-diagram-online-instrukcja\/\",\"name\":\"Draw.io \u2013 diagram online krok po kroku - FOTC\",\"isPartOf\":{\"@id\":\"https:\/\/fotc.com\/#website\"},\"datePublished\":\"2020-06-25T08:24:12+00:00\",\"dateModified\":\"2023-10-17T13:44:33+00:00\",\"author\":{\"@id\":\"https:\/\/fotc.com\/#\/schema\/person\/03dfc51e82408d6ffb682d5c4facf95a\"},\"description\":\"Diagram to symboliczna reprezentacja informacji przy pomocy technik wizualnych. Przedstawiamy instrukcj\u0119 obs\u0142ugi bezp\u0142atnej przegl\u0105darkowej aplikacji \u2013 Draw.io\",\"breadcrumb\":{\"@id\":\"https:\/\/fotc.com\/pl\/blog\/drawio-diagram-online-instrukcja\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fotc.com\/pl\/blog\/drawio-diagram-online-instrukcja\/\"]}],\"accessibilityFeature\":[\"tableOfContents\"]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fotc.com\/pl\/blog\/drawio-diagram-online-instrukcja\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"PL\",\"item\":\"https:\/\/fotc.com\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Google Workspace\",\"item\":\"https:\/\/fotc.com\/pl\/blog\/category\/google-workspace-pl\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Draw.io \u2013 diagram online krok po kroku\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fotc.com\/#website\",\"url\":\"https:\/\/fotc.com\/\",\"name\":\"FOTC\",\"description\":\"Partner Google Cloud\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fotc.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/fotc.com\/#\/schema\/person\/03dfc51e82408d6ffb682d5c4facf95a\",\"name\":\"Agata Koptewicz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/fotc.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/59437c23b14a31cf4f472ba347613a64?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/59437c23b14a31cf4f472ba347613a64?s=96&d=mm&r=g\",\"caption\":\"Agata Koptewicz\"},\"description\":\"Content manager at FOTC since 2019. For the past 7 years, she has been involved in copywriting, creative writing, and content development for gaming, technology, and eCommerce companies. She is passionate about designing strategies for effective communication.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/agata-koptewicz-c0pywriter\/\"],\"knowsLanguage\":[\"Polish\",\"English\"],\"jobTitle\":\"Content Manager\",\"worksFor\":\"FOTC\",\"url\":\"https:\/\/fotc.com\/pl\/blog\/author\/agata-koptewicz\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Draw.io \u2013 diagram online krok po kroku - FOTC","description":"Diagram to symboliczna reprezentacja informacji przy pomocy technik wizualnych. Przedstawiamy instrukcj\u0119 obs\u0142ugi bezp\u0142atnej przegl\u0105darkowej aplikacji \u2013 Draw.io","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fotc.com\/pl\/blog\/drawio-diagram-online-instrukcja\/","og_locale":"pl_PL","og_type":"article","og_title":"Draw.io \u2013 diagram online krok po kroku","og_description":"Diagram to symboliczna reprezentacja informacji przy pomocy technik wizualnych. Przedstawiamy instrukcj\u0119 obs\u0142ugi bezp\u0142atnej przegl\u0105darkowej aplikacji \u2013 Draw.io","og_url":"https:\/\/fotc.com\/pl\/blog\/drawio-diagram-online-instrukcja\/","og_site_name":"FOTC","article_published_time":"2020-06-25T08:24:12+00:00","article_modified_time":"2023-10-17T13:44:33+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/fotc.com\/app\/uploads\/2020\/12\/BLOG_GW_Drawio-diagramy-online-instrukcja_PL.png","type":"image\/png"}],"author":"Agata Koptewicz","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/fotc.com\/pl\/blog\/drawio-diagram-online-instrukcja\/","url":"https:\/\/fotc.com\/pl\/blog\/drawio-diagram-online-instrukcja\/","name":"Draw.io \u2013 diagram online krok po kroku - FOTC","isPartOf":{"@id":"https:\/\/fotc.com\/#website"},"datePublished":"2020-06-25T08:24:12+00:00","dateModified":"2023-10-17T13:44:33+00:00","author":{"@id":"https:\/\/fotc.com\/#\/schema\/person\/03dfc51e82408d6ffb682d5c4facf95a"},"description":"Diagram to symboliczna reprezentacja informacji przy pomocy technik wizualnych. Przedstawiamy instrukcj\u0119 obs\u0142ugi bezp\u0142atnej przegl\u0105darkowej aplikacji \u2013 Draw.io","breadcrumb":{"@id":"https:\/\/fotc.com\/pl\/blog\/drawio-diagram-online-instrukcja\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fotc.com\/pl\/blog\/drawio-diagram-online-instrukcja\/"]}],"accessibilityFeature":["tableOfContents"]},{"@type":"BreadcrumbList","@id":"https:\/\/fotc.com\/pl\/blog\/drawio-diagram-online-instrukcja\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"PL","item":"https:\/\/fotc.com\/pl\/"},{"@type":"ListItem","position":2,"name":"Google Workspace","item":"https:\/\/fotc.com\/pl\/blog\/category\/google-workspace-pl\/"},{"@type":"ListItem","position":3,"name":"Draw.io \u2013 diagram online krok po kroku"}]},{"@type":"WebSite","@id":"https:\/\/fotc.com\/#website","url":"https:\/\/fotc.com\/","name":"FOTC","description":"Partner Google Cloud","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fotc.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pl-PL"},{"@type":"Person","@id":"https:\/\/fotc.com\/#\/schema\/person\/03dfc51e82408d6ffb682d5c4facf95a","name":"Agata Koptewicz","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/fotc.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/59437c23b14a31cf4f472ba347613a64?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/59437c23b14a31cf4f472ba347613a64?s=96&d=mm&r=g","caption":"Agata Koptewicz"},"description":"Content manager at FOTC since 2019. For the past 7 years, she has been involved in copywriting, creative writing, and content development for gaming, technology, and eCommerce companies. She is passionate about designing strategies for effective communication.","sameAs":["https:\/\/www.linkedin.com\/in\/agata-koptewicz-c0pywriter\/"],"knowsLanguage":["Polish","English"],"jobTitle":"Content Manager","worksFor":"FOTC","url":"https:\/\/fotc.com\/pl\/blog\/author\/agata-koptewicz\/"}]}},"_links":{"self":[{"href":"https:\/\/fotc.com\/pl\/wp-json\/wp\/v2\/posts\/31212"}],"collection":[{"href":"https:\/\/fotc.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fotc.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fotc.com\/pl\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/fotc.com\/pl\/wp-json\/wp\/v2\/comments?post=31212"}],"version-history":[{"count":0,"href":"https:\/\/fotc.com\/pl\/wp-json\/wp\/v2\/posts\/31212\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fotc.com\/pl\/wp-json\/wp\/v2\/media\/74479"}],"wp:attachment":[{"href":"https:\/\/fotc.com\/pl\/wp-json\/wp\/v2\/media?parent=31212"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fotc.com\/pl\/wp-json\/wp\/v2\/categories?post=31212"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fotc.com\/pl\/wp-json\/wp\/v2\/tags?post=31212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}