## Javascript 281 <del>282</del> <del>287</del> bytes


(Non-meaningful linebreaks inserted for readability)

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->

    f=
    
    a=>' G C E A'+[1,2,3,4,5].map(y=>
    (l=`
    ---------
    `)+[-2,3,7,0].map(
    x=>(z=a.match(/(.#?)(.*)/),
    [...'9'+{'':14,7:147,m:40,m7:740,maj7:148,sus4:24,dim:30,dim7:360}[z[2]]]
    .map(i=>(+i+'D EF G A BC'.search(z[1][0])+!!z[1][1]+8-x)%12)
    .sort((a,b)=>a-b)[0]-y?'| ':'|#'
    )).join``+'|').join``+l
    
    
    
    document.getElementById("mysubmit").onclick=function() {
      document.getElementById("out").innerHTML=f(document.getElementById("myinput").value)
    }

<!-- language: lang-html -->

    <input type="text" value="G7" id="myinput">
    <input type="submit" id="mysubmit">
    <pre id="out"></pre>

<!-- end snippet -->

## Commentary

I've never been so happy at Javascript's weird type conversions. This is probably the first time I've ever wanted 40 + 9 to equal 409 :) It's also really fortunate that integers are acceptable as keys in Objects.

There's nothing too clever going on here. I subtract 3 from each chord note in order to keep the range within 0-9, so that I can temporarily express a chord as a 3-digit number. Luckily, the order of notes isn't important, so we can express 036 as 360.