→
IS
← Barcha tajribalar
jonli

Mermaid Sketch — qo'lda chizilgandek diagrammalar

Mermaid tilida matn yozasan — yonida qiyshiq, qo'lda chizilgandek shakllar bilan diagramma paydo bo'ladi. Presetlarni oldindan GPT orqali generatsiya qildim; muharrirda kodni tahrirlab, jonli qayta chizilishini kuzatish mumkin.

laboratoriya yozuvi
Nega qildim

Qat'iy korporativ BPMN emas, bloknotdagi eskizdek o'qiladigan diagrammalar xohladim — ular do'stonaroq va o'z aniqligi haqida kamroq yolg'on gapiradi. Yana oddiy matndan qanday qilib rasm chiqishini his qilmoqchi va buni GPT generatsiyasi bilan bog'lamoqchi edim.

Nimani o'rgandim

Mermaid'da 11-versiyadan boshlab o'rnatilgan look: handDrawn rejimi bor — u shakllarni rough.js orqali o'tkazadi, va ideal to'rtburchaklar qaltiroqqa aylanadi. Alohida kutubxona kerak emas. Bundan tashqari securityLevel: strict yakuniy SVG'ni DOMPurify orqali o'tkazadi, shuning uchun communiy muharrirni istalgan kirish bilan xavfsiz to'ldirsa bo'ladi.

Qayerda sindi

Birinchi versiya har renderda to'g'ridan-to'g'ri brauzerdan GPT'ni chaqirardi — bu ham pulni shamolga sovurish, ham abuse uchun ochiq eshik. Boshqacha yechdim: prodda jonli GPT umuman yo'q. Diagrammalarni oldindan lokal skript (scripts/mermaid-gen.mjs) bilan generatsiya qilaman, presetlar sifatida qo'yaman, sahifa esa bironta ham tarmoq so'rovisiz toza mijoz tomonidagi render.

Stek
Mermaidrough.jsOpenAI

Chizma emas, eskiz

Mermaid — diagramma matn bilan tasvirlanadigan til: A --> B deb yozasan, A'dan B'ga o'q olasan. Qulay, lekin sukut bo'yicha rasm steril chiqadi — tekis to'rtburchaklar, ideal chiziqlar. Bunday shakl ongsiz ravishda salfetkadagi eskizda bo'lmagan aniqlikni va'da qiladi.

11-versiyadan Mermaid'da look: handDrawn rejimi bor: ostida shakllar rough.js orqali o'tadi va chiziqlar biroz qaltiroq bo'ladi — go'yo qo'lda chizilgandek. Quyida jonli muharrir. Yuqoridagi presetlarni bos yoki chapdagi kodni tahrirla — rasm o'zi qayta chiziladi.

jonli demo
Demo yuklanmoqda…

GPT bu yerda nima qiladi

Preset misollarni harfma-harf qo'lda yozmadim — tavsiflarni aytib berdim va ularni GPT orqali Mermaid'ga aylantirdim (xuddi TIL-yozuvlarni generatsiya qiladigan token). Ammo muhim jihat — bu qayerda sodir bo'ladi:

Skript imkon qadar sodda: tavsifni argument sifatida oladi, uni "qat'iy to'g'ri Mermaid qaytar va boshqa hech narsa" tizim promptii bilan OpenAI'ga yuboradi, ehtimoliy ```mermaid to'siqlarini olib tashlaydi va toza kodni konsolga chiqaradi. Keyin men natijani ko'z bilan tekshirib, yangi preset sifatida qo'yaman.

node --env-file=.env.local scripts/mermaid-gen.mjs "ro'yxatdan o'tish voronkasi: ariza, tekshiruv, xat, tayyor"

Render ichida qanday ishlaydi

Uchta muhim tafsilot:

  • Yalqovlik. mermaid — hajmli kutubxona, shuning uchun butun komponent dinamik import() orqali yuklanadi va faqat demoga yetib borganingda ishga tushadi. Lab bosh sahifasida uning baytlari umuman yo'q.
  • Mavzu. Render <html>'dagi data-theme (va data-alien)'ni o'qiydi va almashtirishda MutationObserver orqali qayta chiziladi — eskiz saytning yorug', qorong'i va "begona" mavzularida ham yashaydi.
  • Xatolar. Renderdan oldin kod mermaid.parse()'dan o'tadi; sintaksis buzuq bo'lsa, ozoda xato ko'rsataman, lekin oxirgi muvaffaqiyatli rasmni ekrandan olib tashlamayman — har xatoda bo'sh joy chaqnamasligi uchun.