I’m writing for the browser, so most of these use JS, but something that renders them as SVG images before sending them to the browser would also work. Edit: I added some Python libraries too.
JavaScript
Vex Chords
This one outputs SVG and seems to have a lot of options available.
An excerpt of some sample code:
chord.draw({
// array of [string, fret, label (optional)]
chord: [
[1, 2],
[2, 1],
[3, 2],
[4, 0], // fret 0 = open string
[5, 'x'], // fret x = muted string
[6, 'x']
],
// optional: position marker
position: 5, // start render at fret 5
// optional: barres for barre chords
barres: [
{ fromString: 6, toString: 1, fret: 1 },
{ fromString: 5, toString: 3, fret: 3 }
],
Code: GitHub - 0xfe/vexchords: JavaScript Chord Charts
Demo: The Little Chord Chart
raphael.chord.js
This one renders the chords as SVG using Raphael.js.
Sample code:
Raphael.chord('div1', [-1, 3, 2, 0, 1, 0], 'C maj');
Raphael.chord('div1', [-1, -1, 0, 2, 3, 2], 'D maj');
Raphael.chord('div1', [ 0, 2, 2, 1, 0, 0], 'E maj');
Raphael.chord('div1', [ 1, 3, 3, 2, 1, 1], 'F maj');
Raphael.chord('div1', [ 3, 2, 0, 0, 0, 3], 'G maj');
Raphael.chord('div1', [-1, 0, 2, 2, 2, 0], 'A maj');
Raphael.chord('div1', [-1, 2, 4, 4, 4, 2], 'B maj');
Code: GitHub - justindarc/raphael.chord.js: A plugin for Raphael.js for rendering guitar chords
Demo: raphael.chord.js Demo
MUSIQ
This open-source MIT-licensed library is your swiss knife of musical analysis. It allows you to descibe notes, intervals, chords, scales and other concepts used in musical theory.
This one looks pretty comprehensive. I don’t see sample output, but the docs for the guitar chords are here. The screenshot is from their interactive guitar tool.
An interesting thing about the fretboard diagrams is that the intervals are represented by shapes with the number of edges as their interval. 3rds are triangles, 5ths are pentagons, etc. In the image above, a 4th is a square, and a ♭5 is a square is a square rotated to a diamond. (Should it be a rotated pentagon? B to F is five note names. )
Website: http://musiqlab.alexrulkens.com/
ChordJS
This one uses HTML5 canvas.
Sample code:
<chord name="D" positions="xx0232" fingers="---132" size="3"></chord>
<chord name="A" positions="x02220" fingers="--123-" size="3"></chord>
<chord name="A_5" positions="577655" fingers="134211" size="3"></chord>
<script>ChordJS.replace();</script>
Code: GitHub - acspike/ChordJS: Draw guitar chord diagrams on HTML5 canvas
Vue Chords
This library works with Vue.js. The chords are rendered as HTML (divs) or images.
The chords are Vue components:
<vc-chord-diagram />
Website: https://vc-chord-diagram.wemakesites.net/
jTab
This is a library for tablature and SVG guitar chords. It uses Raphael.js under the hood.
Sample format:
%Fret/Finger.Fret/Finger.Fret/Finger.Fret/Finger.Fret/Finger.Fret/Finger[Name]
which would be this for a Bm7♭5 chord:
%7/2.X/X.7/3.7/4.6/1.X/X[Bm7b5]
Website: https://jtab.tardate.com/
ChordSheetJS
This is a JS library to interact with ChordPro, a Perl program that generates sheets of lyrics with chords.
Sample code:
const chordSheet = `
Am C/G F C
Let it be, let it be, let it be, let it be
C G F C/E Dm C
Whisper words of wisdom, let it be`.substring(1);
const parser = new ChordSheetJS.ChordSheetParser();
const song = parser.parse(chordSheet);
ChordialJS
Creates chord charts for the Web using HTML5 canvas.
Sample code:
var defs= [];
for (var note in ChordialJS.data.scales.major) {
var ch= ChordialJS.data.scales.major[note];
defs.push({ note: ch[0][0] });
defs.push({ note: ch[3][0] });
defs.push({ note: ch[4][0] });
}
ChordialJS.renderChords(container, defs);
Code: GitHub - laher/ChordialJS: Chord chart utility for web. Make progressions and interactive tabluation apps
Demo: ChordialJS
SVGuitar
A TypeScript library that outputs SVG with a lot of available options.
Sample code:
import { SVGuitarChord } from 'svguitar'
const chart = new SVGuitarChord('#chart')
// draw the chart
chart.configure({/* configuration */})
.chord({/* chord */})
.draw();
Code: GitHub - omnibrain/svguitar: Create beautiful SVG guitar chord charts
Fretboards
Creates SVG fretboards.
Sample code:
// Layout a specific scale
var fb = fretboard.Fretboard();
fb.add("a phrygian").paint();
// Use alternative tunings
var fbDropD = fretboard.Fretboard({ tuning: fretboard.Tunings.guitar6.Drop_D });
fbDropD.add("a phrygian").paint();
// Place specific notes on specific strings, e.g. for chord voicings
var c7add9 = fretboard.Fretboard({ frets: 5 });
c7add9.add("5:c3 4:e3 3:bb3 2:d4 1:g4").paint();
Code: GitHub - txels/fretboards: Display fretboards on a browser using Javascript
Demo: https://fretboard.txels.com/demos/dynamic.html
Python
Lilypond
I was hoping that Lilypond had a way to do it, because Lilypond output tends to look great, but I could only find examples of printing chord names. Edit: see “fret diagrams” below.
Sample code:
chordmusic = \relative {
<c' e g>2 <f bes c>
<f c' e g>1
\chordmode {
c2 f:sus4 c1:/f
}
}
<<
\new ChordNames {
\chordmusic
}
{
\chordmusic
}
>>
Edit: See this page.
Check out this repo for some Lilypond code examples.
The FretBoards section says “not documented”, but there are some pages with information here and here. There’s also a page that mentions integrating it with Python here.
Fretboardgtr
This Python library generates SVG files.
Sample code:
from fretboardgtr import ScaleGtr
F = ScaleGtr(scale=["G","A","B","C","D","E","F#"],root="G")
F.customtuning(['E','A','D','G','B','E'])
F.draw()
F.save()
Python Fretboard
This Python library generates SVG files.
Sample code:
# D major
chord = fretboard.Chord(positions='xx0232', fingers='---132')
chord.save('svg/D.svg')
# pentatonic scale shape
fb = fretboard.Fretboard(frets=(5, 8), style={'marker': {'color': 'dodgerblue'}})
fb.add_marker(string=0, fret=5, label='A', color='chocolate')
fb.add_marker(string=1, fret=5, label='D')
fb.add_marker(string=2, fret=5, label='G')
fb.add_marker(string=3, fret=5, label='C')
fb.add_marker(string=4, fret=5, label='E')
fb.add_marker(string=5, fret=5, label='A', color='chocolate')
fb.add_marker(string=0, fret=8, label='C')
fb.add_marker(string=1, fret=7, label='E')
fb.add_marker(string=2, fret=7, label='A', color='chocolate')
fb.add_marker(string=3, fret=7, label='D')
fb.add_marker(string=4, fret=8, label='G')
fb.add_marker(string=5, fret=8, label='C')
fb.save('svg/pentatonic-shape.svg')
Code: GitHub - dmpayton/python-fretboard: 🎸 🐍 💥
ThatChord
A Python script for generating chords.
It outputs text:
x
=========== x
| | | | O | 5 | | | O | O 8 O | | | | |
| | O | | | | | | | | | | | | O | O
| O | | | | | | O | | | | | | | | |
| | | | | | | O | | O | | | | | | |
| | | | | | | | | | | | | | | | | |
or simple PNG images:
Code: GitHub - tomcontileslie/ThatChord: ThatChord shows you how to play any chord, on any instrument.