Diagram MakerQuick Start

Quick Start

Build your first diagram in six steps

სწრაფი დაწყება

შექმენით თქვენი პირველი დადასტურებული არქიტექტურის დიაგრამა ექვს ნაბიჯში. ყოველი ნაბიჯი წარმოგიდგენთ Datro-ს ახალ კონცეფციას. დასასრულს თქვენ გექნებათ სრული, სტილიზებული, შეზღუდვით შემოწმებული დიაგრამა, რომელიც მზად იქნება ექსპორტისთვის SVG-ად.

გახსენით დიაგრამის შემქმნელი

მიჰყევით პირდაპირ რედაქტორს - ჩასვით თითოეული ნაწყვეტი და დააწკაპუნეთ Validate-ზე.

ნაბიჯი 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 }
ℹ️

საჭიროა ჯადოსნური სათაური

#!DATRO 1.0 ხაზი 1 ხაზზე სავალდებულოა. პარსერი აბრუნებს 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 (სემანტიკური ურთიერთობის ტიპი), არასავალდებულო ლეიბლი, წონა (შედარებითი ტრაფიკი) და ასინქრონული დროშა. ასინქრონული კიდეები გამოისახება წყვეტილი ხაზების სახით.

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" }
💡

ჯგუფები კვანძის.ჯგუფის წინააღმდეგ

თქვენ ასევე შეგიძლიათ ჯგუფის მინიჭება პირდაპირ კვანძზე 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 დოკუმენტაცია შენიშვნის ან მონიშვნის მოდულით.
გახსენით დიაგრამის შემქმნელი

თქვენი დიაგრამა მზად არის რენდერისთვის — დააწკაპუნეთ Render → SVG რედაქტორის ხელსაწყოთა ზოლში.

Schema v1 · Updated September 2026