Quick Start
Build your first diagram in six steps
Szybkie uruchomienie
W ciągu sześciu kroków wykonaj swój pierwszy zweryfikowany diagram architektoniczny. Każdy krok wprowadza nową koncepcję datro. W końcu masz kompletny, zaprojektowany i ograniczoną kontrolę wykresu, który możesz eksportować jako SVG.
Skorzystaj z instrukcji w edytorze żywo: wkładaj każdy fragment i kliknij Waliduj“.
Krok 1 Zapisz swoje pierwsze węzły i krawędzi
Każdy .dtro-Plik zaczyna się od magicznego nagłówka. Następnie należy zadeklarować węzły i krawędzi.). Wpisz to do wydawcy:
#!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 }Magic Headers wymagane
Wiersz #!DATRO 1.0 w linii 1 jest obowiązkowy. Parser daje E100 Wróć, jeśli nie ma.
Krok 2 Dodaj `attrs` w celu uzyskania większej ilości metadanych
Blok attrs zawiera dowolne metadata kluczowe. Wartości mogą być ciągami znaków, liczbami, wartościami boelicznymi lub arrayami. Wspólne atrybuty są: tech, owner, deprecated i sla.
node backend {
type: service
label: "NestJS API"
attrs {
tech: "nestjs"
owner: "platform-team"
}
}Atrybuty są przekazywane do JSON IR i wyświetlane jako narzędzia w zgenerowanym SVG użyteczne dla metadanych gotowości i SLA.
Krok 3 Dodawanie metadanych Edge
Krawędzi mają rodzaj (typu semantycznej relacji), opcjonalny label, ciężar** (relacyjnego ruchu danych) i asynchroniczny flag. Asynchronizowane krawędzi są przedstawiane jako linie rozmieszczone.
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 | Typ relacji semantycznych |
label | string | No | — | Krótki tekst wyświetlany w linii marginesowej |
weight | number | No | 1.0 | Względna waga ruchu cięższe krawędzi stają się grubsze |
async | boolean | No | false | W przypadku true, krawędzię przedstawia się pościelone (patryka ognia i zapomnienia).). |
Krok 4 Grupowanie węzłów w klastrach
Użyj bloku group, aby zgrupować spokrewnione węzły. Grupy są przedstawiane w SVG jako oznakowane pola poddiagramowe. Węzeł może należeć do jednej grupy.
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" }Grupy vs. node.group
Możecie group: data_tier przypisanie grupy bezpośrednio do węzła. Obie style są ważne; lista members des Bloków group ma pierwszeństwo.
Krok 5 Dodaj ograniczenie architektoniczne
Ograniczenia to mechanicznie sprawdzone zasady architektury. Validator ocenia je w oparciu o IR i E501-Zwracanie błędów, gdy narusza się regułę.
constraint {
id: "no-db-external"
rule: "database !-> external"
message: "Databases must not connect to external services"
severity: error
}Zasada database!-> external Nie ma żadnych węzłów typu database może mieć obręb skierowany do jednego z węzłów typu external Właściciele. Zablokuje to przypadkowe bezpośrednie DB → API połączenia zewnętrznych dostawców.
Krok 6 Dodaj wskazówki i temat
Sterować układ wykresu za pomocą layout-Blok i zdefiniować paletę kolorów theme-Blok. Sprawdzenie dostępności rozwiązuje W602 wygasnąć, gdy kolor spada pod kontrast 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 kontrastuje się automatycznie
Eksporter DOT automatycznie wybiera czarny lub biały kolor litery na każde wypełnienie węzłów za pomocą formuły względnej świetlności WCAG 2.1 bez potrzeby konfiguracji.
Następne kroki
- Przeczytaj Language Reference dla pełnej syntaxy każdego typu bloku.
- Wykorzystaj CLI Reference do weryfikacji, formatowania i eksportowania za pomocą linii poleceń.
- Dowiedz się, jak tworzyć dokumenty za pomocą wtyczki Remark lub Markdown-it.
Twój wykres jest gotowy do wyświetlania Kliknij w barze symboli edytorskich na wyświetlanie → SVG.