Overview
What the Diagram Maker is and how it works
دیاگرام ساز چیست؟
Diagram Maker یک ابزار نمودارسازی معماری متنی است که بر روی Datro DSL ساخته شده است - زبانی ساختاریافته، معتبر و با قالب بندی متعارف برای توصیف سیستم های نرم افزاری به عنوان داده، نه تصاویر.
به جای کشیدن جعبه ها روی بوم، یک فایل .dtro می نویسید. زنجیره ابزار آن را تجزیه میکند، قوانین معماری را تأیید میکند، نسبتهای کنتراست WCAG را اعمال میکند و آن را به SVG، PNG یا JSON تعاملی ارائه میکند - همه از یک منبع حقیقت واحد.
اولین نمودار خود را در عرض چند دقیقه بنویسید، تأیید کنید و ارائه دهید.
چرا Datro بیش از Mermaid یا draw.io؟
- گره های تایپ شده — 23 نوع معنایی (
service،database،gateway،queue، …) نمودارهای منسجم و درست شکل را به طور خودکار تولید میکنند. - لبههای تایپشده - 21 نوع معنایی (
http،query،publish،grpc، …) اتصالات خود را بدون لغو دستی کد رنگ و سبک دهید. - محدودیت های معماری — قوانینی مانند
database !-> externalبنویسید و اعتباردهنده آنها را در زمان تجزیه و نه در زمان بازبینی اجرا می کند. - قالبکننده متعارف —
datro fmtهر فایل را به یک قالب قطعی بازنویسی میکند. diff تغییرات واقعی را نشان می دهد، نه نویز را قالب بندی مجدد. - وارد کردن و نوشتن - تقسیم نمودارهای بزرگ در بین فایل ها با استفاده از
import، نام مستعار فضای نام، و نمایش لیست های سفید. - دسترسی WCAG 2.1 - نسبت کنتراست به طور خودکار در برابر پالت تم شما بررسی می شود.
W602وقتی زیر AA بیفتید شلیک میشود. - JSON IR قابل خواندن توسط ماشین — هر نمودار یک JSON IR بدون تلفات قابل مصرف توسط هر زنجیره ابزار، سیستم CI یا رندر سفارشی صادر می کند.
چگونه زنجیره ابزار کار می کند
هر فایل .dtro قبل از تبدیل شدن به یک نمودار از چهار مرحله عبور می کند:
- تجزیه - lexer + تجزیه کننده بازگشتی-نزولی متن منبع شما را به یک شی
DatroIRتبدیل می کند. هرگز پرتاب نمی کند. همه مشکلات به صورتDiagnostic[]با مکانهای دقیق خط/ستون برگردانده میشوند. - اعتبارسنجی - 4 پاس: یکپارچگی ساختاری → بررسی محدودیت معنایی → نکات اطلاعاتی → کنتراست WCAG 2.1 و قابلیت دسترسی به طول برچسب.
- صادر کردن - IR معتبر به DOT (Graphviz)، Cytoscape.js JSON، یا JSON IR بدون ضرر تبدیل می شود.
- رندر - خروجی DOT به Graphviz ارسال می شود تا خروجی پیکسلی کامل SVG یا PNG تولید کند.
یک مثال کامل
این فایل .dtro یک سرویس پرداخت با گروهها، گرههای تایپشده، لبههای معنایی، یک قانون محدودیت، نکات طرحبندی، و یک تم رنگی بررسیشده با WCAG را تعریف میکند - همه در یک فایل:
#!DATRO 1.0
meta {
title: "Payment Service"
version: "2.0.0"
owner: "payments-team"
sla: "99.95%"
}
group data {
label: "Data Layer"
members: [payments_db, fraud_cache]
}
node api_gw { type: gateway label: "API Gateway" }
node payment_svc { type: service label: "Payment Service" attrs { tech: "nestjs" } }
node payments_db { type: database label: "Payments DB" attrs { tech: "postgres" } }
node fraud_cache { type: cache label: "Fraud Cache" attrs { tech: "redis" } }
node stripe { type: external label: "Stripe" }
edge api_gw -> payment_svc { kind: http label: "POST /charge" }
edge payment_svc -> payments_db { kind: query }
edge payment_svc -> fraud_cache { kind: read }
edge payment_svc -> stripe { kind: http label: "charge API" }
constraint {
id: "no-db-external"
rule: "database !-> external"
message: "Databases must not call external APIs"
severity: error
}
layout { direction: LR algo: dagre }
theme {
palette { gateway: "#FFD0D0" service: "#D0E8FF" database: "#FFE8C0" cache: "#C0FFE8" }
accessibility { min_contrast: AA }
}اکنون آن را امتحان کنید
مثال بالا را در ویرایشگر Diagram Maker قرار دهید و روی Validate کلیک کنید - عیبهای تایپ شده با شماره خطوط را مشاهده خواهید کرد، سپس با یک کلیک به SVG رندر میشوید.
خلاصه ویژگی
برای نوشتن اولین نمودار خود به Quick Start ادامه دهید، یا مستقیماً به Language Reference برای نحو کامل بروید.