Creating Component Diagrams and Data Flow

In the previous lesson we produced a technical specification that covered many components and integrations. That spec was comprehensive, but it included services and infrastructure we don’t plan to implement for this project. This lesson shows how to:

generate a component diagram quickly (we used Mermaid),
read and prune the diagram to match an MVP scope, and
convert the simplified design into an implementable architecture using Flask + OpenCV for on-demand image processing.

Generate a quick diagram (Mermaid) We started by prompting a diagram generator with a short prompt:

create a component diagram showing components and data flow. Output this in Mermaid format.

The tool returned a fairly complete component diagram in Mermaid. The original graph included user authentication, MongoDB, S3, and more: When translated into a visual sketch (for example in Excalidraw or draw.io), it becomes a fairly large diagram. Below is an Excalidraw screenshot of a similar image upload/retrieval pipeline showing the components above.

A screenshot of a hand-drawn system architecture diagram in Excalidraw showing an image upload/retrieval pipeline with components like User Interface, Authentication Service, Database (MongoDB), Image Upload/Processing, Cloud Storage (AWS S3) and Image Retrieval connected by arrows for metadata and image flows. The Excalidraw toolbar and style panel are visible along the top and left edges.

Interpreting the original flow

User uploads an image via the User Interface to the Image Upload Service.
The Image Upload Service forwards the image to the Image Processing Service.
The Image Processing Service stores the optimized image in Cloud Storage (AWS S3) and writes metadata to the Database (MongoDB).
The Image Retrieval Service queries metadata and object storage to return the image to the user.
An Authentication Service handles login/signup and validates users against the database.

Tip: Start with a broad diagram to capture ideas, then prune components that aren’t required for your MVP. This keeps the design accurate and actionable.

Why simplify? For our current scope we only need an on-demand image optimization endpoint that processes uploads and returns an optimized image directly. The following subsystems are out-of-scope for the MVP. Planned removals and simplifications

Component removed	Why	Replacement / Action
Batch processing pipelines	Not needed for immediate MVP	Remove background jobs; process images on-demand
Image resizing/complex pipelines	Adds complexity and infra	Limit processing to a single optimization flow using OpenCV
User authentication	Not required for initial testing/demo	No auth; public endpoint or rely on reverse-proxy auth later
MongoDB (metadata store)	Persistent metadata is unnecessary now	Process in-memory; do not persist metadata
AWS S3 (object store)	External storage increases ops overhead	Return processed images directly in HTTP responses
Cache layer	Premature optimization	Skip cache; add later if needed for performance

Target implementation constraints

Area	Decision
Backend framework	Flask (simple WSGI app)
Image processing	OpenCV (cv2) in-memory operations
Storage	No persistent storage; ephemeral/in-memory only
Serving	Process and return optimized image on the request path
Production considerations	Use a WSGI server (e.g., gunicorn) and configure upload limits

Simplified architecture With those constraints, the simplified data-flow looks like this: Design notes for the simplified flow

No persistent storage: images are processed in-memory (or temporary ephemeral files) and streamed back to the client.
Single Flask app can handle both upload and retrieval endpoints; separate services are unnecessary for the MVP.
OpenCV handles decoding, minimal transformations, and re-encoding with tuned JPEG quality.

Minimal Flask + OpenCV example Below is a minimal Flask endpoint that:

accepts an uploaded image,
decodes and validates it with OpenCV,
re-encodes it as a compressed JPEG buffer, and
returns the optimized image directly to the browser.

from flask import Flask, request, send_file, abort
import cv2
import numpy as np
import io

app = Flask(__name__)

def compress_image(image_bytes, quality=85):
    # Read bytes to numpy array
    nparr = np.frombuffer(image_bytes, np.uint8)
    img = cv2.imdecode(nparr, cv2.IMREAD_UNCHANGED)
    if img is None:
        raise ValueError("Cannot decode image")
    # Example processing: convert to RGB and re-encode with lower quality
    if img.ndim == 2:
        img = cv2.cvtColor(img, cv2.COLOR_GRAY2BGR)
    elif img.shape[2] == 4:
        img = cv2.cvtColor(img, cv2.COLOR_BGRA2BGR)
    _, buf = cv2.imencode(".jpg", img, [int(cv2.IMWRITE_JPEG_QUALITY), quality])
    return io.BytesIO(buf.tobytes())

@app.route("/upload", methods=["POST"])
def upload():
    if "image" not in request.files:
        return abort(400, "Missing 'image' file")
    file = request.files["image"]
    image_bytes = file.read()
    try:
        out_io = compress_image(image_bytes, quality=80)
    except Exception as exc:
        return abort(400, f"Invalid image: {exc}")
    out_io.seek(0)
    return send_file(out_io, mimetype="image/jpeg", as_attachment=False, download_name="optimized.jpg")

if __name__ == "__main__":
    app.run(debug=True)

Implementation tips and production notes

Validate uploads: check Content-Type and attempt to decode with OpenCV before processing.
Upload size: configure Flask and the front-end to limit request size (e.g., Nginx/gunicorn client_max_body_size equivalents).
Temporary storage: if handling very large images, write to a secure temporary directory and ensure cleanup.
WSGI server: run Flask under gunicorn or another production server rather than Flask’s dev server.
Multipart/form-data: clients should send files under the image field (as shown in the example).
Security: if the service is public, consider rate limiting and authentication later.

Tooling and references

Mermaid — lightweight graph and diagram syntax: https://mermaid.js.org/
Excalidraw — quick hand-drawn diagram sketches: https://excalidraw.com/
draw.io / diagrams.net — full-featured diagram editor: https://app.diagrams.net/
Flask — micro web framework: https://flask.palletsprojects.com/
OpenCV — computer vision and image processing: https://opencv.org/
gunicorn — WSGI HTTP server for Python: https://gunicorn.org/

Course Introduction

Introduction to AI-Assisted Development

Planning Phase

Development Phase - Backend

Development Phase - Frontend

Project Completion

Creating Component Diagrams and Data Flow

Watch Video