Editor vývojových diagramov: tvary, šípky a popisy Áno/Nie priamo v prehliadači.

Diagram sa kreslí vo vašom prehliadači a nikam sa neodosiela.

Čo editor dokáže

Symboly podľa normy ISO 5807, šípky, ktoré samy obchádzajú tvary a lepia sa na ich strany, a popisy Áno/Nie pri výstupoch podmienky. Tlačidlo „+“ vloží ďalší tvar hneď prepojený a „Usporiadať“ rozloží celý diagram. Diagram sa počas práce ukladá v prehliadači a stiahnuť ho môžete ako PNG, SVG, PDF alebo kód Mermaid.

Príklady: Párne alebo nepárne Najväčšie z troch Súčet od 1 do N Kontrola hesla

Ako vložiť vývojový diagram do Wordu alebo Google Docs

  • Word 2019 a Microsoft 365: SVG. Vložte ho ako bežný obrázok a diagram zostane ostrý pri každom priblížení.
  • Google Docs a staršie verzie Wordu: PNG s 300 dpi. Zvoľte šírku „A4, predvolené okraje Wordu“ alebo „US Letter“ a obrázok zaberie presne šírku textu.
  • LaTeX: PDF podľa veľkosti diagramu, ktoré \includegraphics vloží bez straty ostrosti.
  • Najrýchlejšie: „Kopírovať obrázok“ v okne „Stiahnuť“ a potom Ctrl+V priamo do dokumentu.

V súboroch PNG a SVG stiahnutých tu je vložený samotný diagram: pretiahnite taký súbor späť na hárok a pokračujte v úpravách.

Symboly vývojového diagramu a ich význam

Názvy sú rovnaké ako v paneli tvarov. Prvých päť sa objavuje takmer v každej školskej úlohe, ostatné sa hodia pre diagramy podľa ISO 5807.

Tvar Názov Kedy ho použiť
Začiatok / koniec Začiatok a koniec algoritmu, vstup a výstup podprogramu.
Činnosť Výpočet alebo akákoľvek činnosť: priradenie, počítanie, príkaz.
Podmienka Overenie podmienky: kosoštvorec má dva výstupy, Áno a Nie.
Vstup / výstup Vstup a výstup údajov, keď na médiu nezáleží.
Podprogram Volanie podprogramu alebo funkcie opísanej osobitne.
Príprava Príprava cyklu: počiatočné hodnoty ako i = 1.
Začiatok cyklu Horná hranica cyklu; jej pár je Koniec cyklu s rovnakým názvom.
Koniec cyklu Dolná hranica cyklu; podmienka ukončenia sa píše do jednej z hraníc.
Spojka Prerušenie čiary: šípka pokračuje pri spojke s rovnakou značkou.
Spojka medzi stranami Prechod na inú stranu. Používa sa v učebniciach; ISO 5807 má len bežnú spojku.
Komentár Poznámka k tvaru, spojená s ním prerušovanou čiarou.
Ručný vstup Údaje zadané ručne, napríklad z klávesnice.
Ručná operácia Činnosť, ktorú vykonáva človek.
Dokument Údaje na papieri: výtlačok, formulár, správa.
Displej Údaje zobrazené na obrazovke.
Uložené údaje Uložené údaje, keď na médiu nezáleží.
Vnútorná pamäť Údaje v operačnej pamäti.
Pamäť so sekvenčným prístupom Údaje na médiu, ktoré sa číta postupne, napríklad na páske.
Pamäť s priamym prístupom Údaje na médiu s priamym prístupom, napríklad na disku.
Diernoštítok Údaje na dierovanom štítku.
Dierna páska Údaje na dierovanej páske.
Paralelné činnosti Začiatok alebo koniec činností, ktoré prebiehajú súčasne.
Vynechanie Časť diagramu, ktorá sa nekreslí celá.

Vývojové diagramy podľa ISO 5807

