Forem: Rushikesh Surve

Microservices Authentication & Authorization: A Beginner's Guide

Rushikesh Surve — Wed, 26 Nov 2025 18:26:32 +0000

Hello there! If you've ever felt overwhelmed by the idea of securing a microservices architecture, you are not alone. It's a common stumbling block. In a monolithic app, you just check the session in one place. But when you have 5, 10, or 50 services, how do you make sure only the right people get in?

Today, we're going to build a robust, production-ready authentication flow using Node.js. We'll use a pattern that is both scalable and easy to understand: Gateway Authentication and Service-Level Authorization.

By the end of this tutorial, you'll have a working system with 3 services:

API Gateway: The entry point (The Bouncer).
Auth Service: Handles Login (The ID Issuer).
Custom Service: A demo service with Public, User, and Admin routes.

Let's dive in!

The Architecture

Before we write code, let's visualize what we are building.

We want a central entry point (API Gateway) that handles the "Who are you?" question (Authentication). Once confirmed, it passes the request to the specific service, which handles the "Are you allowed here?" question (Authorization).

Project Setup

Let's keep it simple. We'll simulate three services in one folder for this demo.

Create a folder and initialize:

mkdir microservices-auth-demo
cd microservices-auth-demo
npm init -y

Install Dependencies:

npm install express jsonwebtoken http-proxy-middleware dotenv

Folder Structure:
Create three folders inside:
- auth-service
- gateway
- custom-service

Step 1: The Auth Service

The Identity Provider

This service is responsible for validating credentials and issuing tokens.

Create auth-service/index.js:

const express = require('express');
const jwt = require('jsonwebtoken');
const app = express();

app.use(express.json());

const JWT_SECRET = 'super-secret-key';

// Mock User Database
const users = [
    { id: 1, username: 'alice', password: 'password123', role: 'admin' },
    { id: 2, username: 'bob', password: 'password123', role: 'user' }
];

app.post('/login', (req, res) => {
    const { username, password } = req.body;

    const user = users.find(u => u.username === username && u.password === password);

    if (!user) {
        return res.status(401).json({ message: 'Invalid credentials' });
    }

    // Generate Token with Role
    const token = jwt.sign(
        { userId: user.id, role: user.role, username: user.username }, 
        JWT_SECRET, 
        { expiresIn: '1h' }
    );

    res.json({ token });
});

app.listen(3001, () => {
    console.log('Auth Service running on port 3001');
});

Step 2: The API Gateway

The Bouncer

The Gateway intercepts requests. It needs to know which routes are Public and which are Protected.

We want:

/auth -> Public (Login)
/custom/public -> Public (No token needed)
/custom (everything else) -> Protected (Token required)

Create gateway/index.js:

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const jwt = require('jsonwebtoken');

const app = express();
const JWT_SECRET = 'super-secret-key';

// --- Authentication Middleware ---
const verifyToken = (req, res, next) => {
    const authHeader = req.headers['authorization'];

    if (!authHeader) {
        return res.status(401).json({ message: 'No token provided' });
    }

    const token = authHeader.split(' ')[1];

    try {
        const decoded = jwt.verify(token, JWT_SECRET);
        // Pass user info to downstream via Headers
        req.headers['x-user-id'] = decoded.userId;
        req.headers['x-user-role'] = decoded.role;
        next();
    } catch (error) {
        return res.status(401).json({ message: 'Invalid token' });
    }
};

// --- Routes ---

// 1. Auth Service (Public)
app.use('/auth', createProxyMiddleware({ 
    target: 'http://localhost:3001', 
    changeOrigin: true,
    pathRewrite: { '^/auth': '' },
}));

// 2. Custom Service - Public Endpoint
// Note: We place this BEFORE the protected route so it matches first!
app.use('/custom/public', createProxyMiddleware({ 
    target: 'http://localhost:3002', 
    changeOrigin: true,
    // We don't rewrite path here because we want the service to receive '/public'
    // But wait, if we forward '/custom/public' to localhost:3002/custom/public, 
    // the service needs to listen on /custom/public OR we rewrite.
    // Let's rewrite so the service just sees '/public'
    pathRewrite: { '^/custom': '' }, 
}));

