Visualize Argo Workflows YAML as interactive DAG / Steps flow diagrams directly in VS Code / Kiro.
Features
- DAG & Steps visualization — Renders
dagtasks as dependency graphs andstepsas sequential/parallel flow charts - Cross-file template resolution — Automatically discovers referenced
WorkflowTemplatefiles 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
WorkflowWorkflowTemplateCronWorkflowClusterWorkflowTemplate
Usage
Open the visualizer
Three ways to trigger:
- Command Palette —
Cmd+Shift+P→Preview Argo Workflow - Editor right-click — Right-click in a
.yaml/.ymlfile →Preview Argo Workflow - Explorer right-click — Right-click a
.yamlfile in the file tree →Preview Argo Workflow
Toolbar
| Button | Function |
|---|---|
| 🔍+ | Zoom in |
| 🔍- | Zoom out |
| ⊞ | Fit all nodes to view |
| ↻ | Refresh (re-parse the file) |
| 📄 | Go back to source file |
| Search | Type to highlight matching nodes, Enter to center on first match |
Interactions
| Action | Effect |
|---|---|
| Scroll wheel | Zoom (up = zoom in, down = zoom out) |
| Drag background | Pan the view |
| Single-click node | Open detail panel showing node config + raw YAML |
| Double-click node | Jump to the node's definition in the source file |
| Click background | Close detail panel |
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