{"id":573,"date":"2022-02-02T07:14:01","date_gmt":"2022-02-02T06:14:01","guid":{"rendered":"https:\/\/informatik.slotshaven.it\/wordpress\/?page_id=573"},"modified":"2026-02-24T12:44:13","modified_gmt":"2026-02-24T11:44:13","slug":"strukturdiagram-med-draw-io","status":"publish","type":"page","link":"https:\/\/informatik.slotshaven.it\/wordpress\/strukturdiagram-med-draw-io\/","title":{"rendered":"Strukturdiagram med draw.io"},"content":{"rendered":"\n

Et vigtigt v\u00e6rkt\u00f8j, n\u00e5r man skal planl\u00e6gge et website – fx i SO1\/SO2 – er strukturdiagrammet<\/strong>. Det er vigtigt at holde sig for \u00f8je, at det er et v\u00e6rkt\u00f8j, ikke et m\u00e5l i sig selv: Det skal bruges til at skaffe sig overblik over et site under udvikling, p\u00e5 et tidligt stadie i udviklingsprocessen<\/strong>.<\/p>\n\n\n\n

Strukturdiagrammet er en plan <\/strong>over hvilke sider, der indg\u00e5r i websitet, og hvordan de h\u00e6nger sammen i navigationen. Det vil sige, at diagrammet skal omfatte samtlige offentlige sider p\u00e5 sitet, som skal vises i det hierarki, som de udg\u00f8r i menuen og anden navigation. Det bliver dermed en slags “disposition” for sitet.<\/p>\n\n\n\n

Draw.io<\/a> <\/strong>er et online v\u00e6rkt\u00f8j til at lave alleh\u00e5nde diagrammer i – eksempelvis strukturdiagrammer. Desuden kan man eksportere og downloade diagrammerne som grafiske filer, fx .PNG eller .JPG. Draw.io integrerer med blandt andet Google Drev (men er – forel\u00f8big – ikke ejet af Google). Man kan s\u00e5ledes gemme og dele sine diagrammer derfra, og man kan s\u00e5dan set ogs\u00e5 arbejde sammen p\u00e5 det samme diagram, lige som i Google Docs. OneDrive virker ogs\u00e5 – og det har I jo med jeres skole-Office365-licens. <\/p>\n\n\n\n

\"\"<\/a><\/figure>
\n
\"\"<\/figure>\n<\/div><\/div>\n\n\n\n

Her ser du forsiden p\u00e5 dette site, og det tilh\u00f8rende strukturdiagram. Sidefodsmenuen ligger under sk\u00e6rmbilledet, i bunden af siden.<\/p>\n\n\n\n

Draw.io er ret hurtigt at bruge, n\u00e5r man lige l\u00e6rer nogle f\u00e5, ret intuitive tricks. Vigtigst er, at n\u00e5r man holder musen hen over en boks, s\u00e5 f\u00e5r man vist nogle pile ud fra de “ledige” sider af boksen, og ved at bruge dem kan man meget hurtigt oprette nye bokse og fobindelser.<\/p>\n\n\n\n

At gemme og eksportere sine diagrammer<\/h2>\n\n\n\n

Man arbejder i browseren, og browsere er ikke gode at gemme i. Derfor knytter man som regel et online lager til. Google Drev er en god mulighed – is\u00e6r hvis man bruger Chrome browseren. Ellers er Microsoft OneDrive ofte nemt at tilknytte. I har alle sammen et OneDrive som en del af den Office-pakke, skolen stiller til r\u00e5dighed for jer.<\/p>\n\n\n\n

For at eksportere et billede<\/strong> af diagrammet g\u00e5r man ind under punktet “Fil” i menuen, og v\u00e6lger “Eksporter som…”. Det billedformat, der er bedst til form\u00e5let, hedder PNG, og det smarteste n\u00e5r man skal l\u00e6gge billedet videre ind i WordPress, er at gemme det i “Download”, s\u00e5 ligger det p\u00e5 ens egen computer og kan findes nemt.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Hvis man har mod p\u00e5 at g\u00f8re det lidt avanceret, kan man eventuelt ogs\u00e5 linke direkte til et diagram p\u00e5 en webside, s\u00e5ledes at det altid er opdateret.<\/p>\n","protected":false},"excerpt":{"rendered":"

Et vigtigt v\u00e6rkt\u00f8j, n\u00e5r man skal planl\u00e6gge et website – fx i SO1\/SO2 – er strukturdiagrammet. Det er vigtigt at holde sig for \u00f8je, at det er et v\u00e6rkt\u00f8j, ikke et m\u00e5l i sig selv: Det skal bruges til at skaffe sig overblik over et site under udvikling, p\u00e5 et tidligt stadie i udviklingsprocessen. Strukturdiagrammet… L\u00e6s mere Strukturdiagram med draw.io<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-573","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/informatik.slotshaven.it\/wordpress\/wp-json\/wp\/v2\/pages\/573","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/informatik.slotshaven.it\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/informatik.slotshaven.it\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/informatik.slotshaven.it\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/informatik.slotshaven.it\/wordpress\/wp-json\/wp\/v2\/comments?post=573"}],"version-history":[{"count":21,"href":"https:\/\/informatik.slotshaven.it\/wordpress\/wp-json\/wp\/v2\/pages\/573\/revisions"}],"predecessor-version":[{"id":910,"href":"https:\/\/informatik.slotshaven.it\/wordpress\/wp-json\/wp\/v2\/pages\/573\/revisions\/910"}],"wp:attachment":[{"href":"https:\/\/informatik.slotshaven.it\/wordpress\/wp-json\/wp\/v2\/media?parent=573"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}