docs: Moving images inline and changing urls to relative (#5072)

Incorporating feedback from PR -
#4089. Changes made -
1. Moved images to `assets` folder on suggestion
2. Changed URLs from absolute to relative. 
3. Adding an in-line sequence diagram

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Newly added jokes now receive unique identifiers, improving
reliability when creating new entries.

* **Documentation**
* Updated links to internal paths for SSR, router concepts, and React
Query sections.
* Switched images to repository-hosted assets for consistency and
availability.
* Replaced the data flow image with an inline Mermaid sequence diagram
covering home-page loading and add-joke flows, including data refresh
behavior.
  * Minor formatting cleanup.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: shrutikapoor08

docs/router/assets/reading-writing-file-devjokes-1.png

@@ -26,9 +26,9 @@ The complete code for this tutorial is available on [GitHub](https://github.com/
 
 ## Nice to know
 
-- [Server Side Rendering (SSR)](https://tanstack.com/router/latest/docs/framework/react/guide/ssr)
-- [TanStack Router concepts](https://tanstack.com/router/latest/docs/framework/react/routing/routing-concepts)
-- [React Query concepts](https://tanstack.com/query/latest/docs/framework/react/overview)
+- [Server Side Rendering (SSR)](/router/latest/docs/framework/react/guide/ssr)
+- [TanStack Router concepts](/router/latest/docs/framework/react/routing/routing-concepts)
+- [React Query concepts](/query/latest/docs/framework/react/overview)
 
 ## Setting up a TanStack Start Project
 
@@ -96,7 +96,7 @@ Once your project is set up, you can access your app at `localhost:3000`. You sh
 
 At this point, your app will look like this -
 
-![TanStack Start Welcome Page After Setup](https://res.cloudinary.com/dubc3wnbv/image/upload/v1746312482/Photo-1_lpechn.png)
+![TanStack Start Welcome Page After Setup](https://raw.githubusercontent.com/TanStack/router/main/docs/router/assets/reading-writing-file-setup.png)
 
 ## Step 1: Reading Data From a File
 
@@ -164,7 +164,6 @@ Let's create a new file `src/serverActions/jokesActions.ts` to create a server f
 
 ```tsx
 // src/serverActions/jokesActions.ts
-
 import { createServerFn } from '@tanstack/react-start'
 import * as fs from 'node:fs'
 import type { JokesData } from '../types'
@@ -247,7 +246,7 @@ When the page loads, `jokes` will have data from the `jokes.json` file already!
 
 With a little Tailwind styling, the app should look like this:
 
-![DevJoke App with 5 DevJokes](https://res.cloudinary.com/dubc3wnbv/image/upload/v1746313558/Screenshot_2025-05-03_at_4.04.50_PM_w0eern.png)
+![DevJoke App with 5 DevJokes](https://raw.githubusercontent.com/TanStack/router/main/docs/router/assets/reading-writing-file-devjokes-1.jpg)
 
 ## Step 2: Writing Data to a File
 
@@ -445,7 +444,7 @@ export function JokeForm() {
 ```
 
 With this, our UI should look like this:
-![DevJoke App with Form to Add Jokes](https://res.cloudinary.com/dubc3wnbv/image/upload/v1746356983/Screenshot_2025-05-04_at_4.06.57_AM_dkgvsm.png)
+![DevJoke App with Form to Add Jokes](https://raw.githubusercontent.com/TanStack/router/main/docs/router/assets/reading-writing-file-devjokes-2.jpg)
 
 ## Understanding How It All Works Together
 
@@ -472,7 +471,37 @@ Let's break down how the different parts of our application work together:
 
 ### Data Flow
 
-![Data Flow Diagram](https://res.cloudinary.com/dubc3wnbv/image/upload/v1746437057/Screenshot_2025-05-05_at_2.23.11_AM_wxfz2m.png)
+```mermaid
+sequenceDiagram
+autonumber
+actor User
+participant UI as Browser (HomePage + Form)
+participant Loader as Route Loader (loader)
+participant Server
+participant Store as jokes.json
+
+%% Visiting the Home Page
+User ->> UI: Visit /
+UI ->> Loader: loader() calls getJokes()
+Loader ->> Server: getJokes()
+Server ->> Store: Read jokes.json
+Store -->> Server: jokes data
+Server -->> Loader: jokes[]
+Loader -->> UI: useLoaderData() → jokes[]
+
+%% Adding a New Joke
+User ->> UI: Fill form and submit
+UI ->> Server: handleSubmit → addJoke(newJoke)
+Server ->> Store: Read jokes.json
+Server ->> Store: Write updated jokes.json
+Server -->> UI: addJoke() resolved
+UI ->> Loader: router.invalidate() (re-run loader)
+Loader ->> Server: getJokes()
+Server ->> Store: Read jokes.json
+Store -->> Server: updated jokes[]
+Server -->> Loader: updated jokes[]
+Loader -->> UI: useLoaderData() → updated jokes[]
+```
 
 When a user visits the home page: