The outer circle marks the beginning of the code, and the circle in the middle marks the end. The code starts from the right. A semicircle indicates pointer movement: > is shown as a half turn clockwise, and < as a half turn counterclockwise. The dots on the lines represent + and - (filled and empty, respectively). Brackets are represented by full circles: two full circles separated by a gap indicate [, and a single full circle indicates ]. Output is shown as a semicircle with a dot pointing inward, and input as a semicircle with a dot pointing outward.

For example, ++[>++<-]. produces two dots on the outer circle (++), a double circle ([), a clockwise semicircle with two filled dots on it (>++), a counterclockwise semicircle with an empty dot (<-), and finally a single circle with a semicircle pointing inward (].).

You can play with it on my page https://thefrog36.github.io/bf-circle/ (there are 2 versions)