chore: updating readme (#429)

## **Description**

This PR fixes the dependency graph generation in the README.md by
correcting the relationships between packages. Previously, the graph was
showing incorrect dependencies, making every package appear as a
dependency of each other.

Specific changes:
1. Added correct dependency relationships
2. The dependency graph now accurately represents the actual package
relationships in the monorepo

This change ensures that the README's dependency graph is an accurate
representation of the project's package structure, making it easier for
developers to understand the relationships between different packages.

## **Related issues**

Fixes: N/A

## **Manual testing steps**

1. Run `yarn update-readme-content` to generate the updated dependency
graph
2. Verify that the new dependency relationships are correct

## **Screenshots/Recordings**

### **Before**
The dependency graph showed incorrect relationships between packages.

![Screenshot 2025-02-12 at 4 22
24 PM](https://github.com/user-attachments/assets/605ad84d-60dc-40db-b2e5-a127ad52712e)


### **After**
![Screenshot 2025-02-12 at 4 21
40 PM](https://github.com/user-attachments/assets/f136746b-6cb5-4795-8a2c-21a067c56d26)

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs)
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

Author: georgewrmarshall

README.md

@@ -30,7 +30,11 @@ linkStyle default opacity:0.5
   design_system_twrnc_preset(["@metamask/design-system-twrnc-preset"]);
   design_tokens(["@metamask/design-tokens"]);
   design_system_react --> design_system_tailwind_preset;
+  design_system_react --> design_tokens;
   design_system_react_native --> design_system_twrnc_preset;
+  design_system_tailwind_preset --> design_tokens;
+  design_system_twrnc_preset --> design_tokens;
+  design_tokens --> design_system_react;
 ```
 
 <!-- end dependency graph -->

scripts/update-readme-content.ts

@@ -7,7 +7,7 @@ import path from 'path';
 type Workspace = {
   location: string;
   name: string;
-  workspaceDependencies: string[];
+  dependencies: string[];
 };
 
 const DEPENDENCY_GRAPH_START_MARKER = '<!-- start dependency graph -->';
@@ -56,7 +56,33 @@ async function retrieveWorkspaces(): Promise<Workspace[]> {
     '--verbose',
   ]);
 
-  return stdout.split('\n').map((line) => JSON.parse(line));
+  const workspaces = stdout.split('\n').map((line) => JSON.parse(line));
+
+  // Get actual dependencies for each workspace
+  return Promise.all(
+    workspaces.map(async (workspace) => {
+      const packageJsonPath = path.join(
+        process.cwd(),
+        workspace.location,
+        'package.json',
+      );
+      const packageJson = JSON.parse(
+        await fs.promises.readFile(packageJsonPath, 'utf8'),
+      );
+
+      // Collect all dependencies that are workspace packages
+      const deps = [
+        ...Object.keys(packageJson.dependencies || {}),
+        ...Object.keys(packageJson.devDependencies || {}),
+        ...Object.keys(packageJson.peerDependencies || {}),
+      ].filter((dep) => dep.startsWith('@metamask/'));
+
+      return {
+        ...workspace,
+        dependencies: deps,
+      };
+    }),
+  );
 }
 
 /**
@@ -99,16 +125,21 @@ function buildMermaidNodeLines(workspaces: Workspace[]): string[] {
  */
 function buildMermaidConnectionLines(workspaces: Workspace[]): string[] {
   const connections: string[] = [];
+  const workspacesByName = new Map(workspaces.map((w) => [w.name, w]));
+
   workspaces.forEach((workspace) => {
-    const fullPackageName = workspace.name;
-    const shortPackageName = fullPackageName
+    const shortPackageName = workspace.name
       .replace(/^@metamask\//u, '')
       .replace(/-/gu, '_');
-    workspace.workspaceDependencies.forEach((dependency) => {
-      const shortDependencyName = dependency
-        .replace(/^packages\//u, '')
-        .replace(/-/gu, '_');
-      connections.push(`${shortPackageName} --> ${shortDependencyName};`);
+
+    workspace.dependencies.forEach((dependencyName) => {
+      // Only create connection if dependency is a workspace package
+      if (workspacesByName.has(dependencyName)) {
+        const shortDependencyName = dependencyName
+          .replace(/^@metamask\//u, '')
+          .replace(/-/gu, '_');
+        connections.push(`${shortPackageName} --> ${shortDependencyName};`);
+      }
     });
   });
   return connections;