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