Guitar Diagram

This script is used to generate fretboard diagrams. You can use it to display chords and scales for any fretted instrument. Unlike my other scripts, this one is meant to be as user-friendly as possible--no need to edit the code itself.

The note colors represent scale degrees. This is a very important distinction: these diagrams don't use letter notes (like C or E♭). This means you'll have to know a slight bit of music theory to really get use out of these diagrams. Scale degrees are preferred for multiple reasons:

• It places an emphasis on moveable, reusable shapes rather than static chords.
• Making a fretboard diagram for every variation of every letter chord would be a complete waste of time.
• It's easier to distinguish compound intervals.

Setup

1. Download the zip from the releases page (don't extract).
2. Right-click a note in Trilium and select import. Point to the zip.
3. Make a new render note. Set the ~renderNote relation to the imported Fretboard HTML note.
4. Add the #fretboardType attribute with one of the following values: single, wideSingle, list1, list2, list3
   • single: one basic fretboard that can be edited freely.
   • wideSingle: same as above but the diagram fills the width of the page.
   • list1, list2, list3: act as folders and will render any fretboards from children notes. This view is read-only. The number represents how many rows are displayed.

Editing a Diagram

After setting #fretboardType to single or wideSingle, a blank fretboard will appear. Clicking on the Edit button allows you to type numbers (scale degrees) on the strings. In edit mode, several buttons will appear beneath the fretboard that allow you to change fret and string count.

Note how sharps and flats can be added by typing b or # before the number. Double flats and sharps are supported as well.

Display Modes

The leftmost button above the fretboard controls whether dots or text is used to display notes. To the right of it is a collection of buttons that toggles colors for specific notes. For example, if you only wanted to highlight the root note and the fifth, you'd toggle everything besides 1 and 5.

For color purposes, compound intervals are treated as their simple counterpart (ex: 8 is treated as 1, 9 is treated as 2, etc). In addition, flats and sharps do not change a note's color--though there are CSS classes that allow you to change colors for accidentals, should you want to do so.

Color toggles persist for all diagrams until Trilium is restarted.

Changing Styles

Some CSS variables can be found at the top of the HTML note for easy styling. This includes note colors.