Read on Twitter
Let's look at drawing state-charts in the terminal. Quick refresher: a state-chart is a tree of nodes (or states) that may be either active or inactive. States can parent other states. If a states is active, then its parent node must be active, too. 
We can only render text in the terminal, so to make our boxes we need to "draw" them with characters like these: ┌ | └. They're called box-drawing characters. https://en.wikipedia.org/wiki/Box-drawing_character
Let's render some states. Each state has a width and height, and we'll look at width first. If a state has no child states—if it's a "leaf" in the tree—then its width is equal to the number of characters in its name. Easy.
If a state has child states then it's more complicated. To get its width, we start with the number of characters in its name and add four (corner characters and spaces on either side).
But this is only a minimum width. Its actual width is the total width of its child states, plus gaps, plus four (for the space and vertical line on either side). If this sum is greater than the minimum width, we add extra characters to fill in the box.
Now let's talk about height. Again, leaf states are simple: they always have a height of 1.
Branch states (states with children) are again more complicated. Their height is determined by the height of their children, plus 2—the state's top and bottom lines.
Different combinations of children will result in a different height. If the branch state has one line of leaf states, it will be 3 lines tall.
But we also wrap states when they get too long. This means that, in order to find the height of a state, we first need to lay out the children so that we know their total number of lines.
Branch states might also parent other branch states. The pattern is recursive: in order to find the height of focused, we first need to find the height of idle, and so on.
Now let's talk about rendering active and inactive states. I'll add a second branch state here so that we have more to look at.
As mentioned above, we use box drawing characters to draw the boxes around our branch states. There are three "styles" of these characters: thin, thick, and combined thick-and-thin. We can combine them to build "flat" and "elevated" boxes.
Here we're using our "elevated" character set to draw the boxes around our active states, and the "flat" set for our inactive states. This works well for branch states but it can't tell us anything about which leaf states are active.
To show which leaf states are active or inactive (and to better see the difference overall) we'll also use a lighter color for the inactive states. Looks pretty clear, right?
And that's it! The JavaScript implementation is also pretty interesting, though that will have to be for a different thread. Enjoy this GIF of the algo showing the state of this search bar that I worked on for @createwithplay's docs site.
If you're interested in the code, see the Gist below. I wrote it to work with my own state-charts library ( http://state-designer.com ) but it's simple enough to adapt to any tree. https://gist.github.com/steveruizok/7028cb4ef0e4113b81d046348a9a3a3f
