Quick Start
Build your first diagram in six steps
სწრაფი დაწყება
შექმენით თქვენი პირველი დადასტურებული არქიტექტურის დიაგრამა ექვს ნაბიჯში. ყოველი ნაბიჯი წარმოგიდგენთ Datro-ს ახალ კონცეფციას. დასასრულს თქვენ გექნებათ სრული, სტილიზებული, შეზღუდვით შემოწმებული დიაგრამა, რომელიც მზად იქნება ექსპორტისთვის SVG-ად.
მიჰყევით პირდაპირ რედაქტორს - ჩასვით თითოეული ნაწყვეტი და დააწკაპუნეთ Validate-ზე.
ნაბიჯი 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 }საჭიროა ჯადოსნური სათაური
#!DATRO 1.0 ხაზი 1 ხაზზე სავალდებულოა. პარსერი აბრუნებს 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 (სემანტიკური ურთიერთობის ტიპი), არასავალდებულო ლეიბლი, წონა (შედარებითი ტრაფიკი) და ასინქრონული დროშა. ასინქრონული კიდეები გამოისახება წყვეტილი ხაზების სახით.
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" }ჯგუფები კვანძის.ჯგუფის წინააღმდეგ
თქვენ ასევე შეგიძლიათ ჯგუფის მინიჭება პირდაპირ კვანძზე 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 რედაქტორის ხელსაწყოთა ზოლში.