Diagram MakerOverview
🗂️

Overview

What the Diagram Maker is and how it works

Mikä on grafiikan tekijä?

Diagram Maker on tekstin ensimmäisen arkkitehtuurin kaavaus työkalu, joka perustuu Datro DSL rakenteelliseen, validoituun ja kanonisesti muotoiltuun kielelle ohjelmistojärjestelmien kuvaamiseen dataa, ei kuvia.

Sen sijaan, että vetäisit laatikkoja näyttöön, kirjoita .dtro-Tiedosto. Se analysoi sen, validoi arkkitehtuurin sääntöjä, pakottaa WCAG:n ristiriidasuhteita ja palauttaa sen SVG, PNG tai interaktiiviseen JSON:een - kaikki yhdestä totuuden lähteestä.

Avaa kaavioiden tekijä

Kirjoita, validoi ja esittää ensimmäinen kaavio muutamassa minuutissa.

Miksi Datro mermaid tai draw.io?

  • Tyypilliset kytkät 23 semanttista tyyppiä (service, database, gateway, queue, …) luovat automaattisesti johdonmukaisia, tarkkoja kaavioita.
  • Tyypilliset kantat 21 semantiikkaa (http, query, publish, grpc, …) koodaa ja muokata yhteydet ilman käsikirjoituksia.
  • Arkkitehtoniset rajoitukset Kirjoita säännöt database!-> external Validaattori pakottaa ne analyysi- eikä tarkastusvaiheeseen.
  • Kanoniset kouluttajatdatro fmt diff näyttää todellisia muutoksia, ei uudelleenmuodostuksen ääntä.
  • Importaatio ja luominen import, Namespace-aliasing ja Whitelististen jakelu monille tiedostoille.
  • WCAG 2.1-vaikutusvapaus Kontrastin suhteet tarkistetaan automaattisesti aihealueesi perusteella; W602 Se käynnistyy, kun olet AA:n alle.
  • Koneen lukemassa oleva JSON IR jokainen kaavio vie menetelmättömän JSON IR:n, jota voi käyttää jokainen työkalu, jokainen CI-järjestelmä tai kuka tahansa räätälöity esittäjä.

Kuinka työkalujen ketju toimii

Jokainen .dtro-Tiedosto käy läpi neljä vaihetta ennen kuin siitä tulee kaavio:

1 · Analysoida2 · Validointi3 · Vientiä4 · Tuotanto
  • Parsen rekursiivinen lekseri + parser muuttaa lähteen tekstin DatroIR-Aineisto. Se ei koskaan heittää; kaikki ongelmat tulevat Diagnostic[] palautettava täsmällisiä riviä/ sarakkeja.
  • Validointi 4 kierrosta: rakenteellinen koskemattomuus → semanttinen rajoitus tarkastus → ohjeet → WCAG 2.1-vastaisuus ja merkkien pituuden saavutettavuus.
  • Export validoitu IR muunnetaan DOT (Graphviz), Cytoscape.js JSONiksi tai tappioimattomaksi JSON IR:ksi.
  • Toiminta DOT-muodostus siirretään Graphvizille luomaan pikseliä tarkkaa SVG tai PNG-muodostusta.

Täydellinen esimerkki

Nämä ovat .dtro-Tiedosto määrittelee maksupalvelun, jossa on ryhmät, kirjoitetut kytket, semanttiset reunat, rajoitus sääntö, rakenneohjeet ja WCAG:n tarkistettu väritema:

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 }
}
💡

Kokeile nyt

Lisää edellä oleva esimerkki diagrammin tekijä-editoriin ja napsauta Valid“. Näet kirjoitetun diagnoosin, jossa on linjanumeroja, ja voit esittää sen SVG:ssä vain klikkaamalla.

Toiminnan yhteenveto

23 Tyyppiset kytket21 KantelajeetWCAG 2.1 AA/AAAJSON-suunnitelma-07SVG · PNG · DOT · CytoscapeTuoda / kirjoittaa

Jatka Quick Start kirjoittamaan ensimmäinen kaavio, tai hyppää suoraan Language Reference saadaksesi täydellisen syntaktasin.

Schema v1 · Updated September 2026