Blok-sxema va diagramma vositalari: algoritmni chizish

Qisqacha: Blok-sxema (flowchart) — algoritmni shakllar va strelkalar bilan chizish. Oval — boshlanish va tugash, to'rtburchak — amal, romb — shart, parallelogramm — kiritish va chiqarish. Chizmada algoritmdagi teshiklar darhol ko'rinadi. Uni qog'ozda, draw.io, Excalidraw yoki matn bilan Mermaid'da chizish mumkin.

Bu darsda

• Blok-sxemaning to'rtta asosiy shaklini va ularning ma'nosini bilasiz.
• Ketma-ketlik, shart va takrorni blok-sxemada chiza olasiz.
• Tayyor blok-sxemani barmoq bilan "yurib" o'qiy olasiz.
• Mermaid'da matn bilan blok-sxema yoza olasiz.
• draw.io, Excalidraw va Mermaid'dan qaysi birini qachon tanlashni bilasiz.

Oldin bilishingiz kerak: Pseudokod va uch g'isht, Markdown: dasturchi yozuv tili — Mermaid bo'limi.

1. Nega bu kerak?

Oldingi darsda algoritmni pseudokodda yozdik. Pseudokod qisqa algoritm uchun qulay. Lekin shartlar ko'payib, bir-birining ichiga kirsa, matnda adashib qolish oson.

Masalan, bankomat algoritmida shunday savollar bor: PIN noto'g'ri bo'lsa nima bo'ladi? Uch marta noto'g'ri bo'lsa-chi? Pul yetmasa-chi? Matnda bu yo'llardan biri unutilib qolishi mumkin. Chizmada esa hech qayerga olib bormaydigan strelka darhol ko'zga tashlanadi.

Hayotda ham shunday chizmalar bor. Metro sxemasi, evakuatsiya rejasi, mebel yig'ish yo'riqnomasidagi rasmlar. Odam rasmni matndan tezroq tushunadi.

Blok-sxema (flowchart) — algoritmni shakllar va strelkalar bilan chizish usuli. Har bir shakl — bitta qadam, strelka — keyin qayerga borish.

2. Blok-sxema shakllari

2.1 To'rtta asosiy shakl

Butun dunyo muhandislari bir-birining chizmasini tushunishi uchun shakllar kelishib olingan. Ular ISO 5807 degan xalqaro standartda yozilgan.

Beshinchi element — strelka. U qaysi qadamdan keyin qaysi biri kelishini ko'rsatadi.

2.2 Birinchi blok-sxema: ketma-ketlik

Pseudokod darsidagi choyxona chekini eslang: narx va sonni olib, ko'paytirib, natijani chiqargan edik. Uning blok-sxemasi:

flowchart TD
    A([Boshlash]) --> B[/Narx va sonni kiriting/]
    B --> C[jami = narx * soni]
    C --> D[/jami ni chiqaring/]
    D --> E([Tugash])

Qanday o'qiladi? Barmog'ingizni "Boshlash" ga qo'ying va strelka bo'ylab yuring. Har bir shaklda to'xtab, ichidagi ishni bajaring. "Tugash" ga yetsangiz — algoritm tugadi.

E'tibor bering: kiritish va chiqarish qiya shaklda, hisoblash esa oddiy to'rtburchakda. Shaklga bir qarab, qadam turini bilasiz.

Tekshirib ko'ring: Qaysi shakl kerak? a) "Yoshingizni kiriting". b) "chegirma = narx * 10 / 100". c) "Hisobda pul bormi?"

3. Shart: romb

3.1 Rombdan ikki yo'l chiqadi

Romb — blok-sxemaning eng muhim shakli. Uning ichida savol yoziladi, undan esa ikkita strelka chiqadi: "Ha" va "Yo'q". Parol tekshirish:

