dare-dag-viz

/dare-dag-viz — Visualizar DAG com Excalidraw

Gera diagrama interativo .excalidraw a partir do dare-dag.yaml atual, com cores semânticas por complexidade e status visual das tasks.

O que faz

1. Lê DARE/dare-dag.yaml (grafo de tasks + dependências)
2. Mapeia cada task para um retângulo Excalidraw com:
   • Cor baseada em complexity (LOW=azul, MED=laranja, HIGH=rosa)
   • Status visual (PENDING/RUNNING/DONE/FAILED)
   • ID + nome da task
3. Agrupa tasks por rank em colunas verticais (swim lanes)
4. Cria setas para cada dependência (depends_on)
5. Salva em DARE/dag-graph.excalidraw

Output é um arquivo editável e interativo — abre direto em https://excalidraw.com.

Convenções visuais

Referência: /docs/DESIGN-TOKENS-EXCALIDRAW.md

Cores por complexidade:

• 🔵 Azul (#e3f2fd) = LOW
• 🟠 Laranja (#fff3e0) = MEDIUM
• 🔴 Rosa (#fce4ec) = HIGH

Status:

• ⏳ PENDING = cinza, stroke normal
• ⚙️ RUNNING = azul, stroke pontilhado
• ✅ DONE = verde
• ❌ FAILED = vermelho

Posicionamento:

• Cada task ocupa 120×60px
• Tasks no mesmo rank ficam lado a lado (swim lane)
• Setas conectam dependências

Exemplo de output

Arquivo DARE/dag-graph.excalidraw com estrutura:

Rank 1
├── task-001 (LOW, DONE)
├── task-002 (HIGH, PENDING)

Rank 2
├── task-003 (MEDIUM, RUNNING) ← depende de task-001
├── task-004 (LOW, PENDING) ← depende de task-001

Rank 3
└── task-005 (HIGH, PENDING) ← depende de task-003 e task-004

Como usar

Primeira vez

/dare-dag-viz

Claude Code vai:

1. Ler DARE/dare-dag.yaml
2. Gerar JSON .excalidraw
3. Salvar em DARE/dag-graph.excalidraw
4. Output: "✅ DAG gerado — abra em https://excalidraw.com"

Atualizar após mudanças

Sempre que você atualiza dare-dag.yaml:

/dare-dag-viz

Isso regenera o diagrama com as novas tasks/dependências.

Abrir e editar

1. Acesse https://excalidraw.com
2. File → Open → selecione DARE/dag-graph.excalidraw
3. Edite livremente:
   • Mova elementos
   • Customize cores/textos
   • Adicione anotações
4. Salve no mesmo arquivo