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 pub.dev. I got this from this article https://zenn.dev/noboru_i/articles/ea02828f33deaa

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 https://github.com/rrousselGit/riverpod.git --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 . > graph.md


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

Comments

Post a Comment

Popular posts from this blog

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

Image
The Windows Subsystem for Linux operates as a virtual machine that can dynamically grow the amount of RAM to a maximum set at startup time.  Microsoft sets a default maximum RAM available to 50% of the physical memory and a swap-space that is 1/4 of the maximum WSL RAM.  You can scale those numbers up or down to allocate more or less RAM to the Linux instance. The first drawing shows the default WSL memory and swap space sizing. The images below show a developer machine that is running a dev environment in WSL2 and Docker Desktop.  Docker Desktop has two of its own WSL modules that need to be accounted for.  You can see that the memory would actually be oversubscribed, 3 x 50% if every VM used its maximum memory.  The actual amount of memory used is significantly smaller allowing every piece to fit. Click to Enlarge The second drawing shows the memory allocation on my 64GB laptop. WSL Linux defaults to a maximum RAM size of 5
Read more

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

Image
I do a lot of my development and configuration via ssh into my Raspberry Pi Zero over the RNDIS connection. Some models of the Raspberry PIs can be configured with  gadget drivers  that let the Raspberry pi emulate different devices when plugged into computers via USB. My favorite gadget  is the network profile that makes a Raspberry Pi look like an RNDIS-attached network device.  All types of network services travel over an RNDIS device without knowing it is a USB hardware connection. A Raspberry Pi shows up as a Remote NDIS (RNDIS) device when you plug the Pi into a PC or Mac via a USB cable. The gadget  in the Windows Device Manager picture shows this RNDIS Gadget connectivity between a Windows machine and a Raspberry Pi. The Problem Windows 11 and Windows 10 no longer auto-installs the RNDIS driver that makes magic happen. Windows recognizes that the Raspberry Pi is some type of generic USB COM device. Manually running W indows Update  or  Update Driver  does  not  install the RNDI
Read more

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

Image
I wanted to access all my Azure resources without making any of them visible to the Internet.   The easiest give my local machine access to everything on my Azure Virtual Network (VNET) was to connect to it over VPN. It turns out creating Azure VPN gateways and connecting to Azure VPN endpoints is easy.  There are some subtleties in getting DNS name resolution to work that can confuse when first starting out. Setting the Stage There are a few ways to get to Azure endpoints and resources that are blocked from the internet.  We can  Create a Point-to-Site connection from our local machines to Azure Network Gateways Create a Site-to-Site network connection from our local networks to Azure Network Gateways. Use Bastion Hosts Use Cloud Shell Leave everything open to the internet. I chose a Point-to-Site (P2S) VPN connection that connects from my laptop to a VNet Gateway.  That joins my laptop
Read more