Overview

Diagram Maker は、Datro DSL をベースに構築されたテキストファーストのアーキテクチャ図作成ツールです。Datro DSL は、ソフトウェア システムを画像ではなくデータとして記述するための、構造化され、検証され、正規フォーマットされた言語です。

キャンバス上でボックスをドラッグする代わりに、.dtro ファイルを作成します。ツールチェーンは、データを解析し、アーキテクチャ ルールを検証し、WCAG コントラスト比を適用し、SVG、PNG、またはインタラクティブな JSON にレンダリングします。これらはすべて、単一の真実のソースから行われます。

• 型付きノード — 23 のセマンティック タイプ (service、database、gateway、queue、…) により、一貫性のある正しい形状の図が自動的に生成されます。
• 型付きエッジ — 21 種類のセマンティック (http、query、publish、grpc、…) により、手動でオーバーライドすることなく接続を色分けし、スタイルを設定します。
• アーキテクチャ上の制約 — database !-> external のようなルールを作成すると、バリデーターはレビュー時ではなく解析時にルールを適用します。
• 正規フォーマッタ — datro fmt はすべてのファイルを確定的な形式に書き換えます。 diff は、再フォーマットされたノイズではなく、実際の変更を示します。
• インポートと作成 — import、名前空間のエイリアスを使用して大きな図をファイル間で分割し、ホワイトリストを公開します。
• WCAG 2.1 アクセシビリティ — テーマ パレットに対してコントラスト比が自動的にチェックされます。 W602はAAを下回ると発射されます。
• 機械可読な JSON IR — すべての図は、ツールチェーン、CI システム、またはカスタム レンダラーで使用できるロスレス JSON IR をエクスポートします。

すべての .dtro ファイルは、図になる前に 4 つの段階を経ます。

• 解析 — 再帰降下レクサー + パーサーは、ソース テキストを DatroIR オブジェクトに変換します。決して投げません。すべての問題は、正確な行/列の位置を含む Diagnostic[] として返されます。
• 検証 — 4 パス: 構造的整合性 → セマンティック制約チェック → 情報ヒント → WCAG 2.1 コントラストとラベル長アクセシビリティ。
• エクスポート — 検証された IR は、DOT (Graphviz)、Cytoscape.js JSON、またはロスレス JSON IR に変換されます。
• レンダリング — DOT 出力は Graphviz に渡され、SVG または PNG ピクセルパーフェクト出力が生成されます。

この .dtro ファイルは、グループ、型付きノード、セマンティック エッジ、制約ルール、レイアウト ヒント、および WCAG チェック済みのカラー テーマをすべて 1 つのファイルで定義した支払いサービスを定義します。

#!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 }
}

Quick Start に進んで最初の図を作成するか、Language Reference に直接ジャンプして完全な構文を確認してください。