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.Instructions
Each 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" and "text-color"
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:
Where the pattern is
To add a border color to any line use
. 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
option will be used for the border, and the
will be used as fill. The same coloring options apply.
If you add
to any line, all the notes within that line will have the text.
If you add a
to any line that also has the
property above, the text will be rendered in that color.
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/fretboard
If you find this useful, let me know