// 3. Custom Service - Protected Endpoints
// Everything else under /custom requires a token
app.use('/custom', verifyToken, createProxyMiddleware({ 
    target: 'http://localhost:3002', 
    changeOrigin: true,
    pathRewrite: { '^/custom': '' },
}));

app.listen(3000, () => {
    console.log('API Gateway running on port 3000');
});

Step 3: The Custom Service

The VIP Area

This service has 3 types of routes:

Public: Accessible by anyone (Gateway let it through).
Protected (User): Accessible by any logged-in user.
Protected (Admin): Accessible only by admins.

Create custom-service/index.js:

const express = require('express');
const app = express();

// --- Authorization Middleware ---
const requireRole = (allowedRole) => {
    return (req, res, next) => {
        const userRole = req.headers['x-user-role'];
        if (userRole !== allowedRole) {
            return res.status(403).json({ message: 'Forbidden: Admins only' });
        }
        next();
    };
};

// 1. Public Route
app.get('/public', (req, res) => {
    res.json({ message: 'This is a public endpoint. Everyone is welcome!' });
});

// 2. Protected Route (Any Authenticated User)
// If the request reached here via the protected Gateway route, 
// it MUST have headers.
app.get('/profile', (req, res) => {
    const userId = req.headers['x-user-id'];
    const userRole = req.headers['x-user-role'];
    res.json({ 
        message: 'This is a protected endpoint.', 
        user: { id: userId, role: userRole } 
    });
});

// 3. Protected Route (Admin Only)
app.get('/admin', requireRole('admin'), (req, res) => {
    res.json({ message: 'Welcome to the Admin Dashboard!' });
});

app.listen(3002, () => {
    console.log('Custom Service running on port 3002');
});

Step 4: Testing It Out

Open 3 terminal windows:

node auth-service/index.js
node custom-service/index.js
node gateway/index.js

Scenario A: Public Route (No Token)

curl http://localhost:3000/custom/public
# Output: {"message":"This is a public endpoint. Everyone is welcome!"}

Result: Success! Gateway let it through without checking auth.

Scenario B: Protected Route (No Token)

curl http://localhost:3000/custom/profile
# Output: {"message":"No token provided"}

Result: Blocked by Gateway.

Scenario C: Login as 'bob' (User)

curl -X POST http://localhost:3000/auth/login \
     -H "Content-Type: application/json" \
     -d '{"username":"bob", "password":"password123"}'
# Copy the token...

Scenario D: Access Profile (User Role)

curl http://localhost:3000/custom/profile -H "Authorization: Bearer <BOB_TOKEN>"
# Output: {"message":"This is a protected endpoint.", "user":{...}}

Result: Success!

Scenario E: Access Admin (User Role)

curl http://localhost:3000/custom/admin -H "Authorization: Bearer <BOB_TOKEN>"
# Output: {"message":"Forbidden: Admins only"}

Result: Blocked by Service (AuthZ).

Scenario F: Access Admin (Admin Role)
Login as alice and try again.

curl http://localhost:3000/custom/admin -H "Authorization: Bearer <ALICE_TOKEN>"
# Output: {"message":"Welcome to the Admin Dashboard!"}

Result: Success!

Conclusion

You now have a flexible system. The Gateway handles the heavy lifting of checking tokens for protected routes, while allowing public routes to bypass it. The Services enforce fine-grained permissions.

Happy Coding!

🐳 Docker Deserves a Place Beside Git — Here’s Why

Rushikesh Surve — Thu, 20 Nov 2025 11:50:17 +0000

Most developers learn Git early in their journey — and they absolutely should. Version control is the safety net that allows us to experiment, break things, and collaborate without losing our minds.

But there’s another tool that deserves equal priority in every developer’s toolkit, right from day one.

👉 Docker.

Not "later." Not "once you’re a senior engineer." It belongs right beside Git. Here is why.

🎒 The Pain of Revisiting Old Projects

When I started building projects in college, every semester introduced a completely new tech stack.

One month I was juggling Node.js and MongoDB; the next, I was wrestling with PHP, XAMPP, and MySQL. By the end of the year, I was configuring Spring Boot with PostgreSQL, or dabbling in Python for data science assignments.

To save system resources (and my sanity), I would routinely uninstall tools I wasn't actively using. It felt harmless at the time—until interview season arrived.

I wanted to polish my old projects to showcase them in my portfolio, fix a few bugs, and demonstrate my growth to recruiters. But when I tried to open them to get them ready for a demo, I hit a wall.

