My guitar chord diagram generator

Hi folks. So when Justin’s lessons said I should make my own chord book, I wasn’t really delighted with any of the existing chord diagram formats I was seeing online. So I went ahead and designed my own template, and wrote a software tool to generate chord diagrams using the template.

You may be thinking, “but Brendan, that wasn’t the assignment”, and, look … you would not be totally wrong about that. But I’m a software guy and sometimes I just can’t help myself. I promise I eventually did use the tool to generate a bunch of chord diagrams and then assemble them into my own chord book.

Anyway, I’ve just finished building a web UI for the tool so anyone can use it. If you like the way this template looks, you are more than welcome to use it to generate your own diagrams. The source code is also released on Github if you want to download and run it on your own computer, or customise it for your own needs.

Website: Guitar chord diagram generator
Source code: GitHub - direvus/guitarchords: Generator for guitar chord diagrams

Features of the chord diagram template:

  • Nice fonts
  • The vertical lines go from thick to thin, to help you orient the diagram against the fretboard
  • The distance between the frets gets smaller as you go to higher frets because why not
  • High visual contrast in markers for open vs. muted
  • The note that results from the fretting of each string is shown on the diagram (inside the “nut”)

Features of the website:

  • Choose a chord from a list of presets, or enter your own custom chord, set the fretting/fingering however you like.
  • Most of the chords up to the end of JG Grade 2 already written in as presets

Limitations and possible future improvements:

  • Currently the template only works for frets 1-4.
  • Maybe draw a “barre” shape where a finger covers multiple frets? Currently I just do multiple dots with the same finger number.
  • Maybe allow users to specify the size of the output diagram?

If you have any problems or suggestions with any of this stuff, feel free to reply here, message me direct, or add an issue to the Github repo.



Very nice. A friend is a big proponent of python. I’m still on the fence, can’t be bothered to learn another language just yet.

1 Like

I’m a huge fan of Python, use it all the time, and recommend it for a wide variety of situations – but I also completely understand the inertia against learning yet another language.

1 Like

My language of choice on front end is javascript/react and backend is java, I’ve got decades of enterprise level experience with java so not keen to replace it at the backend. When wasm becomes mainstream, I’m hoping to move to python on the front end as js is a huge ball of mud.

“huge ball of mud” is an unfairly positive description of JS. The only appropriate words we can use to describe it are against JG community guidelines.

1 Like

That describes javascript very well :slight_smile:

This is great. Thanks for sharing! I’ll definitely be checking this out.

1 Like

Hah I know what you mean, writing an app etc that does this makes you understand the problem/solution pretty thoroughly!

1 Like

All cool stuff but has anyone seen this ?

Might save a lot of coding ?


1 Like

@TheMadman_tobyjenner I do like the software Neck Diagrams too. As Justin says in grade 1 “don’t copy your boxes from a book or website. Create your own” so I use that software to create my own.

Might save a lot of coding

Well … I’ve already done all the coding, and besides, the coding is my favourite part.

Justin’s chord library is a great resource for learning to play the chords, but like I said in the OP, I wasn’t 100% happy with the way those diagrams look. Although to be fair, out of all the styles I found online, Justin got the closest to the kind of look I wanted.

That library also doesn’t allow you to define your own custom chord fingering, which my app does.

@direvus nice. I’m not a programmer but enjoy programming so I often take the ‘sledgehammer to a walnut’ approach myself :grin:.
Any chance you could modify this to allow for left-handed diagrams? Just needs to create a mirror image.



That sounds fairly possible, I’ll give it a try and see how I go. Would you want the order of the strings in the UI reversed as well? Or just the diag?

Just the diagram would be great. Low E on the right.

@direvus Congratulation for this nice project. It must have been fun to combine two of your passions in the same project : programming and guitar :slight_smile:

A good opportunity to grow as a software developer and a guitarist :slight_smile:

1 Like

Hey Murray,

I think I got this working now. Hope you like it :slight_smile:

Also since last time I posted I have added a few other features to the web UI. The form now shows the note played on each string, and the scale degree of that note.

1 Like

Thanks Mathieu, yes it is good fun. Never tried to manipulate an SVG in code before this project, but since SVG is just an XML document, I figured it would work out. And it totally did. In fact the coding part of it was really easy. I spent a lot more time on designing the diagram template than writing the code :slight_smile:

Hi Brendan

That is a wonderful thing - thank you so much. I love the flexible approach and it’s going to save me a heap of time.



You’re welcome! Let me know if you come up with any ideas for improvements.

There is a minor bug with the played note, which appears blank in some circumstances. Try this one for example, which is one of Justin’s chords.

(side note: I’m the product owner on a large project).