flowchart TD
    A([Boshlash]) --> B[/Parolni kiriting/]
    B --> C{Parol to'g'rimi?}
    C -- Ha --> D[/Profilni ko'rsating/]
    C -- Yo'q --> E[/Xato parol deb chiqaring/]
    D --> F([Tugash])
    E --> F

Ikki qoida bor:

1. Rombdan kamida ikkita strelka chiqadi. Bitta strelka bo'lsa, tanlov yo'q — demak romb kerak emas.
2. Har bir strelkaga yozuv qo'yiladi: "Ha" yoki "Yo'q". Aks holda qaysi yo'l qachon tanlanishi noma'lum.

3.2 Yo'llar yana qo'shiladi

Parol misolida ikki yo'l ham oxirida bitta "Tugash" ga keladi. Bu — pseudokoddagi AGAR ... AKS HOLDA blokining tugashi. Shartdan keyin algoritm yana bitta yo'l bilan davom etadi.

4. Takror: orqaga qaytgan strelka

4.1 Takror qanday chiziladi?

Blok-sxemada takror uchun alohida shakl yo'q. U orqaga qaytgan strelka bilan chiziladi. Pseudokod darsidagi Jasurni eslang: u telefon uchun har oy 500 000 so'm yig'ayotgan edi.

flowchart TD
    A([Boshlash]) --> B[yigilgan = 0, oylar = 0]
    B --> C{yigilgan < 3000000?}
    C -- Ha --> D[yigilgan = yigilgan + 500000]
    D --> E[oylar = oylar + 1]
    E --> C
    C -- Yo'q --> F[/oylar ni chiqaring/]
    F --> G([Tugash])

E dan C ga qaytgan strelka — takrorning o'zi. Romb har aylanishda savol beradi. Javob "Ha" bo'lsa — yana aylanamiz, "Yo'q" bo'lsa — takrordan chiqamiz.

4.2 Takrorni barmoq bilan o'qish

Barmoq bilan yuring va har aylanishda yigilgan ni yozib boring: 0 → 500 000 → 1 000 000 → ... → 3 000 000. Oltinchi aylanishdan keyin romb "Yo'q" deydi. Natija: 6 oy — pseudokod bilan bir xil.

Chizmaga qarab bir narsani darhol tekshirish mumkin: orqaga qaytgan halqa ichida shartni o'zgartiradigan qadam bormi? Bu yerda bor — yigilgan oshyapti. Bo'lmasa, halqa abadiy aylanardi.

Tekshirib ko'ring: Blok-sxemada "Yo'q" strelkasi takrordan chiqaradi. Pseudokodning qaysi kalit so'zi shu rombga mos keladi?

5. Hammasi birga

5.1 To'liq yechilgan misol: bankomatda uch urinish

Bankomat PIN-kodni uch marta so'raydi. Uchala urinish ham noto'g'ri bo'lsa, karta bloklanadi.

flowchart TD
    A([Boshlash]) --> B[urinish = 1]
    B --> C[/PIN-kodni kiriting/]
    C --> D{PIN to'g'rimi?}
    D -- Ha --> E[/Menyuni ko'rsating/]
    D -- Yo'q --> F{urinish < 3?}
    F -- Ha --> G[urinish = urinish + 1]
    G --> C
    F -- Yo'q --> H[/Karta bloklandi/]
    E --> Z([Tugash])
    H --> Z

Bitta chizmada uchala g'isht bor: qadamlar ketma-ket, ikki romb — shart, G dan C ga qaytish — takror.

Ikki vaziyatni barmoq bilan yuramiz.

1-vaziyat. Malika birinchi urinishda xato qildi, ikkinchisida to'g'ri kiritdi:

1. urinish = 1. PIN noto'g'ri → "Yo'q".
2. 1 < 3? Ha → urinish = 2 → PIN yana so'raladi.
3. PIN to'g'ri → "Ha" → menyu → Tugash.

2-vaziyat. Uch marta xato:

1. urinish = 1, xato → 1 < 3 ha → urinish = 2.
2. Xato → 2 < 3 ha → urinish = 3.
3. Xato → 3 < 3? Yo'q → "Karta bloklandi" → Tugash.

PIN rostdan uch marta so'raldi. Agar ikkinchi rombda urinish < 3 o'rniga urinish <= 3 yozilganida, to'rtinchi urinish ham berilardi. Chizmada qo'lda yurish shunday xatoni kod yozmasdan ushlaydi.

5.2 Qisman yechilgan misol: suv qaynashini kutish

flowchart TD
    A([Boshlash]) --> B[Choynakni yoqing]
    B --> C{Suv qaynadimi?}
    C -- Yo'q --> D[1 daqiqa kuting]
    D --> C
    C -- Ha --> E[Choy damlang]
    E --> F([Tugash])

Suv faqat to'rtinchi tekshiruvda qaynadi deylik. Birinchi uch tekshiruvda romb "Yo'q" dedi. "1 daqiqa kuting" bloki necha marta bajarildi?

6. Diagramma vositalari

6.1 Qog'oz va ruchka

Eng tez vosita — qog'oz. Fikrni tekshirish uchun chiroyli chizma shart emas. Ko'p dasturchilar murakkab masalani avval daftarda chizadi, keyin kompyuterga o'tadi.

Chizmani saqlash, o'zgartirish yoki hamkasbga yuborish kerak bo'lsa — kompyuter vositalari kerak.

6.2 draw.io

draw.io (diagrams.net nomi bilan ham tanilgan) — brauzerda ishlaydigan bepul diagramma muharriri. Manzili: app.diagrams.net. Ro'yxatdan o'tish shart emas.

• Chap tomonda shakllar kutubxonasi bor, ichida "Flowchart" bo'limi. Shaklni sichqoncha bilan tortib qo'yasiz va strelka bilan ulaysiz.
• Chizma .drawio fayl bo'lib saqlanadi: kompyuterga, Google Drive yoki OneDrive'ga.
• Tayyor chizmani rasm (PNG, SVG) yoki PDF qilib eksport qilsa bo'ladi.
• Kompyuterga o'rnatiladigan versiyasi ham bor.

Qachon qulay: aniq, toza, "rasmiy" ko'rinishdagi chizma kerak bo'lganda.

6.3 Excalidraw

Excalidraw — qo'lda chizilgandek ko'rinadigan bepul onlayn doska. Manzili: excalidraw.com.

• Shakllar ataylab biroz egri chiziladi — "bu tugallanmagan g'oya" degan hissiyot beradi.
• Havolani yuborib, hamkasb bilan bir vaqtda, jonli chizish mumkin.
• Chizma .excalidraw fayl yoki rasm sifatida saqlanadi.

Qachon qulay: tezkor eskiz, muhokama, "doskada tushuntirish" kerak bo'lganda.

6.4 Mermaid

Mermaid bilan Markdown darsida tanishgansiz: chizmani sichqoncha bilan emas, matn bilan yozasiz, dastur esa uni o'zi chizadi. Shu darsdagi barcha blok-sxemalar Mermaid'da yozilgan.

Blok-sxema uchun kerakli yozuvlar:

A, B, C — shaklning ichki nomi (ID). Ko'rinmaydi, faqat strelkalarni ulash uchun kerak. Qavs ichidagi matn esa chizmada ko'rinadi.

Mermaid'ni qayerda sinash mumkin? mermaid.live saytida chap tomonga matn yozasiz, o'ng tomonda chizma darhol paydo bo'ladi. GitHub, Notion, Obsidian va shu IlmHamroh sayti ham Mermaid'ni chizadi.

Asosiy afzalligi: chizma oddiy matn. Uni kod bilan birga saqlash, o'zgarishini kuzatish va bir qatorini tuzatish oson.

6.5 Qaysi birini tanlash?

Tekshirib ko'ring: Siz loyiha hujjatiga blok-sxema qo'ymoqchisiz. Hujjat Markdown'da yozilgan va chizma keyinchalik tez-tez o'zgaradi. Qaysi vosita qulay?

7. Ko'p uchraydigan xatolar

7.1 Rombdan yozuvsiz strelkalar

Rombdan ikki strelka chiqyapti, lekin qaysi biri "Ha", qaysi biri "Yo'q" — yozilmagan. O'quvchi taxmin qilishga majbur. Har bir romb strelkasiga yozuv qo'ying.

7.2 Shakllarni aralashtirish

Hisoblash uchun romb yoki savol uchun to'rtburchak chizish o'quvchini chalg'itadi. Qoida: amal — to'rtburchak, savol — romb, kiritish va chiqarish — parallelogramm.

7.3 Osilib qolgan yo'l

Rombning bir yo'li qayergadir ketadi-yu, "Tugash" ga yetmaydi. Bu — algoritm "Yo'q" holatida nima qilishni bilmaydi degani. Chizmani tugatgach, har bir strelkani barmoq bilan yurib chiqing: har yo'l oxir-oqibat "Tugash" ga yetishi kerak.

7.4 Mermaid: end so'zi

Shakl ID si sifatida kichik harfli end yozildi:

flowchart TD
    start --> end

Mermaid chizmani chizmaydi va xato beradi:

Error: Parse error on line 2:
... got 'end'

Tarjimasi: "2-qatorda tahlil xatosi: kutilmagan end keldi". Mermaid'da end — maxsus so'z, u chizma ichidagi guruhni yopish uchun band. Uni ID sifatida ishlatib bo'lmaydi.

Tuzatish: boshqa ID tanlang va matnni qavs ichiga yozing:

flowchart TD
    A([Boshlash]) --> Z([Tugash])

7.5 Mermaid: matn ichida qavs

Matn ichida oddiy qavs bor:

flowchart TD
    A[Narx (so'm)] --> B[Tamom]

Error: Parse error on line 2:
... got 'PS'

PS — Mermaid'ning ichki nomi, "ochiluvchi qavs" degani. Mermaid ( ni yangi shaklning boshlanishi deb o'yladi. Xato matni sizni qavsga olib boradi — o'sha joyni tekshiring.

Tuzatish: matnni qo'shtirnoqqa oling — A["Narx (so'm)"]. Qo'shtirnoq ichidagi hamma narsa oddiy matn hisoblanadi.

8. Mashqlar

1-mashq (oson): Shakl tanlang

Har bir qadam uchun blok-sxema shaklini ayting:

1. Foydalanuvchidan yoshini so'rash.
2. "Yosh 21 dan kattami?" deb tekshirish.
3. Hisobga 5 000 so'm qo'shish.
4. Algoritmni to'xtatish.

2-mashq (o'rta): Non do'koni

Mermaid'da blok-sxema yozing. Algoritm: xaridor nechta non olishini kiritadi. Bitta non 4 000 so'm. Jami summa hisoblanadi va chiqariladi.

Ishora: ketma-ketlik bo'limidagi choyxona chizmasiga qarang — faqat matnlar o'zgaradi. Tekshirish uchun kodni mermaid.live ga qo'ying.

flowchart TD
    A([Boshlash]) --> B[/Non sonini kiriting/]
    B --> C[jami = soni * 4000]
    C --> D[/jami ni chiqaring/]
    D --> Z([Tugash])

3-mashq (qiyin): Taksi tarifi

Pseudokod darsidagi taksi misolini blok-sxemaga aylantiring. Yo'lovchilar soni kiritiladi. 4 tagacha bo'lsa — "Oddiy mashina", 7 tagacha — "Miniven", undan ko'p bo'lsa — "Ikki mashina chaqiring". Mermaid'da yozing.

Ishora: AKS HOLDA AGAR — birinchi rombning "Yo'q" strelkasidan keyin keladigan ikkinchi romb.

flowchart TD
    A([Boshlash]) --> B[/Yo'lovchilar sonini kiriting/]
    B --> C{4 tagachami?}
    C -- Ha --> D[/Oddiy mashina/]
    C -- Yo'q --> E{7 tagachami?}
    E -- Ha --> F[/Miniven/]
    E -- Yo'q --> G[/Ikki mashina chaqiring/]
    D --> Z([Tugash])
    F --> Z
    G --> Z

9. Real ishda

• Loyiha hujjatlari. Dasturchilar README faylida ro'yxatdan o'tish yoki to'lov jarayonini Mermaid bilan chizadi. GitHub uni 2022-yildan beri o'zi chizib ko'rsatadi.
• Jamoa muhokamasi. Yangi imkoniyatni muhokama qilishda Excalidraw yoki doskada tez eskiz chiziladi.
• Biznes bilan gaplashish. Buyurtmachi kod o'qimaydi, lekin blok-sxemani tushunadi. "Mijoz to'lovni bekor qilsa nima bo'ladi?" degan savol ko'pincha aynan chizmada tug'iladi.
• Intervyu. Tizim loyihalash savollarida doskaga chizish so'raladi — bu haqda system design intervyu darsida.

Xulosa

• Blok-sxema — algoritmni shakllar va strelkalar bilan chizish.
• Oval — boshlanish va tugash, parallelogramm — kiritish va chiqarish, to'rtburchak — amal, romb — shart.
• Rombdan ikki yozuvli strelka chiqadi: "Ha" va "Yo'q".
• Takror — orqaga, rombga qaytgan strelka.
• Har bir yo'l "Tugash" ga yetishi kerak — barmoq bilan yurib tekshiring.
• Vositalar: qog'oz, draw.io, Excalidraw va matndan chizadigan Mermaid.

Keyingi dars: Muammo yechish metodikasi — har qanday masalani tushunish, reja tuzish, bajarish va tekshirishdan iborat to'rt qadamli usulni o'rganamiz.