The "Code Rot" Illusion

Suddenly, a project that worked perfectly six months ago became a nightmare to revive.

It wasn't that the code had changed—the environment had. I found myself wasting hours reinstalling outdated versions of languages, fixing broken configuration files, and trying to remember exactly how I had set up the local variables. Services refused to start, and ports were conflicting.

I realized the hard truth: The code was fine. The context was gone.

🧪 The Failed Workarounds

Before I embraced containerization, I tried several "patches" to solve this, but none were actual solutions:

Switching everything to SQLite: I tried to avoid database servers entirely by using file-based DBs. It reduced dependencies, but it caused massive headaches when moving to production or dealing with features that SQLite didn't support.
VirtualBox VMs: This worked, technically. But keeping a full Operating System image for every small project was heavy, slow, and consumed terabytes of storage.
Detailed "Setup.md" files: I tried writing manual instructions for my future self. But let's be honest—documentation goes out of date the moment you write it.

Everything felt like a band-aid.

🐳 Discovering Docker Changed Everything

Docker solved this problem so elegantly that I still regret not learning it earlier.

Instead of installing Node, Python, or Postgres directly onto my laptop, I started containerizing them. By defining the frontend, backend, database, and all supporting services in code, my projects became portable and reproducible, completely independent of my host system.

Now, when I want to revive a project from 2021, the process is incredibly simple:

docker compose up

And just like that, the project comes back to life exactly as it was.

No reinstalling languages. No dependency mismatches. No breaking changes because my OS updated.

When I'm done? I stop the containers, and my system stays clean.

🔍 Git vs. Docker — A Perfect Combination

If you are wondering how they fit together, think of it this way:

Tool	The Question it Answers	The Benefit
Git	"What changed in the code?"	Protects your history.
Docker	"Where and how does it run?"	Protects your environment.

Together, they make your projects future-proof. Git allows you to share the logic, while Docker ensures that the logic runs exactly the same way on your machine, your friend's laptop, and the production server.

🎯 Final Thoughts

If you are a new developer, or just someone tired of "it works on my machine" syndrome:

Learn Git for collaboration. Learn Docker for sustainability.

One protects your code. The other protects your environment. Use both, and your projects will outlive your laptop, your OS, and even your memory of how they worked.

If this resonates with your experiences (or your frustrations with npm install failing on an old project!), feel free to share your story in the comments.

Happy coding! 🚀

🧠 Download Smarter: Using Colab + Google Drive to Bypass Slow Direct Downloads

Rushikesh Surve — Sun, 22 Jun 2025 17:04:37 +0000

🧭 Introduction

Sometimes, downloading large files directly to your local system can be painfully slow, especially when the source server is far away, overloaded, or unstable.

In such cases, I found a neat trick using Google Colab and Python to speed things up, by downloading the file into my Google Drive first, and then fetching it from there when convenient.

This blog shares:

A working Python script (using gdown)
Why this method might be faster in some cases
When it’s worth using (and when it might not help)

⚙️ The Idea: Use Google’s Speed to Your Advantage

Here’s the general approach:

Run a small script in Google Colab.
Let Google’s servers download the file into your Google Drive.
Later, download it to your device, often faster and more reliably than from the original source.

This has worked well for downloading:

📽️ Movies
📚 PDFs and eBooks
🧩 Software packages and installers
🎮 Game files

📜 The Python Code

# Step 1: Install required libraries
!pip install gdown
from google.colab import drive
import re
import os
import gdown

# Step 2: Mount Google Drive
drive.mount('/content/drive')

# Step 3: Function to download file
def download_file(file_url, save_path):

    # Extract the original file name from the URL
    file_name = os.path.basename(file_url)

    # Download the file from the given URL
    gdown.download(file_url, os.path.join(save_path, file_name), quiet=False)

# Example usage
file_url="https://file-examples.com/storage/feac45e876684fd51a206f4/2017/04/file_example_MP4_1920_18MG.mp4"
save_path = '/content/drive/MyDrive/Colab Notebooks/Downloads/'  # Specify your folder

# Download the file
download_file(file_url, save_path)
print("\nDownload completed!")

⚠️ Make sure the URL ends with file name and extension (a direct download link)

🖥️ Executing the Script in Colab

