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 }هدر جادویی مورد نیاز است
خط #!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 - ابرداده لبه را اضافه کنید
لبه ها دارای یک نوع (نوع رابطه معنایی)، یک برچسب اختیاری، یک وزن (ترافیک نسبی) و یک پرچم ناهمگام هستند. لبه های ناهمگام به صورت خطوط چین دار ارائه می شوند.
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 تعریف کنید. اگر رنگی کمتر از کنتراست WCAG AA باشد، بررسی دسترسپذیری W602 را روشن میکند.
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 را با افزونه remark یا markdown-it اسناد کنید.
نمودار شما آماده ارائه است - روی Render → SVG در نوار ابزار ویرایشگر کلیک کنید.