Diagram MakerOverview
🗂️

Overview

What the Diagram Maker is and how it works

O que é o Criador de Diagramas?

O Diagram Maker é uma ferramenta de diagramação de arquitetura baseada em texto construída no Datro DSL — uma linguagem estruturada, validada e formatada canonicamente para descrever sistemas de software como dados, não como imagens.

Em vez de arrastar caixas em uma tela, você escreve um arquivo .dtro. O conjunto de ferramentas analisa, valida regras de arquitetura, aplica taxas de contraste WCAG e renderiza em SVG, PNG ou JSON interativo — tudo a partir de uma única fonte de verdade.

Abra o Criador de Diagramas

Escreva, valide e renderize seu primeiro diagrama em minutos.

Por que Datro em vez de Mermaid ou draw.io?

  • Nós digitados — 23 tipos semânticos (service, database, gateway, queue, …) produzem diagramas consistentes e com formato correto automaticamente.
  • Bordas digitadas — 21 tipos semânticos (http, query, publish, grpc, …) codificam por cores e estilizam suas conexões sem substituições manuais.
  • Restrições arquitetônicas — escreva regras como database !-> external e o validador as aplica no momento da análise, não no momento da revisão.
  • Formatador canônicodatro fmt reescreve cada arquivo em um formato determinístico; diff mostra mudanças reais, sem ruído de reformatação.
  • Importar e compor — divida diagramas grandes em arquivos usando import, alias de namespace e exponha listas de permissões.
  • Acessibilidade WCAG 2.1 — as taxas de contraste são verificadas automaticamente em relação à sua paleta de temas; W602 dispara quando você cai abaixo de AA.
  • JSON IR legível por máquina — cada diagrama exporta um JSON IR sem perdas consumível por qualquer conjunto de ferramentas, sistema de CI ou renderizador personalizado.

Como funciona o conjunto de ferramentas

Cada arquivo .dtro passa por quatro estágios antes de se tornar um diagrama:

1 · Analisar2 · Validar3 · Exportar4 · Renderizar
  • Analisar — o lexer + analisador descendente recursivo converte seu texto fonte em um objeto DatroIR. Nunca joga; todos os problemas são retornados como Diagnostic[] com localizações precisas de linhas/colunas.
  • Validar — 4 passagens: integridade estrutural → verificação de restrições semânticas → dicas de informações → contraste WCAG 2.1 e acessibilidade de comprimento de etiqueta.
  • Exportar — o IR validado é convertido em DOT (Graphviz), Cytoscape.js JSON ou JSON IR sem perdas.
  • Render — a saída DOT é passada para o Graphviz para produzir uma saída SVG ou PNG com pixels perfeitos.

Um exemplo completo

Este arquivo .dtro define um serviço de pagamento com grupos, nós digitados, bordas semânticas, uma regra de restrição, dicas de layout e um tema de cores verificado pelas WCAG - tudo em um arquivo:

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

Experimente agora

Cole o exemplo acima no editor Diagram Maker e clique em Validar — você verá diagnósticos digitados com números de linha e, em seguida, renderizará para SVG com um clique.

Resumo de recursos

23 tipos de nós21 tipos de bordaWCAG 2.1 AA/AAARascunho do esquema JSON-07SVG · PNG · DOT · CytoscapeImportar/Escrever

Continue em Quick Start para escrever seu primeiro diagrama ou vá direto para Language Reference para obter a sintaxe completa.

Schema v1 · Updated September 2026