Bank Conflict Visualizer

Hardware config

Banks:
Bank size (bytes):

Problem config

BLOCK_M:
BLOCK_N:
Element size (bytes):
Access group height:
Access group width:

For BF16/FP16, element size is 2 bytes.

Visualization config

Cell size:

Swizzle function

Maps logical indices to physical indices.
You can access the following variables:

num_banks, bank_size, BLOCK_M, BLOCK_N, elem_size, group_height, group_width

Here is an example of a more sophisticated swizzle function (you can copy-paste to the box below).

function swizzle(m, n) {
  const elems_full_banks = (num_banks * bank_size) / elem_size;
  const rows_full_banks = Math.max(elems_full_banks / BLOCK_N, 1);
  const height_full_banks = elems_full_banks / group_width;

  const xor_pattern = Math.floor(m / rows_full_banks) % (height_full_banks / rows_full_banks);
  const new_n = n ^ (xor_pattern * group_width);
  return [m, new_n];
}

The grid below shows physical layout.
Cell color denotes bank ID.
The number pair in each cell denote logical indices (m,n).
When you hover over the grid, it shows the group of elements that will be accessed at the same time (access group height and width).
Bank conflicts occur when there is any bank ID that needs to service more than bank size (i.e. 4 bytes, assuming natural alignment).