Štýl „ISO 5807“ v paneli dáva tvarom proporcie podľa normy: výška a, šírka 1,5a, a od 15 do 30 mm, text od 10 do 14 pt, hroty šípok len proti smeru toku alebo na všetkých čiarach. V tomto štýle tvary s textom nerastú: ak sa text nezmestí, ozve sa tip.

Ikona tipov ukáže, kde sa diagram odchyľuje od normy: podmienka s menej ako dvoma výstupmi, výstup bez popisu, tvar bez vstupu alebo výstupu, chýba začiatok alebo koniec.

Diagram z kódu Mermaid

Požiadajte chatbota, aby nakreslil vývojový diagram v kóde Mermaid, a vložte celú odpoveď, aj s textom okolo kódu, tlačidlom „Vložiť kód“ alebo cez Ctrl+V priamo na hárok. Tvary, šípky a popisy sa prenesú a rozloženie sa urobí samo. Opačným smerom funguje „Kopírovať kód Mermaid“ v okne „Stiahnuť“.

Klávesnica

  • Enter — upraviť text tvaru
  • Ctrl + Enter — dokončiť text a vložiť ďalší tvar
  • Ctrl + ←↑→↓ — prepojený tvar týmto smerom
  • ←↑→↓ — posunúť výber
  • Shift + ←↑→↓ — posunúť väčším krokom
  • Ctrl + Z, Ctrl + Shift + Z — späť a znova
  • Ctrl + D — duplikovať
  • Delete — odstrániť
  • Space + ťahanie — posúvať hárok
  • Ctrl + koliesko myši — priblíženie

Samotný algoritmus si overíte v kóde v pieskovisku Pythonu.

Často kladené otázky

Je tam vodoznak?

Nie. PNG, SVG a PDF sa sťahujú čisté, bez vodoznaku a bez registrácie.

Kde sa ukladajú moje diagramy?

Len vo vašom prehliadači, na server sa nič neposiela. Prehliadač môže vymazať údaje stránky, keď chýba miesto alebo keď sa stránka dlho neotvorila, preto si dôležité diagramy stiahnite ako súbor: „Stiahnuť súbor diagramu“ v okne „Stiahnuť“ alebo v „Mojich diagramoch“.

Funguje to na mobile?

Áno. Tvar sa posúva prstom, hárok ťahaním po prázdnom mieste a približuje sa dvoma prstami. Dvojité ťuknutie otvorí úpravu textu, dlhé podržanie ponuku akcií a tvary sú v paneli dole.

Ako urobiť vývojový diagram podľa ISO 5807?

Zvoľte štýl „ISO 5807“, nastavte veľkosť a a písmo a diagram skontrolujte pomocou tipov. Na seminárnu alebo záverečnú prácu si stiahnite PNG s 300 dpi alebo SVG.

Prečo sa text v PDF nedá označiť?

V PDF sú písmená nakreslené ako obrysy, takže diagram vyzerá rovnako na každom počítači, aj bez našich písiem. Ak potrebujete text, ktorý sa dá označiť, stiahnite SVG so zapnutým „Ponechať text ako text“.

V akých jazykoch môžem písať do tvarov?

V každom jazyku stránky, aj sprava doľava a čínskymi a japonskými znakmi: písma Noto sa načítajú podľa vášho textu. Urdčina sa píše písmom naskh, nie nastaliq, pretože písmo nastaliq má viac ako megabajt. Emoji a znaky iných písiem vyjdú v PNG systémovým písmom a v PDF chýbajú; okno „Stiahnuť“ vás upozorní.

Aký veľký môže byť diagram?

Nie je tu žiadny limit. Diagram s 200 tvarmi a 300 šípkami sa hýbe plynulo aj na pomalom mobile: počas ťahania sa šípky kreslia ako jednoduché zlomy a presná trasa vznikne, keď tvar pustíte.

Je to zadarmo?

Áno, úplne zadarmo a bez registrácie. Nástroj beží celý vo vašom prehliadači: súbor nikdy neodchádza na server, takže server nespotrebuje ani procesor, ani dáta — niet za čo pýtať peniaze. Žiadne vodoznaky, žiadne obmedzenia veľkosti ani počtu súborov.