Diagram MakerOverview
🗂️

Overview

What the Diagram Maker is and how it works

מהו יוצר הדיאגרמות?

The Diagram Maker הוא כלי לדיאגרמות ארכיטקטורה ראשון בטקסט הבנוי על Datro DSL - שפה מובנית, מאומתת ובפורמט קנוני לתיאור מערכות תוכנה כנתונים, לא כתמונות.

במקום לגרור תיבות על קנבס, אתה כותב קובץ .dtro. שרשרת הכלים מנתחת אותו, מאמתת כללים ארכיטקטוניים, אוכפת יחסי ניגודיות של WCAG ומעבירה אותו ל-SVG, PNG או JSON אינטראקטיבי - הכל ממקור אמת אחד.

פתח את יוצר הדיאגרמות

כתוב, אמת ועבד את הדיאגרמה הראשונה שלך תוך דקות.

למה דאטרו על פני 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 }
}
💡

נסה את זה עכשיו

הדבק את הדוגמה שלמעלה בעורך דיאגרמות ולחץ על Validate - תראה אבחון מוקלד עם מספרי שורות, ולאחר מכן עיבוד ל-SVG בלחיצה אחת.

תקציר תכונה

23 סוגי צמתים21 סוגי קצהWCAG 2.1 AA/AAAJSON Schema Draft-07SVG · PNG · DOT · Cytoscapeייבוא / חיבור

המשך אל Quick Start כדי לכתוב את הדיאגרמה הראשונה שלך, או קפוץ ישר אל Language Reference עבור התחביר המלא.

Schema v1 · Updated September 2026