Running the Python script inside Google Colab. Once executed, the file starts downloading to your Google Drive.

📂 File Saved in Google Drive

The downloaded file appears neatly in your specified Google Drive folder, ready to download or organize.

💡 Why Might This Be Faster?

To be honest, this part is partly based on my observations and assumptions:

⚡ Google Colab runs on Google’s own infrastructure, high-speed servers with great bandwidth.
🌍 Google Drive is likely replicated across multiple regions, so downloading from it might be faster depending on where you are.
⏳ Some direct file downloads are rate-limited or unreliable, but Google Drive rarely is.
🧠 Plus, once the file is in your Drive, you control it, you can rename, organize, or download it anytime, even if the original source goes offline.

🤔 But Is This Always Better?

Not necessarily. Here are a few considerations:

Situation	Should You Use This Method?
File is huge and downloads slowly	✅ Yes
Source server is flaky or unreliable	✅ Yes
File needs to be saved long-term	✅ Yes
You're on a fast network, direct is stable	❌ Probably not
File is behind a login / not public	⚠️ May not work without auth headers

So yes, this trick won’t magically speed up every download, but when it works, it can feel like magic ✨

🗣️ Final Thoughts

This might not be a universal solution, but for me, it’s been a smart workaround, especially for those annoying moments when a 1 GB file says “5 hours remaining.”

Try it out next time your download speed is crawling, and let me know if it helps!
Happy downloading 🚀

Learn to Use Microsoft OneNote for Note-Taking Without Getting Overwhelmed — A Steady Start

Rushikesh Surve — Wed, 11 Jun 2025 12:13:58 +0000

Introduction

I’ve tried Microsoft OneNote multiple times in the past — and each time, I gave up. It felt overwhelming, messy, and just… too much.

But recently, I tried something different: instead of expecting to master it in one go, I gave myself permission to start slow — step by step. That one mindset shift changed everything.

In this post, I’ll show you a simple system I now use to take notes in OneNote without ever feeling lost. If you're a student, developer, or just someone trying to organize your learning — this steady start is for you.

🧱 Understanding the OneNote Structure

To make the most of OneNote, you need to understand its basic hierarchy:

📓 Notebook – Think of this as your physical notebook or subject.
🗂️ Section – A divider in your notebook, like "Chapters" or "Topics".
📄 Page – A single page where you write stuff, like an actual note.

This hierarchy becomes super powerful once you stop trying to structure everything from Day 1 — and instead, let it grow naturally.

🛠️ The Simple “Grow-As-You-Go” System I Follow

Here's the approach that worked for me:

✅ Step 1: Create a General Notebook

I created a notebook called "Learnings" — a kind of catch-all space for everything I learn.

No stress, no structure. Just a starting point.

✅ Step 2: Start with a Single Section

You don’t need to create multiple sections upfront. Just create one section — name it anything like:

Quick Notes
Interesting Reads
Knowledge Dump

✅ Step 3: Add Pages Smartly

Whenever I come across something worth saving — a concept, tip, or technique — I create a new page using this naming format:

"Subject: Title of the Note"
Example: "Java: Encapsulation" or "OS: Paging"

This format helps later when I want to filter or move similar notes together.

✅ Step 4: Organize When It Starts to Get Crowded

Once I notice a bunch of pages around the same subject, I:

Create a new Section for that subject in the same notebook.
Move the related pages into that Section.

This step is the key: Don’t start with too much structure — let the content demand it.

✅ Step 5: Split Into New Notebooks (When Needed)

If a single subject becomes too large (like 10+ pages and 3–4 sections), that’s when I finally:

Create a dedicated Notebook for that subject. (e.g., Java)
Create relevant Sections (e.g., Data Types, OOP Concepts, Interesting Programs)
Move your old notes into the new structure.

Now I’ve got a dedicated space for in-depth learning — organized, scalable, and never overwhelming.

🔄 Repeat the Process

This system works beautifully across multiple subjects:

Web Development
Machine Learning
Interview Prep
Dev Tools & Tricks

Just let the content pile up first, and reorganize only when it’s worth it.

🎯 Final Thoughts

OneNote is incredibly powerful — once you stop trying to master it all at once.

Start with one notebook, one section, one note.
Let your learning drive the structure — not the other way around.

If you’ve ever felt overwhelmed with note-taking, try this “steady start” method. It worked for me, and I hope it works for you too.

