Click a cell to add a dot; click it again to cycle finger 1–4 then remove. Click above a string to toggle ○ open / ✕ mute. Two dots on one fret draw a barre.
The diagram is built and exported entirely in your browser — nothing is uploaded. It contains only the chord you enter plus shapes (lines, dots, text).
A guitar chord diagram maker (chord chart / fretboard diagram generator) that builds a chord shape just by clicking the fretboard. It lays out a grid of vertical strings and horizontal frets — click a cell to drop a fingered dot, click the same dot again to cycle a finger number (1–4) and once more to remove it, so each position and finger is set with a single spot. Click the strip above each string to toggle it between open (○) and muted (✕). Put two or more dots on the same fret and a barre bar is drawn automatically, so barre chords like F or B♭ come out right. Choose how many frets are shown (3–6), the starting fret (high-position chords show a "5fr" label on the right), the chord name, the dot color, whether finger numbers show, and whether string names (E A D G B e) appear. It supports guitar (6 strings), ukulele (4 strings) and bass (4 strings), and for guitar you can load common open chords — C, G, D, A, E, Am, Em, Dm, F — from a preset in one click. When it's ready, download a transparent SVG (vector — stays crisp at any size, drops straight into a method book, blog or lyric sheet) or download / copy a high-resolution white PNG. Building the diagram and exporting the SVG/PNG all happen entirely in your browser — nothing is uploaded, stored or sent to a server — and the figure only contains the chord you typed plus shapes (lines, dots, text), so it includes no third-party assets. No install, no sign-up, free to use.
How to use
- Pick the instrument (guitar / ukulele / bass), then load a preset (C, G, Am…) on guitar or start from a blank fretboard.
- Click fretboard cells to drop fingered dots, click a dot again to cycle its finger number (1–4), and click the strip above a string to toggle open (○) / muted (✕).
- Set the chord name, starting fret and color, then save a transparent SVG or a white PNG (or copy the PNG).
FAQ
Can it draw barre chords?
Yes. Put two or more fingered dots on the same fret (the same horizontal row) and a barre bar is drawn automatically across them, so barre chords like F, B♭ and high-position shapes come out correctly.
Can I add finger numbers?
Yes. Click a fingered dot again to cycle its finger number 1 → 2 → 3 → 4, and once more to remove the dot entirely. If you'd rather show plain dots, turn the "finger numbers" option off.
Can I make high-position chords?
Yes. Change the starting fret and the diagram shows a "5fr"-style label on the right, drops the thick nut line and draws the shape as a high-position chord. You can also choose how many frets are shown (3–6).
Can I make ukulele or bass chord diagrams too?
Yes. Switch the instrument to ukulele (4 strings, G C E A) or bass (4 strings, E A D G) and the string count and string names change. On guitar you can also load common chords — C, G, D, A, E, Am, Em, Dm, F — from a preset in one click.
Should I save as SVG or PNG?
For print, method books, blogs or lyric sheets, the transparent SVG (vector) is best — it stays crisp at any size. For pasting straight in as an image or posting to social media, the high-resolution white PNG is easiest. You can save either, and the PNG can also be copied to the clipboard.
Is my chord diagram uploaded?
No. Building the diagram, exporting the SVG/PNG and copying to the clipboard all run entirely in your browser — nothing is uploaded, stored or sent to a server. The figure only contains the chord you entered plus lines, dots and text.