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.
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"
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:
If you find this useful, let me know