Add 5th string indicator to chord diagrams

6b6aade27957c007a16ff73e14a57c8c07cb3aac · Claude · Feb 1, 2026 19:29

Shows the short 5th string box on the left side of the diagram,
starting at fret 5 with a tuning peg indicator, extending to fret 6.
Only displayed for low position chords (baseFret = 1).

https://claude.ai/code/session_017ri8N4m6j39ajt5xUaz65n

+21 · 1 file changed

index.html +21 −0

diff --git a/index.html b/index.html
index a0186cd..a5f6b93 100644
--- a/index.html
+++ b/index.html
@@ -1612,6 +1612,27 @@
                 svg += `<text x="${x}" y="${marginTop - 20}" font-size="9" text-anchor="middle" fill="#666">${stringNum}</text>`;
             }
 
+            // 5th string indicator (starts at fret 5, to the left of the main strings)
+            // Only show if baseFret is 1 (low position chords)
+            if (baseFret === 1) {
+                const fifthStringX = marginLeft - 12;
+                const fret5Y = marginTop + 4 * fretSpacing; // Fret 5 line
+                const fret6Y = marginTop + 5 * fretSpacing; // Fret 6 line
+
+                // Draw the 5th string line from fret 5 to fret 6
+                svg += `<line x1="${fifthStringX}" y1="${fret5Y}" x2="${fifthStringX}" y2="${fret6Y}" stroke="#333" stroke-width="1.5"/>`;
+
+                // Draw horizontal fret lines for the 5th string box
+                svg += `<line x1="${fifthStringX - 6}" y1="${fret5Y}" x2="${fifthStringX + 6}" y2="${fret5Y}" stroke="#333" stroke-width="1"/>`;
+                svg += `<line x1="${fifthStringX - 6}" y1="${fret6Y}" x2="${fifthStringX + 6}" y2="${fret6Y}" stroke="#333" stroke-width="1"/>`;
+
+                // Tuning peg indicator (small circle at fret 5)
+                svg += `<circle cx="${fifthStringX}" cy="${fret5Y}" r="3" fill="#333"/>`;
+
+                // Label for 5th string
+                svg += `<text x="${fifthStringX}" y="${fret5Y - 8}" font-size="8" text-anchor="middle" fill="#666">5</text>`;
+            }
+
             // Finger positions and open/muted indicators
             positions.forEach((pos, idx) => {
                 // idx 0 = string 4 (leftmost), idx 3 = string 1 (rightmost)