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 עובר ארבעה שלבים לפני שהוא הופך לתרשים:
- נתח - ה-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 }
}נסה את זה עכשיו
הדבק את הדוגמה שלמעלה בעורך דיאגרמות ולחץ על Validate - תראה אבחון מוקלד עם מספרי שורות, ולאחר מכן עיבוד ל-SVG בלחיצה אחת.
תקציר תכונה
המשך אל Quick Start כדי לכתוב את הדיאגרמה הראשונה שלך, או קפוץ ישר אל Language Reference עבור התחביר המלא.