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.
Interactions
You can select notes and perform actions on the selected note.
- Click one of the circles to select a note on the fretboard. The note is now highlighted and will later show up in your exported diagram.
- Use the colored buttons to set the color of the selected note. Alternatively, type r, g, b, d, or w for red, green, blue, black, or white.
- Press the X button to delete the selected note. Alternatively, press Delete or Backspace on your keyboard.
- Double click into a note to edit its label. Hit Enter or click outside of the note being edited to save the changes.
With the second row of controls, you can perform actions on the whole diagram.
- Click ♭ or ♯ to toggle between sharp and flat signs. Only note labels that you have not edited manually are affected.
- Click Toggle to hide all notes that you have not selected or make them appear again. Do this before you save the diagram to get the clean version.
- Click Save to save the diagram as SVG.
- Click Reset to reset your diagram and start from scratch.
- Enter start fret and end fret to display a different part of the fretboard. Changes outside of the displayed part are kept until the diagram is reset.
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).