Diagram MakerQuick Start

Quick Start

Build your first diagram in six steps

Արագ մեկնարկ

Կառուցեք ձեր առաջին վավերացված ճարտարապետական դիագրամը վեց քայլով: Յուրաքանչյուր քայլ ներկայացնում է մեկ նոր Datro հայեցակարգ: Վերջում դուք կունենաք ամբողջական, ոճավորված, սահմանափակումներով ստուգված դիագրամ, որը պատրաստ կլինի արտահանել որպես SVG:

Բացեք Diagram Maker-ը

Հետևեք ուղիղ խմբագրին. տեղադրեք յուրաքանչյուր հատված և սեղմեք Վավերացնել:

Քայլ 1 - Գրեք ձեր առաջին հանգույցներն ու եզրերը

Յուրաքանչյուր .dtro ֆայլ սկսվում է կախարդական վերնագրով: Դրանից հետո հայտարարեք հանգույցներ (սուբյեկտներ) և եզրեր (հարաբերություններ): Տեղադրեք սա խմբագրի մեջ.

arch.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։

DATRO
node backend {
  type:  service
  label: "NestJS API"
  attrs {
    tech:  "nestjs"
    owner: "platform-team"
  }
}

Հատկանիշները անցնում են JSON IR-ին և հայտնվում են որպես գործիքի հուշումներ ներկայացված SVG-ում, որոնք օգտակար են զանգի և SLA մետատվյալների համար:

Քայլ 3 — Ավելացրեք եզրային մետատվյալներ

Եզրերն ունեն kind (իմաստային հարաբերությունների տեսակ), կամընտիր պիտակ, քաշ (հարաբերական տրաֆիկ) և async դրոշ: Անհամաժամեցված եզրերը ներկայացվում են որպես գծավոր գծեր:

DATRO
edge backend -> stripe {
  kind:  http
  label: "charge API"
  async: false
}
FieldTypeRequiredDescription
kindEdgeKind
"http""grpc""query""publish""subscribe""read""write""deploys""monitors""depends""…21 total"
YesԻմաստային հարաբերությունների տեսակը
labelstringNoԿարճ տեքստը ցուցադրվում է եզրագծի վրա
weightnumberNoՀարաբերական երթևեկության քաշը. ծանր եզրերը դառնում են ավելի հաստ
asyncbooleanNoԵրբ ճշմարիտ է, եզրը վերածվում է գծավոր (կրակել և մոռացել օրինակ)

Քայլ 4. Խմբավորել հանգույցները կլաստերների մեջ

Օգտագործեք խմբ բլոկ՝ կապված հանգույցների կլաստերավորման համար: Խմբերը ներկայացվում են որպես պիտակավորված ենթագրաֆիկ տուփեր SVG-ում: Հանգույցը կարող է պատկանել միայն մեկ խմբի:

DATRO
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 սխալները, երբ կանոնը խախտվում է:

DATRO
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 կոնտրաստից ցածր:

DATRO
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 փաստաթղթավորել դիտողությունների կամ նշագրման հավելվածի միջոցով:
Բացեք Diagram Maker-ը

Ձեր դիագրամը պատրաստ է ցուցադրման. սեղմեք Render → SVG խմբագրիչի գործիքագոտում:

Schema v1 · Updated September 2026