Make Bracket Squares Every programmer knows that brackets []{}()&lt;&gt; are really fun.  To exacerbate this fun, groups of interwoven brackets can be transformed into cute and fuzzy diagrams.

Let's say that you have a string that contains balanced brackets, like [{][&lt;(]})&gt;(()).  Step one is to rotate the string 45 degrees clockwise. (In Mathematica, this can be almost done with Rotate[ur_string,-pi/4]). Here is the result of the first step:

[
 {
  ]
   [
    &lt;
     (
      ]
       }
        )
         &gt;
          (
           (
            )
             )


Next add a diagonal space between each character.

[

  {

    ]

      [

        &lt;

          (

            ]

              }

                )

                  &gt;

                    (

                      (

                        )

                          )


Next, start with the left-most bracket and draw a square between it and its partner in crime.

+---+
|   |
| { |
|   |
+---+

      [

        &lt;

          (

            ]

              }

                )

                  &gt;

                    (

                      (

                        )

                          )


Repeat this process with each pair of brackets, overwriting previous characters with +s if need be.

+---+
|   |
| +-+---------+
| | |         |
+-+-+         |
  |           |
  |   [       |
  |           |
  |     &lt;     |
  |           |
  |       (   |
  |           |
  |         ] |
  |           |
  +-----------+

                )

                  &gt;

                    (

                      (

                        )

                          )


Continue until you have made everything nice and square.

+---+
|   |
| +-+---------+
| | |         |
+-+-+         |
  |           |
  |   +-----+ |
  |   |     | |
  |   | +---+-+---+
  |   | |   | |   |
  |   | | +-+-+-+ |
  |   | | | | | | |
  |   +-+-+-+ | | |
  |     | |   | | |
  +-----+-+---+ | |
        | |     | |
        | +-----+ |
        |         |
        +---------+

                    +-----+
                    |     |
                    | +-+ |
                    | | | |
                    | +-+ |
                    |     |
                    +-----+


Input

Input will be a single line of balanced brackets and no other characters, with each bracket being one of []{}()&lt;&gt;.  Each type of bracket is balanced individually, though different types may overlap (this is what makes the squares look interesting).  A trailing newline is optional.

Output

Output will be the interlocking square pattern generated from the bracket string.  Trailing spaces and trailing newline are optional, but there mustn't be leading whitespace.

Goal

This is code-golf, fewest bytes wins.
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;