Diagram MakerOverview
🗂️

Overview

What the Diagram Maker is and how it works

Диаграмма жасаушы дегеніміз не?

Диаграмма жасаушы — 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 АА-дан төмен түскенде жанады.
  • Машинада оқылатын JSON IR — әрбір диаграмма кез келген құралдар тізбегі, CI жүйесі немесе пайдаланушы рендерері арқылы шығынсыз тұтынылатын JSON IR экспорттайды.

Құралдар тізбегі қалай жұмыс істейді

Әрбір .dtro файл диаграммаға айналмас бұрын төрт кезеңнен өтеді:

1 · Талдау2 · Тексеру3 · Экспорттау4 · Рендер
  • Parse — рекурсивті-түсіру лексикасы + талдаушы бастапқы мәтінді DatroIR нысанына түрлендіреді. Ол ешқашан лақтырмайды; барлық мәселелер нақты сызық/баған орындарымен Diagnostic[] ретінде қайтарылады.
  • Тексеру — 4 өту: құрылымдық тұтастық → семантикалық шектеулерді тексеру → ақпарат туралы кеңестер → WCAG 2.1 контраст және жапсырма ұзындығына қолжетімділік.
  • Экспорт — тексерілген IR DOT (Graphviz), Cytoscape.js JSON немесе жоғалтпайтын JSON IR түрлендіріледі.
  • Render — DOT шығысы SVG немесе PNG пиксельді тамаша шығару үшін Graphviz бағдарламасына жіберіледі.

Толық мысал

Бұл .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 }
}
💡

Қазір көріңіз

Жоғарыдағы мысалды Диаграмма жасаушы редакторына қойып, Тексеру түймешігін басыңыз — сіз жол нөмірлері бар терілген диагностиканы көресіз, содан кейін бір рет басу арқылы SVG-ге көрсетіңіз.

Функцияның қысқаша мазмұны

23 түйін түрі21 шет түріWCAG 2.1 AA/AAAJSON схемасының жобасы-07SVG · PNG · DOT · CytoscapeИмпорттау/Жазу

Бірінші диаграмманы жазу үшін Quick Start бөліміне өтіңіз немесе толық синтаксис үшін тікелей Language Reference-ге өтіңіз.

Schema v1 · Updated September 2026