Quick Start
Build your first diagram in six steps
Արագ մեկնարկ
Կառուցեք ձեր առաջին վավերացված ճարտարապետական դիագրամը վեց քայլով: Յուրաքանչյուր քայլ ներկայացնում է մեկ նոր Datro հայեցակարգ: Վերջում դուք կունենաք ամբողջական, ոճավորված, սահմանափակումներով ստուգված դիագրամ, որը պատրաստ կլինի արտահանել որպես SVG:
Հետևեք ուղիղ խմբագրին. տեղադրեք յուրաքանչյուր հատված և սեղմեք Վավերացնել:
Քայլ 1 - Գրեք ձեր առաջին հանգույցներն ու եզրերը
Յուրաքանչյուր .dtro ֆայլ սկսվում է կախարդական վերնագրով: Դրանից հետո հայտարարեք հանգույցներ (սուբյեկտներ) և եզրեր (հարաբերություններ): Տեղադրեք սա խմբագրի մեջ.
#!DATRO 1.0
node frontend { type: web label: "React App" }
node backend { type: service label: "NestJS API" }
node db { type: database label: "PostgreSQL" }
edge frontend -> backend { kind: http }
edge backend -> db { kind: query }Պահանջվում է կախարդական վերնագիր
1-ին տողում #!DATRO 1.0 տողը պարտադիր է։ Վերլուծիչը վերադարձնում է E100, եթե այն բացակայում է:
Քայլ 2 — Ավելացնել `attrs` ավելի հարուստ մետատվյալների համար
attrs բլոկը պահում է կամայական բանալի-արժեքի մետատվյալներ: Արժեքները կարող են լինել տողեր, թվեր, բուլյաններ կամ զանգվածներ: Ընդհանուր ատրիբուտներն են tech, owner, deprecated և sla։
node backend {
type: service
label: "NestJS API"
attrs {
tech: "nestjs"
owner: "platform-team"
}
}Հատկանիշները անցնում են JSON IR-ին և հայտնվում են որպես գործիքի հուշումներ ներկայացված SVG-ում, որոնք օգտակար են զանգի և SLA մետատվյալների համար:
Քայլ 3 — Ավելացրեք եզրային մետատվյալներ
Եզրերն ունեն kind (իմաստային հարաբերությունների տեսակ), կամընտիր պիտակ, քաշ (հարաբերական տրաֆիկ) և async դրոշ: Անհամաժամեցված եզրերը ներկայացվում են որպես գծավոր գծեր:
edge backend -> stripe {
kind: http
label: "charge API"
async: false
}| Field | Type | Required | Default | Description |
|---|---|---|---|---|
kind | EdgeKind "http""grpc""query""publish""subscribe""read""write""deploys""monitors""depends""…21 total" | Yes | unknown | Իմաստային հարաբերությունների տեսակը |
label | string | No | — | Կարճ տեքստը ցուցադրվում է եզրագծի վրա |
weight | number | No | 1.0 | Հարաբերական երթևեկության քաշը. ծանր եզրերը դառնում են ավելի հաստ |
async | boolean | No | false | Երբ ճշմարիտ է, եզրը վերածվում է գծավոր (կրակել և մոռացել օրինակ) |
Քայլ 4. Խմբավորել հանգույցները կլաստերների մեջ
Օգտագործեք խմբ բլոկ՝ կապված հանգույցների կլաստերավորման համար: Խմբերը ներկայացվում են որպես պիտակավորված ենթագրաֆիկ տուփեր SVG-ում: Հանգույցը կարող է պատկանել միայն մեկ խմբի:
group data_tier {
label: "Data Layer"
members: [db, redis_cache]
}
node redis_cache { type: cache label: "Redis" }
edge backend -> redis_cache { kind: read label: "session" }Խմբեր ընդդեմ node.group
Դուք կարող եք նաև խումբ նշանակել անմիջապես հանգույցի վրա group: data_tier-ով: Երկու ոճերն էլ վավեր են. group բլոկի members ցուցակը գերակա է։
Քայլ 5 — Ավելացրեք ճարտարապետական սահմանափակում
Սահմանափակումները մեքենայով ստուգված ճարտարապետական կանոններ են: Վալիդատորը գնահատում է դրանք IR-ի համեմատ և վերադարձնում E501 սխալները, երբ կանոնը խախտվում է:
constraint {
id: "no-db-external"
rule: "database !-> external"
message: "Databases must not connect to external services"
severity: error
}database !-> external կանոնը նշանակում է՝ database տիպի ոչ մի հանգույց չի կարող ուղղորդված եզր ունենալ դեպի external տիպի ցանկացած հանգույց։ Սա արգելափակում է պատահական ուղղակի DB → երրորդ կողմի API զանգերը:
Քայլ 6 — Ավելացրեք դասավորության ակնարկներ և թեմա
Վերահսկեք, թե ինչպես է դիագրամը դասավորվում layout բլոկով և սահմանեք գունային գունապնակ theme բլոկով: Մատչելիության ստուգումը գործարկում է W602, եթե որևէ գույն ընկնում է WCAG AA կոնտրաստից ցածր:
layout { direction: LR algo: dagre node_sep: 60 rank_sep: 120 }
theme {
palette {
service: "#D0E8FF"
database: "#FFE8C0"
web: "#E8D0FF"
cache: "#C0FFE8"
background: "#FFFFFF"
}
accessibility { min_contrast: AA }
}WCAG հակադրությունը ավտոմատ է
DOT արտահանողն ավտոմատ կերպով ընտրում է սև կամ սպիտակ տառատեսակի գույնը յուրաքանչյուր հանգույցի լցման համար՝ օգտագործելով WCAG 2.1 հարաբերական լուսավորության բանաձևը. անհրաժեշտ է զրոյական կոնֆիգուրացիա:
Հաջորդ քայլերը
- Կարդացեք Language Reference բլոկի բոլոր տեսակի ամբողջական շարահյուսությունը:
- Օգտագործեք CLI Reference՝ հրամանի տողից վավերացնելու, ձևաչափելու և արտահանելու համար:
- Իմացեք, թե ինչպես պետք է embed diagrams in Markdown փաստաթղթավորել դիտողությունների կամ նշագրման հավելվածի միջոցով:
Ձեր դիագրամը պատրաստ է ցուցադրման. սեղմեք Render → SVG խմբագրիչի գործիքագոտում: