Skip to main content

How to Create a Fretboard Diagram

Welcome to the Fretboard Diagram Help page. Our goal here is to provide you with a comprehensive guide on how to create your very own fretboard visualizations using the Guitar Fretboard Generator. With this tool, you can effortlessly generate fretboard diagrams by simply typing in code. The output is an SVG image of the fretboard that you can easily download and save by right-clicking on the image. The syntax is user-friendly and easy to understand, resulting in a stunning and professional fretboard visualization.

  1. In the text area above the fretboard, you will see an example code that you can modify to create your own fretboard visualizations.

  2. Each line of code represents a set of notes that you want to display and must start with "show".

  3. To add a single dot, use the fret and string options in the show command. For example, to add a dot on the 3rd fret of the 6th string, enter show fret=3 string=6.

  4. To add a series of dots along a string, use the frets and string options in the show command. For example, to add dots on frets 3 to 7 on the 1st string, enter show frets=3,4,5,6,7 string=1.

  5. To create chords, use the notes option in the show command. For example, to create a C major chord, enter show notes=10/1,10/2,9/3,9/4, where the pattern is fret/string.

  6. You can add a border color to any line by using the color option in the show command. Color can be any hexadecimal color code (#F00, #00F, #FFDAB9), or also color names (red, blue, peachpuff). For example, to add a red border to a line, enter color=#F00 after the show command.

  7. If you specify a fill-color on any line, the color option will be used for the border, and the fill-color will be used as fill. The same coloring options apply. For example, to add a green fill to a line, enter fill-color=green after the show command.

  8. If you add text to any line, all the notes within that line will have the specified text. For example, to add the text "C" to a line, enter text=C after the show command.

  9. Once you have entered your code, click the "Render" button to generate the fretboard visualization.

  10. You can also save your code by clicking the "Permalink" button, which will generate a unique URL that you can use to revisit your visualization later.

Here's a table of the available commands:

Command Parameters Description Example
fret fret=<number><br>string=<number><br>color=<color><br>fill-color=<color><br>text=<string> Displays a single dot on the specified fret and string. show fret=3 string=6 color=blue
frets frets=<number>,<number>,<number>,...<br>string=<number><br>color=<color><br>fill-color=<color><br>text=<string> Displays a series of dots along the specified string at the specified frets. show frets=3,4,5,6,7 string=1 fill-color=#FFDAB9
string string=<number><br>fret=<number><br>color=<color><br>fill-color=<color><br>text=<string> Displays a single dot on the specified string and fret. show string=4 fret=5 text=C
strings strings=<number>,<number>,<number>,...<br>fret=<number><br>color=<color><br>fill-color=<color><br>text=<string> Displays a series of dots at the specified frets on the specified strings. show strings=1,2,3 fret=3 color=#00F fill-color=#FFDAB9
note note=<fret>/<string><br>color=<color><br>fill-color=<color><br>text=<string> Displays a dot at the specified fret and string. show note=5/4 fill-color=red
notes notes=<fret>/<string>,<fret>/<string>,<fret>/<string>,...<br>color=<color><br>fill-color=<color><br>text=<string> Displays dots at the specified frets and strings. show notes=3/2,5/2,7/2 text=Am
color color=<color> Sets the color of the dots to the specified color. show fret=3 string=6 color=#F00
fill-color fill-color=<color> Sets the fill color of the dots to the specified color. show frets=1,2,3 string=2 fill-color=yellow
text text=<string> Adds text to the dots. show notes=3/1,5/1,7/1 text=G

Note: <number> refers to any positive integer, <color> refers to a valid hexadecimal color code or a named color, and <string> and <fret> are integers representing the string and fret numbers, respectively.

Here is the world famous sample code:

show frets=3,4,5,6 string=1
show frets=3,4,5 string=2 color=red
show fret=3 string=6 color=#0F0 fill-color=sandybrown
show notes=10/1,10/2,9/3,9/4
show note=0/6 text=E color=red fill-color=white text-color=blue