Argo Visualizer

Visualize Argo Workflows YAML as interactive DAG / Steps flow diagrams directly in VS Code / Kiro.

Features

• DAG & Steps visualization — Renders dag tasks as dependency graphs and steps as sequential/parallel flow charts
• Cross-file template resolution — Automatically discovers referenced WorkflowTemplate files in the same directory tree and inline-expands their steps into the parent graph
• Helm template support — Tolerant parser handles {{ .Values.foo }} and {{- if ... }} syntax without crashing
• Interactive graph — Zoom in/out (scroll wheel), pan (drag), fit to view, search nodes
• Detail panel — Click any node to see its configuration (templateRef, arguments, dependencies) and raw YAML snippet
• Jump to source — Double-click a node to jump to its definition in the source file
• Multi-document support — Files with multiple ----separated resources show a dropdown selector

Supported Resource Types

• Workflow
• WorkflowTemplate
• CronWorkflow
• ClusterWorkflowTemplate

Usage

Open the visualizer

Three ways to trigger:

1. Command Palette — Cmd+Shift+P → Preview Argo Workflow
2. Editor right-click — Right-click in a .yaml / .yml file → Preview Argo Workflow
3. Explorer right-click — Right-click a .yaml file in the file tree → Preview Argo Workflow

Toolbar

Interactions

Cross-file template resolution

When a DAG task references a WorkflowTemplate via templateRef, the visualizer searches for that template in sibling .yaml files (same directory, up to 5 levels deep). If found:

• The referenced template's steps are inline-expanded directly into the parent graph
• The flow shows: parent task → first child step → ... → last child step → downstream tasks
• Child nodes are styled differently (amber border = external reference not found locally)

Helm template handling

Files containing Go template syntax ({{ }}) are automatically preprocessed:

• Control flow directives (if/else/end/range/with) are stripped
• Argo escape patterns ({{ \{{...}}` }}`) are unwrapped
• Other expressions are replaced with __HELM__ placeholder
• The DAG/Steps structure remains intact for visualization

Requirements

• VS Code 1.85+ or Kiro
• No additional dependencies needed

Installation

From Marketplace (VS Code)

Search Argo Visualizer in the Extensions panel, or:

ext install taucrus.argo-visualizer

From VSIX (offline / Kiro)

# VS Code
code --install-extension argo-visualizer-0.1.3.vsix

# Kiro (macOS)
/Applications/Kiro.app/Contents/Resources/app/bin/code --install-extension argo-visualizer-0.1.3.vsix

Known Limitations

• Only visualizes the static structure — does not connect to a Kubernetes cluster or show runtime status
• Read-only — cannot edit workflows from the graph view
• Cross-file resolution requires the referenced WorkflowTemplate to be in the same directory tree (up to 5 levels deep)
• Very large workflows (100+ nodes) may render slowly on the initial layout

License

MIT