Ma'lumot · compound
Graf kanvasi (oqim)
Tugun va çiziqlardan oqim diagrammasi (Make.com uslubi): har tugun — yumaloq karta, çapda xizmat belgisi pastel doirada, tur, nima va kim; çiziq — egri, strelkali, örtasida holat nuqtasi. Soğ zanjir sokin kulrang, uzilgani qizil; dalilsiz tugun va uzuq çiziq — qizil punktir; zanjir davomi yöq — qizil uzuq oxir va «?». Joylaştiriş ma'lumotdan özi (templates/graf.mjs — qatlamli, taşqi kutubxonasiz), zoom va suriş bor; tor joyda (telefon) tik röyxatga ötadi. Mister Fox va Fox OS sörovi (FoxOS «Oqimlar», 21.10); keyin WBS daraxti va brend arxitekturasi şu yadrodan.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-tone | blueyellowpinkcoralgreenpurple | blue |
data-state | okwarnerror | ok |
Anatomiya
- root
.fx-graphşart - viewport
.fx-graph__viewportşart - stage
.fx-graph__stageşart - edges
.fx-graph__edgesixtiyoriy - edge
.fx-graph__edgeixtiyoriy - mid
.fx-graph__midixtiyoriy - node
.fx-graph__nodeşart - icon
.fx-graph__iconixtiyoriy - dot
.fx-graph__dotixtiyoriy - ghost
.fx-graph__ghostixtiyoriy - tools
.fx-graph__toolsixtiyoriy
Holatlar
selectedopenbrokenlist
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Tugundan tugunga (körinmasa — körinişga suriladi) |
| Enter / Space | Tugunni tanlaydi (fx-graph:select) |
| Ctrl/⌘ + gʻildirak | Zoom |
Ildiz role="group" va nom bilan; qadamlar <ol>, har tugun — <button aria-pressed> (Tab va Enter bilan tanlanadi), holat fx-sr-only matnida. Çiziqlar SVG aria-hidden — boğlaniş tartibi röyxat tuzilmasidan öqiladi. Zoom tugmalari nomli.
Kod
AI uçun: qaçon işlatiladi
Işlating
- Funksiya oqimi: trigger → amallar → natija, har tugun dalil bilan (uzilgan joyni topiş).
- Avtomatlaştiriş, integratsiya va iş jarayoni sxemasi.
Işlatmang
- Vaqt böyiça qadamlar (bir yöl, tarmoqsiz) →
timeline - Bosqiçlar böyiça kartalar →
board - Tugun joyini qölda yozmang — graf.mjs ma'lumotdan joylaştiradi; özgarsa, çiziqlar ham özi yangilanadi.
- Soğ çiziqlarni rang-barang qilmang — rang faqat muammoga (diqqat va uziliş yaqqol körinsin).
- Holatni faqat rang bilan bermang — nuqta şakli (● ▲ ◆) va ekran öquvçi matni bor.
npx foxui add graph
<div class="fx-graph" data-fx-graph role="group" aria-label="Ariza oqimi" style="--_nw: 248px; --_nh: 96px; --_stub: 64px; --_gr: 14px">
<div class="fx-graph__tools"><button class="fx-graph__tool" type="button" data-graph-zoom="in" aria-label="Yaqinlaştiriş" title="Yaqinlaştiriş">+</button><button class="fx-graph__tool" type="button" data-graph-zoom="out" aria-label="Uzoqlaştiriş" title="Uzoqlaştiriş">−</button><button class="fx-graph__tool" type="button" data-graph-zoom="fit" aria-label="Butunini körsatiş" title="Butunini körsatiş"><svg viewBox="0 0 256 256" aria-hidden="true"><path fill="currentColor" d="M216,48V96a8,8,0,0,1-16,0V67.31l-50.34,50.35a8,8,0,0,1-11.32-11.32L188.69,56H160a8,8,0,0,1,0-16h48A8,8,0,0,1,216,48ZM106.34,138.34,56,188.69V160a8,8,0,0,0-16,0v48a8,8,0,0,0,8,8H96a8,8,0,0,0,0-16H67.31l50.35-50.34a8,8,0,0,0-11.32-11.32Z"/></svg></button></div>
<div class="fx-graph__viewport"><div class="fx-graph__stage" data-w="1092" data-h="280" style="--_w: 1092px; --_h: 280px">
<svg class="fx-graph__edges" width="1092" height="280" viewBox="0 0 1092 280" aria-hidden="true"><defs><marker id="gx1-a-ok" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="10" markerHeight="10" markerUnits="userSpaceOnUse" orient="auto"><path class="fx-graph__arrow" data-state="ok" d="M0 1 9 5 0 9z"/></marker><marker id="gx1-a-warn" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="10" markerHeight="10" markerUnits="userSpaceOnUse" orient="auto"><path class="fx-graph__arrow" data-state="warn" d="M0 1 9 5 0 9z"/></marker><marker id="gx1-a-error" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="10" markerHeight="10" markerUnits="userSpaceOnUse" orient="auto"><path class="fx-graph__arrow" data-state="error" d="M0 1 9 5 0 9z"/></marker></defs><path class="fx-graph__edge" data-state="ok" d="M280 140 C328 140 324 140 372 140" marker-end="url(#gx1-a-ok)"/><circle class="fx-graph__mid" data-state="ok" cx="326" cy="140" r="5"/><path class="fx-graph__edge" data-state="warn" d="M624 140 C672 140 668 80 716 80" marker-end="url(#gx1-a-warn)"/><circle class="fx-graph__mid" data-state="warn" cx="670" cy="110" r="5"/><path class="fx-graph__edge" data-state="error" data-broken d="M624 140 C672 140 668 200 716 200" marker-end="url(#gx1-a-error)"/><circle class="fx-graph__mid" data-state="error" cx="670" cy="170" r="5"/><path class="fx-graph__edge" data-state="error" data-broken d="M968 200 H1032"/></svg>
<ol class="fx-graph__layers"><li class="fx-graph__layer"><span class="fx-sr-only">1-qadam</span><ul class="fx-graph__nodes"><li class="fx-graph__item" style="--x: 32px; --y: 92px"><button class="fx-graph__node" type="button" data-id="t1" data-state="ok" data-tone="blue" aria-pressed="false"><span class="fx-graph__icon"><svg viewBox="0 0 256 256" aria-hidden="true"><path d="M128,24h0A104,104,0,1,0,232,128,104.12,104.12,0,0,0,128,24Zm88,104a87.61,87.61,0,0,1-3.33,24H174.16a157.44,157.44,0,0,0,0-48h38.51A87.61,87.61,0,0,1,216,128ZM102,168H154a115.11,115.11,0,0,1-26,45A115.27,115.27,0,0,1,102,168Zm-3.9-16a140.84,140.84,0,0,1,0-48h59.88a140.84,140.84,0,0,1,0,48ZM40,128a87.61,87.61,0,0,1,3.33-24H81.84a157.44,157.44,0,0,0,0,48H43.33A87.61,87.61,0,0,1,40,128ZM154,88H102a115.11,115.11,0,0,1,26-45A115.27,115.27,0,0,1,154,88Zm52.33,0H170.71a135.28,135.28,0,0,0-22.3-45.6A88.29,88.29,0,0,1,206.37,88ZM107.59,42.4A135.28,135.28,0,0,0,85.29,88H49.63A88.29,88.29,0,0,1,107.59,42.4ZM49.63,168H85.29a135.28,135.28,0,0,0,22.3,45.6A88.29,88.29,0,0,1,49.63,168Zm98.78,45.6a135.28,135.28,0,0,0,22.3-45.6h35.66A88.29,88.29,0,0,1,148.41,213.6Z"/></svg></span><span class="fx-graph__text"><span class="fx-graph__kicker">Boşlaniş · Sayt</span><span class="fx-graph__title">Mehmon formani yuboradi</span><span class="fx-graph__meta">Fox RX</span></span><span class="fx-graph__dot" data-state="ok" aria-hidden="true"></span><span class="fx-sr-only">Işlayapti</span></button></li></ul></li><li class="fx-graph__layer"><span class="fx-sr-only">2-qadam</span><ul class="fx-graph__nodes"><li class="fx-graph__item" style="--x: 376px; --y: 92px"><button class="fx-graph__node" type="button" data-id="a1" data-state="ok" data-tone="green" aria-pressed="false"><span class="fx-graph__icon"><svg viewBox="0 0 256 256" aria-hidden="true"><path d="M128,24C74.17,24,32,48.6,32,80v96c0,31.4,42.17,56,96,56s96-24.6,96-56V80C224,48.6,181.83,24,128,24Zm80,104c0,9.62-7.88,19.43-21.61,26.92C170.93,163.35,150.19,168,128,168s-42.93-4.65-58.39-13.08C55.88,147.43,48,137.62,48,128V111.36c17.06,15,46.23,24.64,80,24.64s62.94-9.68,80-24.64ZM69.61,53.08C85.07,44.65,105.81,40,128,40s42.93,4.65,58.39,13.08C200.12,60.57,208,70.38,208,80s-7.88,19.43-21.61,26.92C170.93,115.35,150.19,120,128,120s-42.93-4.65-58.39-13.08C55.88,99.43,48,89.62,48,80S55.88,60.57,69.61,53.08ZM186.39,202.92C170.93,211.35,150.19,216,128,216s-42.93-4.65-58.39-13.08C55.88,195.43,48,185.62,48,176V159.36c17.06,15,46.23,24.64,80,24.64s62.94-9.68,80-24.64V176C208,185.62,200.12,195.43,186.39,202.92Z"/></svg></span><span class="fx-graph__text"><span class="fx-graph__kicker">Amal · Server</span><span class="fx-graph__title">Ariza bazaga yoziladi</span><span class="fx-graph__meta">Fox RX</span></span><span class="fx-graph__dot" data-state="ok" aria-hidden="true"></span><span class="fx-sr-only">Işlayapti</span></button></li></ul></li><li class="fx-graph__layer" data-branch="2" data-in="dashed"><span class="fx-sr-only">3-qadam</span><ul class="fx-graph__nodes"><li class="fx-graph__item" style="--x: 720px; --y: 32px" data-in="warn"><button class="fx-graph__node" type="button" data-id="n1" data-state="warn" data-tone="blue" aria-pressed="false"><span class="fx-graph__icon"><svg viewBox="0 0 256 256" aria-hidden="true"><path d="M228.88,26.19a9,9,0,0,0-9.16-1.57L17.06,103.93a14.22,14.22,0,0,0,2.43,27.21L72,141.45V200a15.92,15.92,0,0,0,10,14.83,15.91,15.91,0,0,0,17.51-3.73l25.32-26.26L165,220a15.88,15.88,0,0,0,10.51,4,16.3,16.3,0,0,0,5-.79,15.85,15.85,0,0,0,10.67-11.63L231.77,35A9,9,0,0,0,228.88,26.19Zm-61.14,36L78.15,126.35l-49.6-9.73ZM88,200V152.52l24.79,21.74Zm87.53,8L92.85,135.5l119-85.29Z"/></svg></span><span class="fx-graph__text"><span class="fx-graph__kicker">Natija · Telegram</span><span class="fx-graph__title">Menejerga xabar</span><span class="fx-graph__meta">Guli</span></span><span class="fx-graph__dot" data-state="warn" aria-hidden="true"></span><span class="fx-sr-only">Diqqat</span></button></li><li class="fx-graph__item" style="--x: 720px; --y: 152px" data-in="dashed"><button class="fx-graph__node" type="button" data-id="n2" data-state="error" data-tone="purple" data-open aria-pressed="false"><span class="fx-graph__icon"><svg viewBox="0 0 256 256" aria-hidden="true"><path d="M104,140a12,12,0,1,1-12-12A12,12,0,0,1,104,140Zm60-12a12,12,0,1,0,12,12A12,12,0,0,0,164,128Zm74.45,64.9-67,29.71a16.17,16.17,0,0,1-21.71-9.1l-8.11-22q-6.72.45-13.63.46t-13.63-.46l-8.11,22a16.18,16.18,0,0,1-21.71,9.1l-67-29.71a15.93,15.93,0,0,1-9.06-18.51L38,58A16.07,16.07,0,0,1,51,46.14l36.06-5.93a16.22,16.22,0,0,1,18.26,11.88l3.26,12.84Q118.11,64,128,64t19.4.93l3.26-12.84a16.21,16.21,0,0,1,18.26-11.88L205,46.14A16.07,16.07,0,0,1,218,58l29.53,116.38A15.93,15.93,0,0,1,238.45,192.9ZM232,178.28,202.47,62s0,0-.08,0L166.33,56a.17.17,0,0,0-.17,0l-2.83,11.14c5,.94,10,2.06,14.83,3.42A8,8,0,0,1,176,86.31a8.09,8.09,0,0,1-2.16-.3A172.25,172.25,0,0,0,128,80a172.25,172.25,0,0,0-45.84,6,8,8,0,1,1-4.32-15.4c4.82-1.36,9.78-2.48,14.82-3.42L89.83,56s0,0-.12,0h0L53.61,61.93a.17.17,0,0,0-.09,0L24,178.33,91,208a.23.23,0,0,0,.22,0L98,189.72a173.2,173.2,0,0,1-20.14-4.32A8,8,0,0,1,82.16,170,171.85,171.85,0,0,0,128,176a171.85,171.85,0,0,0,45.84-6,8,8,0,0,1,4.32,15.41A173.2,173.2,0,0,1,158,189.72L164.75,208a.22.22,0,0,0,.21,0Z"/></svg></span><span class="fx-graph__text"><span class="fx-graph__kicker">Natija · Discord</span><span class="fx-graph__title">Kanalga kartoçka</span><span class="fx-graph__meta">Fox OS</span></span><span class="fx-graph__dot" data-state="error" aria-hidden="true"></span><span class="fx-sr-only">Işlamayapti, dalil yöq</span></button><span class="fx-graph__ghost" title="Zanjir davomi yöq"><b aria-hidden="true">?</b><span class="fx-graph__ghost-t">Zanjir davomi yöq</span></span></li></ul></li></ol>
</div></div>
</div>Tokenlar: --fx-bg-category-blue --fx-bg-category-coral --fx-bg-category-green --fx-bg-category-pink --fx-bg-category-purple --fx-bg-category-yellow --fx-bg-muted --fx-bg-pressed --fx-bg-subtle --fx-bg-surface --fx-border-color-focus --fx-border-color-strong --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-control-h-sm --fx-ease-standard --fx-fg-error --fx-fg-success --fx-fg-warning --fx-font-size-lg --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-motion-fast --fx-radius-circle --fx-radius-control --fx-radius-pill --fx-radius-surface --fx-size-icon-md --fx-space-1 --fx-space-10 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-space-6 --fx-text-on-category --fx-text-primary --fx-text-secondary --fx-text-tertiary
Şu toifadan
API kalitlariAPI kalitlari boşqaruvi (naqş): «Yangi kalit» dialogi (nom, muddat, ruxsat) → kalit BIR MARTA körsatiladi (nusxalaş tugmasi va ogohlantiriş bilan) → röyxatda faqat prefiks qoladi.Audit jurnaliXavfsizlik va boşqaruv jurnali (4.191): «kim · nima · qaçon · qayerdan».Ustunli röyxatHar satrda nom, uluş çiziği va qiymat: eng köp trafik manbalari, şaharlar, mahsulotlar.Tarif va hisob-kitobTarif va hisob-kitob sahifasi (naqş): joriy reja (narx sömda, keyingi tölov sanasi, avtomatik uzaytiriş), foydalaniş meter'lari (çegara yaqin — ogohlantiriş), tölov usuli (karta turi, •••• 4417, muddat) va hisob-fakturalar jadvali (PDF).Doska (kanban)Holat ustunlari va kartalar.GrafikGrafik oilasi: ustun (guruh, ustma-ust), gorizontal ustun, çiziq (yakka seriyada sönuvçi maydon), mini-çiziq, donut (≤ 4 bölak), uluş çiziği, çiziqli ölçagiç va issiqlik xaritasi.