Task runnerGuidesGraph Visualization

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.png

JSON

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 visualization

ASCII

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
Support

Contribute to our work and keep us going

Community is the heart of open source. The success of our packages wouldn't be possible without the incredible contributions of users, testers, and developers who collaborate with us every day.Want to get involved? Here are some tips on how you can make a meaningful impact on our open source projects.

Ready to help us out?

Be sure to check out the package's contribution guidelines first. They'll walk you through the process on how to properly submit an issue or pull request to our repositories.

Submit a pull request

Found something to improve? Fork the repo, make your changes, and open a PR. We review every contribution and provide feedback to help you get merged.

Good first issues

Simple issues suited for people new to open source development, and often a good place to start working on a package.
View good first issues