Make Bracket Squares
JavaScript (ES6), 269 274 278 296 261 bytes

Edit Saved 4 bytes thx @Neil



x=&gt;[...x].map(c=&gt;{g.push([],[]),z='&lt;{[(&gt;}])'.indexOf(c);if(z&gt;3)for(j=a=o[z-4].pop();j&lt;=b;j++)S(j,a,'|'),S(j,b,'|'),S(a),S(b);else o[z].push(b);b+=2},S=(y,x=j,c='-')=&gt;g[y][x]=g[y][x]?'+':c,o=[[],[],[],[]],g=[],b=0)&amp;&amp;g.map(r=&gt;[...r].map(c=&gt;c||' ').join``).join`
`


TEST



F=x=&gt;[...x].map(c=&gt;{g.push([],[]),z='&lt;{[(&gt;}])'.indexOf(c);if(z&gt;3)for(j=a=o[z-4].pop();j&lt;=b;j++)S(j,a,'|'),S(j,b,'|'),S(a),S(b);else o[z].push(b);b+=2},S=(y,x=j,c='-')=&gt;g[y][x]=g[y][x]?'+':c,o=[[],[],[],[]],g=[],b=0)&amp;&amp;g.map(r=&gt;[...r].map(c=&gt;c||' ').join``).join`
`

// Less golfed
U=x=&gt;(
  S = (y,x=j,c='-')=&gt;g[y][x]=g[y][x]?'+':c,
  o = [[],[],[],[]],
  g = [],
  b = 0,
  [...x].map(c=&gt;
  {
    g.push([],[]),
    z='&lt;{[(&gt;}])'.indexOf(c);
    if(z&gt;3)
      for(j = a =o[z-4].pop(); j &lt;= b; j++)
        S(j,a,'|'),
        S(j,b,'|'),
        S(a),
        S(b)
    else
      o[z].push(b);
    b += 2
  }),
  g.map(r=&gt;
    [...r].map(c=&gt;c||' ').join``
  ).join`\n`
)

function test() {
  O.textContent=F(I.value)
}

test()
Input:&lt;input id=I value='[{][&lt;(]})&gt;(())' oninput='test()'&gt;
&lt;pre id=O&gt;&lt;/pre&gt;