Diagram MakerOverview
🗂️

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 قبل از تبدیل شدن به یک نمودار از چهار مرحله عبور می کند:

1 · تجزیه2 · اعتبارسنجی3 · صادرات4 · رندر
  • تجزیه - lexer + تجزیه کننده بازگشتی-نزولی متن منبع شما را به یک شی DatroIR تبدیل می کند. هرگز پرتاب نمی کند. همه مشکلات به صورت Diagnostic[] با مکان‌های دقیق خط/ستون برگردانده می‌شوند.
  • اعتبارسنجی - 4 پاس: یکپارچگی ساختاری → بررسی محدودیت معنایی → نکات اطلاعاتی → کنتراست WCAG 2.1 و قابلیت دسترسی به طول برچسب.
  • صادر کردن - IR معتبر به DOT (Graphviz)، Cytoscape.js JSON، یا JSON IR بدون ضرر تبدیل می شود.
  • رندر - خروجی DOT به Graphviz ارسال می شود تا خروجی پیکسلی کامل SVG یا PNG تولید کند.

یک مثال کامل

این فایل .dtro یک سرویس پرداخت با گروه‌ها، گره‌های تایپ‌شده، لبه‌های معنایی، یک قانون محدودیت، نکات طرح‌بندی، و یک تم رنگی بررسی‌شده با WCAG را تعریف می‌کند - همه در یک فایل:

payment-service.dtro
#!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 رندر می‌شوید.

خلاصه ویژگی

23 نوع گره21 نوع لبهWCAG 2.1 AA/AAAJSON Schema Draft-07SVG · PNG · DOT · Cytoscapeوارد کردن / نوشتن

برای نوشتن اولین نمودار خود به Quick Start ادامه دهید، یا مستقیماً به Language Reference برای نحو کامل بروید.

Schema v1 · Updated September 2026