Diagram MakerOverview
🗂️

Overview

What the Diagram Maker is and how it works

Ի՞նչ է Դիագրամ ստեղծողը:

Diagram Maker-ը տեքստային առաջին ճարտարապետության գծագրման գործիք է, որը կառուցված է Datro DSL-ի վրա՝ կառուցվածքային, վավերացված և կանոնական ձևաչափված լեզու ծրագրային համակարգերը որպես տվյալներ, այլ ոչ թե նկարներ նկարագրելու համար:

Կտավի վրա տուփերը քաշելու փոխարեն դուք գրում եք .dtro ֆայլ։ Գործիքների շղթան վերլուծում է այն, վավերացնում է ճարտարապետական ​​կանոնները, պարտադրում է WCAG հակադրության հարաբերակցությունները և այն դարձնում SVG, PNG կամ ինտերակտիվ JSON՝ բոլորը ճշմարտության մեկ աղբյուրից:

Բացեք Diagram Maker-ը

Գրեք, հաստատեք և ներկայացրեք ձեր առաջին դիագրամը րոպեների ընթացքում:

Ինչու՞ 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 · Ներկայացում
  • Parse — ռեկուրսիվ ծագման lexer + parser-ը վերափոխում է ձեր սկզբնական տեքստը DatroIR օբյեկտի։ Այն երբեք չի նետում; բոլոր խնդիրները վերադարձվում են որպես Diagnostic[]՝ գծերի/սյունակների ճշգրիտ տեղակայմամբ:
  • Վավերացնել — 4 անցում. կառուցվածքային ամբողջականություն → իմաստային սահմանափակումների ստուգում → տեղեկատվական ակնարկներ → WCAG 2.1 հակադրություն և պիտակի երկարության հասանելիություն։
  • Արտահանում — վավերացված IR-ը փոխարկվում է DOT-ի (Graphviz), Cytoscape.js JSON-ի կամ անկորուստ JSON IR-ի:
  • Render — 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 խմբագրիչում և սեղմեք Վավերացնել. կտեսնեք մուտքագրված ախտորոշում տողերի համարներով, այնուհետև մեկ սեղմումով կփոխանցեք SVG-ին:

Հատկանիշի ամփոփում

23 հանգույցների տեսակներ21 եզրային տեսակներWCAG 2.1 AA / AAAJSON Schema Draft-07SVG · PNG · DOT · CytoscapeՆերմուծում / Կազմել

Շարունակեք դեպի Quick Start՝ ձեր առաջին դիագրամը գրելու համար, կամ անցեք ուղիղ դեպի Language Reference՝ ամբողջական շարահյուսության համար:

Schema v1 · Updated September 2026