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=6
To add a series of dots along a string:
show frets=3,4,5,6,7 string=1
To create chords:
show notes=10/1,10/2,9/3,9/4
Where the pattern is
fret/string
To 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