This Guitar Fretboard Generator allows you to make fretboard diagrams by typing in code. The result will produce an SVG image of the fretboard that you can download and save by right clicking on the fretboard and saving it. The sytax is easy to understand, and the output is an easy to understand display of note patterns on the fretboard.
InstructionsEach line represents a set of notes that you want to display and must start with "show".
The current available commands are:
"fret", "frets", "string", "strings", "color", "note", "notes", "fill-color", "text"To add a single dot:
show fret=3 string=6To add a series of dots along a string:
show frets=3,4,5,6,7 string=1To create chords:
show notes=10/1,10/2,9/3,9/4 Where the pattern is
fret/stringTo add a border color to any line use
color=. Color can be any Hexadecimal color code (#F00, #00F,#FFDAB9), or also color names (red, blue, peachpuff)
If you specify a fill-color on any line
fill-color= , the
color option will be used for the border, and the
fill-color will be used as fill. The same coloring options apply.
If you add
text= to any line, all the notes within that line will have the text.
This is a derivative of the vexflow fretbard typescript code created by Mohit Cheppudira found here:
Vex Fretboard. I converted into a React Component. The code for this site is also open sourced and can be found here:
https://github.com/momolarson/fretboardIf you find this useful,
let me know