The flowchart reads from a top down perspective. At the top is a container marked MediaSource, with 3 arrows flowing down to containers each marked SourceBuffer. (Not indicated, but for sake of clarity in this description referred to here-after as SourceBuffer 1, shown with a blue background; SourceBuffer 2, shown with a mauve background; and SourceBuffer 3, shown with a rose background; as described from Left to Right).
Below these 3 SourceBuffer containers is a dashed line, with an indication that the top half (MediaSource plus the 3 SourceBuffer containers) are taken from the Media Source API, while the details to follow are taken from the HTMLMediaElement.
Flowing down from SourceBuffer 1 is a blue triangle with 3 arrows pointing to 3 process indications, each labeled Track Buffer.
The first Track Buffer from the left then flows to a red box labeled Video Decoder, which then flows to an indicator (three dots stacked vertically) labeled Video Tag Display Region.
The second Track Buffer flows to a green box labeled Audio Decoder, which then follows to an indicator of an open switch, which then continues to an indicator (green circle with an X) labeled Audio Device.
The third Track Buffer also flows to a green box labeled Video Decoder, which also flows to a switch, this time however indicated closed, which then also continues to the same indicator (green circle with an X) labeled Audio Device as the second Track Buffer.
Flowing down from SourceBuffer 2 is a mauve triangle with an arrow flowing to a red box labeled Video Decoder, which then flows to the same Video Tag Display Region previously mentioned in SourceBuffer 1.
Flowing down from SourceBuffer 3 is a rose triangle with an arrow flowing to a green box labeled Audio Decoder, which then flows through a closed switch, which then also continues to the same indicator (green circle with an X) labeled Audio Device previously mentioned in SourceBuffer 1
With thanks to J. Foliot, Deque Systems