Demo: Fretboard Diagram Creator

Interactions

• Click one of the circles to select a note on the fretboard. The note is now highlighted by a dashed circle and will show up in your exported diagram. The open string notes on the left work the same way, however, they lack the circle.
• Type r, g, b, d, or w to color the selected note (red, green, blue, black, white).
• Press the Delete or Backspace key to delete the selected note.
• Hold CTRL and click into a note to edit its label. Hit Enter or click outside of the note being edited to save the changes.
• Click Toggle to hide all notes that you have not selected or make them appear again. Do this before you save the diagram to save the version you prefer.
• 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. Example diagrams can be found here. Implemented in plain JavaScript, without dependencies. The code is on GitHub. Comments are on Reddit.