Making Diagrams

Mermaid is a code-based diagram tool that I use frequently. Because diagrams are written as text, they are easy to version control, update and work well with markdown.

Mermaid - syntax-reference Theme Configuration

Excalidraw is also worth mentioning. It’s an online diagram tool that requires no signup, and it also supports Mermaid.

• Excalidraw Libraries

sketch.io is great for doing mock-ups and has fun clip-art

Inkscape - for more complex things I use inkscape

The diagrams below are not organized. Some eventually became part of the main documentation. Others remain as experiments or mental mappings.

graph TD
    subgraph Victim [Victim]
        V_Logic[Secret-dependent memory access]
        V_Key[Sensitive data]
    end

    subgraph Attacker [Attacker loop]
        A_Flush[1. Flush<br/>Remove target from cache]
        A_Wait[2. Wait<br/>Let victim run]
        A_Reload[3. Reload + Measure<br/>Read target and time it]
    end

    subgraph Hardware [Shared hardware]
        LLC[Shared L3 Cache]
        DRAM[DRAM]
    end

    subgraph Result [Timing result]
        Hit[Fast access<br/>Cache hit]
        Miss[Slow access<br/>Cache miss]
    end

    A_Flush -.-> LLC
    A_Wait --- V_Logic

    V_Key --> V_Logic
    V_Logic -->|may load target| LLC
    LLC -->|if not cached| DRAM

    A_Reload --> LLC
    A_Reload --> Hit
    A_Reload --> Miss

    Hit --> Yes[Victim likely accessed this value]
    Miss --> No[Victim likely did not access this value]

graph TD
    %% Styling definitions
    classDef registers fill:#ff4d4d,stroke:#333,stroke-width:2px,color:#fff;
    classDef cache fill:#ffa64d,stroke:#333,stroke-width:2px,color:#fff;
    classDef ram fill:#ffff4d,stroke:#333,stroke-width:2px,color:#000;
    classDef secondary fill:#4da6ff,stroke:#333,stroke-width:2px,color:#fff;
    classDef tertiary fill:#4dff4d,stroke:#333,stroke-width:2px,color:#000;

    %% Nodes
    REG[CPU Registers<br>Fastest / Smallest Capacity / Most Expensive]:::registers
    L1[L1 Cache]:::cache
    L2[L2 Cache]:::cache
    L3[L3 Cache]:::cache
    RAM[Main Memory - RAM]:::ram
    SSD[Secondary Storage - SSD / HDD]:::secondary
    TAPE[Tertiary Storage - Tape / Cloud Archive<br>Slowest / Largest Capacity / Cheapest]:::tertiary

    %% Connections
    REG <--> L1
    L1 <--> L2
    L2 <--> L3
    L3 <--> RAM
    RAM <--> SSD
    SSD <--> TAPE

    %% Speed and Capacity Labels
    subgraph Speed ["▲ SPEED & COST INCREASES"]
    end
    subgraph Capacity ["▼ CAPACITY INCREASES"]
    end

graph TB
    %% Style Definitions
    classDef core fill:#ff4d4d,stroke:#333,stroke-width:2px,color:#fff;
    classDef privateCache fill:#ffa64d,stroke:#333,stroke-width:2px,color:#fff;
    classDef sharedCache fill:#4da6ff,stroke:#333,stroke-width:2px,color:#fff;
    classDef ram fill:#ffff4d,stroke:#333,stroke-width:2px,color:#000;

    %% CPU Core 1
    subgraph Core1Stack ["CPU Core 1"]
        C1["Core 1"]:::core
        L1_1["L1 Cache<br>(Private)"]:::privateCache
        L2_1["L2 Cache<br>(Private)"]:::privateCache
    end

    %% CPU Core 2
    subgraph Core2Stack ["CPU Core 2"]
        C2["Core 2"]:::core
        L1_2["L1 Cache<br>(Private)"]:::privateCache
        L2_2["L2 Cache<br>(Private)"]:::privateCache
    end

    %% CPU Core 3
    subgraph Core3Stack ["CPU Core 3"]
        C3["Core 3"]:::core
        L1_3["L1 Cache<br>(Private)"]:::privateCache
        L2_3["L2 Cache<br>(Private)"]:::privateCache
    end

    %% Shared L3 Cache
    subgraph SharedZone ["Shared Pool"]
        L3["L3 Cache<br>Shared Central Hub"]:::sharedCache
    end

    %% Main Memory
    RAM["Main Memory - RAM"]:::ram

    %% Connections
    C1 <--> L1_1 <--> L2_1 <--> L3
    C2 <--> L1_2 <--> L2_2 <--> L3
    C3 <--> L1_3 <--> L2_3 <--> L3

    L3 <--> RAM

    %% Explanations
    note1["Cores communicate here<br>without touching RAM"]
    L3 -.-> note1