Visualizing Flutter Dependency Graphs with Graphviz and the gviz Library

Flutter developers often struggle with complex component hierarchies and tangled dependency relationships; this guide shows how to make those relationships transparent by generating visual dependency graphs.

1. Industry Technical Survey

For Android, Gradle tasks can traverse projects and output .dot files for Graphviz; for iOS, CocoaPods can parse Podfile and produce similar visualizations. Flutter lacks a mature solution, but the gviz library offers a comparable approach.

2. What is Graphviz?

Graphviz is an open‑source graph visualization tool that uses the DOT language to describe nodes and edges, handling layout automatically and supporting many output formats (PNG, SVG, PDF, etc.).

3. Demo Project

A simple Flutter demo uses pubspec.yaml to declare dependencies. Example snippets:

name: moudule_a
version: 1.0.0
environment:
sdk: '>=2.17.0 <3.0.0'
dependencies:
path: ^1.8.0
module_b:
path: module_b

and for module_b :

name: moudule_b
version: 0.0.1
environment:
sdk: '>=2.17.0 <3.0.0'
dependencies:
meta: 1.7.0

4. Implementation Steps

The process consists of three major phases:

4.1 Project Dependency Analysis

Read the root pubspec.yaml using the yaml package (e.g., yaml: ^3.0.0 ) and parse it into a Pubspec object:

Pubspec rootPubspec() {
assert(Directory(rootPackageDir).existsSync(), '`$rootPackageDir` does not exist.');
final pubspecPath = p.join(rootPackageDir, 'pubspec.yaml');
return Pubspec.parse(File(pubspecPath).readAsStringSync(), sourceUrl: Uri.parse(pubspecPath));
}

For sub‑modules, invoke the Flutter CLI command flutter pub deps -s list to obtain a textual dependency tree, then parse it with a custom DepsList class using regular expressions.

4.2 Dependency Format Conversion

Both root and sub‑module data are transformed into a unified VizPackage model, which holds a package name, version, and a set of Dependency objects. Example conversion:

VizPackage addPkg(VersionedEntry key, Map
value) {
final pkg = VizPackage(
key.name,
key.version,
SplayTreeSet.of(value.entries.where((e) => !_ignoredPackages.contains(e.key)).map((e) => Dependency(e.key, e.value.toString(), false))),
flagOutdated ? _latest(key.name) : null,
);
return pkg;
}

4.3 Merging and DOT Generation

All VizPackage instances are stored in a Map . The toDot function iterates over this map, creates a Gviz object, and writes DOT nodes and edges, optionally escaping labels and ignoring specified packages.

String toDot(Map
packages, {bool escapeLabels = false, Iterable
ignorePackages = const []}) {
final gviz = Gviz(name: 'demo', graphProperties: {'nodesep': '0.2'}, edgeProperties: {'fontcolor': 'gray'});
for (var pkg in packages.values.where((v) => !ignorePackages.contains(v.name))) {
gviz.addBlankLine();
_writeDot(pkg, gviz, 'demo', escapeLabels, ignorePackages);
}
return gviz.toString();
}

The resulting DOT file can be rendered with Graphviz:

brew install graphviz
dot x.dot -Tpng -o x.png

5. Filtering Noise

Large projects generate noisy graphs containing many third‑party libraries. The article proposes whitelist/blacklist rules in pubspec.yaml (e.g., dependency_rules: include: - search - chat ) or directory‑based include/exclude patterns to filter the graph to business‑relevant components.

6. Conclusion

By combining YAML parsing, CLI dependency extraction, a unified data model, and Graphviz rendering, developers obtain clear visualizations of Flutter module dependencies, facilitating architecture reviews, refactoring, and better component decoupling.