🚀 TL;DR: Create System Architecture Diagrams Instantly Using Claude AI + draw.io

Rushikesh Surve — Mon, 05 May 2025 04:37:27 +0000

Designing architecture diagrams for your project? Skip the drag-and-drop hassle. Use Claude AI to generate draw.io diagrams instantly with just a prompt.

💡 Why Use This?

🧠 Claude AI generates draw.io-compatible XML
⚡ Instantly visualize system architectures
💻 No design skills required – just describe your system

🛠 How It Works (3 Simple Steps)

Prompt Claude AI with something like:

Generate a draw.io-compatible XML diagram for this project/code/pseudocode etc.

[And provide it the base content]

Copy Claude's Output into a 'test.drawio' file (XML code)
Import into draw.io
- Open draw.io
- Click File → Import from → Device
- Select the test.drawio file

🧩 Sample Prompt

Generate an architecture diagram for a full-stack MERN app with auth, database, backend, and frontend layers. Output XML for draw.io.

Claude will reply with XML like this (trimmed for preview):

<mxfile>
  <diagram name="MERN App Architecture">
    <!-- XML content here -->
  </diagram>
</mxfile>

🔥 Why It's Useful

Saves 30+ minutes of manual diagramming
Great for docs, pitches, and planning
Works with any app idea you describe

Originally inspired by my full blog: How to Use Claude AI + draw.io

How to use Claude AI + draw.io to Create Architecture Diagrams for Projects

Rushikesh Surve — Tue, 29 Apr 2025 03:46:34 +0000

Introduction

In technical engineering projects, especially those involving software system designs, professional diagrams play a critical role in simplifying complexity and enhancing communication.

In this blog, I'll walk you through how I combine Claude AI with draw.io to create clean, structured, and visually appealing diagrams for complex codebases.

We’ll demonstrate using a slightly complex system:

✅ Online Course Registration System (with Admin + Payment integration).

Why Visual Diagrams Are Essential for Engineers

📈 Improve project documentation quality
🧠 Clarify system architecture and workflows
🖼️ Impress during project evaluations, internships, and freelancing
🛠️ Save time during collaboration and debugging

Whether it’s API design, microservices, database flow, or user journey, good diagrams are crucial.

📋 Problem Statement

Design a backend flow for an Online Course Registration System.

Key Components:

Student browses available courses

Admin manages courses

Student selects course → payment gateway integration → enrollment confirmation

Admin can approve or reject course creation requests

System should handle payment failure cases

🛤️ Step-by-Step Walkthrough

Step 1: Write a Detailed System Description

Before jumping into tools, clearly understand what you want to visualize. Draft a logical description of how the system components interact. This involves:

Analyzing the source: For example, a source-code, pseudocode, or algorithm.
Writing a short description: Explain the logic or flow in simple language.
Identifying elements: Note down components like processes, inputs/outputs, functions, or actors that should be part of the diagram.

📌 Tip: This step can be manual or done in collaboration with AI by summarizing the core logic of your code/process.

Description Example:

Student browses available courses.

Student selects a course → proceeds to payment.

System connects to Payment Gateway API.

If payment is successful → student enrollment confirmed.

If payment fails → show error and retry option.

Admin manages course creation, edits, deletions.

Admin can approve/reject newly created course entries.

Step 2: Ask Claude to Generate draw.io XML Code

Once you have the logical structure ready, use a detailed prompt to ask Claude AI to generate an XML-based diagram compatible with draw.io.
Claude AI is better at generating longer, cleaner code blocks compared to ChatGPT.

Example Claude Prompt:

“Generate draw.io-compatible XML code for a system flow diagram of an Online Course Registration System.
Show entities like Student, Admin, Payment Gateway.
Include success/failure flows and Admin approval flows clearly.
Arrange elements logically and label all edges. The diagram should be visually appealing. The flow is like this-

Student browses available courses.

Student selects a course → proceeds to payment.

System connects to Payment Gateway API.

If payment is successful → student enrollment confirmed.

If payment fails → show error and retry option.

Admin manages course creation, edits, deletions.

Admin can approve/reject newly created course entries.”

🎯 Claude responds with a complete XML.

📌 Tip: You can even provide entire source code, if it is single file. Claude will automatically figure out the flow of program.

Step 3: Create and Save the `.drawio` File

