Kako napraviti dijagram toka onlajn – Korak po korak

Dijagram toka pretvara proces, stablo odlučivanja ili sistem u vizuelni dijagram koji svako može pratiti. Ovaj vodič pokazuje kako da napravite dijagram za nekoliko minuta koristeći Diagram.RS – besplatan alat za dijagrame toka u pretraživaču pokretan Mermaid-om. Nije potreban nalog, nije potrebna instalacija.

Korak 1 – Izaberite smer

Počnite Mermaid kod sa graph TD za dijagram toka od vrha ka dnu, ili graph LR za raspored s leva na desno. TD odgovara visokim procesima, LR bolje funkcioniše za široke radne tokove.

graph TD

graph TD = od vrha ka dnu, graph LR = s leva na desno

Korak 2 – Dodajte čvorove

Svaki čvor je ID praćen oznakom u uglastim zagradama. ID se koristi za referisanje čvora u vezama; oznaka je ono što se prikazuje u dijagramu.

graph TD
    A[Početak]
    B[Obrada podataka]
    C[Kraj]

Tri čvora sa ID-ovima A, B, C

Korak 3 – Povežite čvorove strelicama

Koristite --> da nacrtate strelicu od jednog čvora do drugog. Možete dodati oznaku bilo kojoj strelici stavljajući tekst između vertikalnih crta.

graph TD
    A[Početak] --> B[Obrada podataka]
    B --> C{Uspešno?}
    C -->|Da| D[Gotovo]
    C -->|Ne| E[Ponovi]
    E --> B

Strelice sa dijamantom odlučivanja i označenim granama

Korak 4 – Koristite prave oblike čvorova

Mermaid podržava nekoliko oblika za prenošenje značenja:

[Oznaka] – pravougaonik (korak procesa)

{Oznaka} – dijamant (odlučivanje / da-ne grana)

(Oznaka) – zaobljeni pravougaonik (početak ili kraj)

[(Oznaka)] – cilindar (baza podataka ili skladište)

((Oznaka)) – krug (tačka veze)

graph TD
    A(Početak) --> B[Validiraj unos]
    B --> C{Validno?}
    C -->|Da| D[(Sačuvaj u DB)]
    C -->|Ne| E[Prikaži grešku]
    D --> F(Kraj)

Kompletan dijagram toka sa različitim oblicima čvorova

Izvezite dijagram toka

Kada dijagram izgleda dobro, kliknite Preuzmi SVG za oštru vektorsku sliku pogodnu za ugrađivanje, ili Preuzmi PNG za rastersku sliku za prezentacije ili wiki.

Možete i da kopirate link za deljenje – kod dijagrama je enkodiran u URL-u, tako da svako ko klikne link vidi isti dijagram bez potrebe za nalogom.

Saveti za dijagrame toka

Kratke oznake – jedan red po čvoru čini dijagram čitljivijim.

Koristite subgraph blokove za grupisanje srodnih koraka kada dijagram postane velik.

Počnite sa srećnim putem (normalnim tokom), zatim dodajte grane za greške.

Dosledan smer (uvek TD ili uvek LR) sprečava zbunjujuće rasporede.

Kako napraviti dijagram toka onlajn – korak po korak