Fretboard Diagram Creator

| music tech

Check out the example diagrams I created with this tool to get an idea of what your finished diagram might look like. The color scheme depends on your browser/operating system settings. The diagram was updated to be mobile-friendly; let me know if you encounter any problems.


You can select notes and perform actions on the selected note.

With the second row of controls, you can perform actions on the whole diagram.

Remember that all of this only runs in your browser, so be careful about refreshing the page. The code lives on GitHub. Plain JavaScript, without dependencies. Comments can be found on Reddit.

Update Jan 3, 2024: You like interactive diagrams for scales and chords? I recently made another one. A bit more abstract, independent of any particular instrument (as long as it uses 12-tone equal temperament).