Steps:

Copy the XML output.
Open a text editor.
Paste XML content.
Save as: 📝 course_flow.drawio

⚠️ Make sure to select All Files type when saving.

Step 4: Import into draw.io

There are two ways to do this:

1. Via Web App:

Go to https://app.diagrams.net/
Click Device → Open Existing Diagram.
Select your .drawio file.

✅ Your system diagram should now appear automatically!

2. Via Desktop App: If you have the draw.io desktop application installed, simply open the file using it.

Step 5: Manual Adjustments for Visual Appeal

The imported diagram often needs cleanup for a professional look:

Align boxes horizontally and vertically
Color-code actors (Student, Admin, Payment Gateway)
Label edges (e.g., "If Payment Fails", "Admin Approves")
Use consistent shape sizing

🎨 Design Tips:

Use different shapes for different entity types (rectangles for processes, diamonds for decisions).
Stick to 2–3 soft colors (sky blue, light green, soft grey).
Leave good spacing between elements.
Add a plain rectangle as a background, to enable appropriate exporting of complete image(as png/jpg etc).

Step 6: Export the Final Diagram

Once finalized:

File → Export As → PNG / PDF
Enable "Include a copy of my diagram" for backup.
Set high resolution for better quality.

🎯 Final Result

✅ A professional system diagram ready for:

Project documentation
Presentations
Freelance portfolios
Technical blogs

⚠️ Notes on AI Limitations

Code Length: ChatGPT has a limit on how much XML code it can generate. For complex or very large diagrams, consider alternatives like Claude AI, which can handle longer outputs.
Split Diagrams: For large systems, divide the diagram into smaller parts and generate/import them separately.
Verification: Always cross-check the logic and flow; AI may introduce small inconsistencies.

Extra Bonus Tip: What to Do Next?

💬 Add internal comments inside draw.io diagrams
🔄 Use this workflow for ER diagrams, UMLs, flowcharts, API flows

Forem: Rushikesh Surve

Microservices Authentication & Authorization: A Beginner's Guide

The Architecture

Project Setup

Step 1: The Auth Service

Step 2: The API Gateway

Step 3: The Custom Service

Step 4: Testing It Out

Conclusion

🐳 Docker Deserves a Place Beside Git — Here’s Why

👉 Docker.

🎒 The Pain of Revisiting Old Projects

The "Code Rot" Illusion

🧪 The Failed Workarounds

🐳 Discovering Docker Changed Everything

🔍 Git vs. Docker — A Perfect Combination

🎯 Final Thoughts

🧠 Download Smarter: Using Colab + Google Drive to Bypass Slow Direct Downloads

🧭 Introduction

⚙️ The Idea: Use Google’s Speed to Your Advantage

📜 The Python Code

🖥️ Executing the Script in Colab

📂 File Saved in Google Drive

💡 Why Might This Be Faster?

🤔 But Is This Always Better?

🗣️ Final Thoughts

Learn to Use Microsoft OneNote for Note-Taking Without Getting Overwhelmed — A Steady Start

Introduction

🧱 Understanding the OneNote Structure

🛠️ The Simple “Grow-As-You-Go” System I Follow

✅ Step 1: Create a General Notebook

✅ Step 2: Start with a Single Section

✅ Step 3: Add Pages Smartly

✅ Step 4: Organize When It Starts to Get Crowded

✅ Step 5: Split Into New Notebooks (When Needed)

🔄 Repeat the Process

🎯 Final Thoughts

🚀 TL;DR: Create System Architecture Diagrams Instantly Using Claude AI + draw.io

💡 Why Use This?

🛠 How It Works (3 Simple Steps)

🧩 Sample Prompt

🔥 Why It's Useful

How to use Claude AI + draw.io to Create Architecture Diagrams for Projects

Introduction

Why Visual Diagrams Are Essential for Engineers

📋 Problem Statement

🛤️ Step-by-Step Walkthrough

Step 1: Write a Detailed System Description

Step 2: Ask Claude to Generate draw.io XML Code

Step 3: Create and Save the .drawio File

Step 4: Import into draw.io

Step 5: Manual Adjustments for Visual Appeal

Step 6: Export the Final Diagram

🎯 Final Result

⚠️ Notes on AI Limitations

Extra Bonus Tip: What to Do Next?

Step 3: Create and Save the `.drawio` File