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:

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