## Javascript 287 bytes


(Non-meaningful linebreaks inserted for readability)

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

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

    f=

    a=>' G C E A'+[1,2,3,4,5].map(y=>
    (l=`
    ---------
    `)+[10,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]]).split``
    .map(i=>(+i+'A BC D EF G'.search(z[1][0])+!!z[1][1]+15-x)%12)
    .sort((a,b)=>a-b)[0]-y?'| ':'|#'
    )).join``+'|').join``+l


    document.getElementById("mysubmit").onclick=function() {
      console.log(f(document.getElementById("myinput").value))
    }

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

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

<!-- 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.