Get a better understanding of your Flutter Riverpod dependency graph with the riverpod_graph markup generator

Pictures make it easier to understand how an application is wired together.  This is especially true if your application is reactive with different modules listening for changes and making data changes.  Riverpod has a graph generator that can show you how its providers are wired together.

Opt 1: Use a checked-out copy of the Riverpod GitHub repo

I generated the following diagram for the example todos application using these riverpod_graph commands. They assume that I have the Riverpod git repository checked out and that I am in a terminal sitting in the root of the repository.  The riverpod_graph command accepts the analysis target root as a parameter. I explicitly specified the lib directory here to make sure we didn't pick up any dependencies on utilities or tests.

This approach makes sense if you think you want to work on the riverpod_graph project or that you always want the latest from git and don't want to remember to activate later versions.

mermaid.js format

.../riverpod $ cd .packages/riverpod_graph/
.../riverpod/packages/riverpod_graph $ dart run riverpod_graph:riverpod_graph
../../examples/todos/lib -f mermaid

Click to enlarge
This diagram was snipped from a VS Code preview editor.

d2 format

.../riverpod $ cd .packages/riverpod_graph/
.../riverpod/packages/riverpod_graph $ dart run riverpod_graph:riverpod_graph
../../examples/todos/lib -f d2

Opt 2: Activating a copy in the Dart global cache

You can activate a copy of the riverpod_graph repository without cloning it. The project isn't on I got this from this article

Cache the riverpod_graph package with this.  It will download the code and build it.  There is no real version number at this time so it uses 0.0.1

dart pub global activate -sgit --git-path packages/riverpod_graph

Now we can analyze Flutter/Dart projects that use Riverpod and generate graphs in either mermaid.js or d2 output format. 
cd to the directory that contains the project that you wish to analyze

dart pub global run riverpod_graph . >

Deactivating riverpod_graph from your global cache

You can unregister or deactivate riverpod_graph with 

dart pub global deactivate riverpod_graph

Revision History

Created 2023 07


Popular posts from this blog

Understanding your WSL2 RAM and swap - Changing the default 50%-25%

DNS for Azure Point to Site (P2S) VPN - getting the internal IPs

Installing the RNDIS driver on Windows 11 to use USB Raspberry Pi as network attached