Why Mermaid?

After building antoine.patraldo.com, I realized I needed a way to document the flow—from Antoine's raw art files to the final interactive gallery. Text explanations are great, but sometimes you need a visual diagram to understand how everything connects.

That's where Mermaid.js comes in. It lets you write diagrams as code, which means I can keep them in version control alongside my Bash scripts and Svelte components.

The Architecture Diagram

Here's the complete flow of the Antoine Patraldo platform:

graph TD
    %% Inicio del proceso manual/artístico
    Start[Arte de Antoine] -->|Mayfly Style| Files[Archivos en Linux/Chromebook]

    %% Procesamiento en la terminal (Tu fuerte)
    subgraph "Terminal (Bash + FFMPEG)"
        Files --> Script[Bash Script]
        Script --> FF[FFMPEG Processing]
        FF -->|Optimization| WebReady[Assets Web-Ready]
    end

    %% Despliegue al Edge
    subgraph "Cloudflare Infrastructure"
        WebReady -->|Wrangler Upload| R2[Cloudflare R2 / Assets]
        Script -->|D1 Query| DB[(Cloudflare D1 SQL)]
        DB ---|Metadata| R2
    end

    %% El Frontend de SvelteKit 5
    subgraph "SvelteKit 5 (The Engine)"
        DB -->|JSDoc Types| Hooks[hooks.server.js]
        Hooks -->|Runes $state| UI[Frontend Interactivo]
        UI -->|Secure Cookie| Auth[DIY Auth Lucia-based]
    end

    %% Estilos visuales
    style Start fill:#f9f,stroke:#333,stroke-width:2px
    style Script fill:#bbf,stroke:#333,stroke-width:2px
    style DB fill:#dfd,stroke:#333,stroke-width:2px

This diagram shows the entire pipeline: from Antoine's raw art, through my Bash/FFMPEG processing, into Cloudflare's edge infrastructure, and finally to the SvelteKit 5 frontend.

Breaking It Down

Terminal (Bash + FFMPEG): This is where the magic happens. I avoid GUIs entirely—everything is scripted. FFMPEG handles video scaling, format conversion, and optimization for web delivery.

Cloudflare Infrastructure: R2 stores the actual assets (videos, images), while D1 holds the metadata (titles, descriptions, session data). They work together seamlessly.

SvelteKit 5 (The Engine): The frontend uses JSDoc for type safety, Runes ($state, $derived) for reactivity, and a DIY auth system inspired by Lucia Auth—all running on Cloudflare Workers.

Why This Matters

Documentation doesn't have to be boring. With Mermaid, I can:

• Keep diagrams in git alongside code
• Update them as the architecture evolves
• Share them in markdown files (like this blog post!)

It's the perfect tool for developers who prefer writing code over dragging boxes in a GUI.

Why Mermaid?

After building [antoine.patraldo.com](https://antoine.patraldo.com), I realized I needed a way to document the flow—from Antoine's raw art files to the final interactive gallery. Text explanations are great, but sometimes you need a visual diagram to understand how everything connects.

That's where Mermaid.js comes in. It lets you write diagrams as code, which means I can keep them in version control alongside my Bash scripts and Svelte components.

The Architecture Diagram

Here's the complete flow of the Antoine Patraldo platform:

This diagram shows the entire pipeline: from Antoine's raw art, through my Bash/FFMPEG processing, into Cloudflare's edge infrastructure, and finally to the SvelteKit 5 frontend.

Breaking It Down

Terminal (Bash + FFMPEG): This is where the magic happens. I avoid GUIs entirely—everything is scripted. FFMPEG handles video scaling, format conversion, and optimization for web delivery.

Cloudflare Infrastructure: R2 stores the actual assets (videos, images), while D1 holds the metadata (titles, descriptions, session data). They work together seamlessly.

SvelteKit 5 (The Engine): The frontend uses JSDoc for type safety, Runes ($state, $derived) for reactivity, and a DIY auth system inspired by Lucia Auth—all running on Cloudflare Workers.

Why This Matters

Documentation doesn't have to be boring. With Mermaid, I can:

• Keep diagrams in git alongside code
• Update them as the architecture evolves
• Share them in markdown files (like this blog post!)

It's the perfect tool for developers who prefer writing code over dragging boxes in a GUI.