Graph Visualization
Visualize task and project graphs in multiple formats
Graph Visualization
The task runner provides multiple output formats for visualizing task graphs and project dependency graphs.
Formats
DOT (Graphviz)
import { toGraphvizDot } from "@visulima/task-runner";
const dot = toGraphvizDot(taskGraph, {
focusedTasks: ["app:build"], // Highlight specific tasks
taskStatuses: taskStatusMap, // Color by execution status
groupByProject: true, // Group tasks by project
});
// Render with: dot -Tpng graph.dot -o graph.pngJSON
import { toGraphJson } from "@visulima/task-runner";
const json = toGraphJson(taskGraph);
// { nodes: [...], edges: [...] }HTML (Self-contained)
import { toGraphHtml } from "@visulima/task-runner";
const html = toGraphHtml(taskGraph);
// Self-contained HTML page with embedded visualizationASCII
import { toGraphAscii } from "@visulima/task-runner";
const ascii = toGraphAscii(taskGraph);
// app:build
// ├── lib-a:build
// │ └── shared:build
// └── lib-b:build
// └── shared:build (*)Project Graph
import { projectGraphToDot } from "@visulima/task-runner";
const dot = projectGraphToDot(projectGraph);
// Generates DOT with different colors for applications vs libraries
// and dashed edges for implicit dependencies