How do I draw box-and-pointer diagrams?

Question

How do I draw box-and-pointer diagrams? For example, I'd like to illustrate what happens when you manipulate nodes in a linked list. Can I use MathJax?

Answer 1

Here is an example:

$$ \newcommand{ptr}[1]{\overset{\mathtt{#1}}{\longrightarrow}} \begin{align*} &\mathtt{newNode} \\ &\quad\downarrow \\ \mathtt{head} \ptr{} \fbox{first} \ptr{next} &\fbox{another} \ptr{next} \mathtt{null} \\ &\fbox{second} \ptr{next} \fbox{rest} \ptr{next} \fbox{of} \ptr{next} \fbox{list} \ptr{next} \mathtt{null} \end{align*} $$

$$
\newcommand{ptr}[1]{\overset{\mathtt{#1}}{\longrightarrow}}
\begin{align*}
                                             &\mathtt{newNode} \\
                                             &\quad\downarrow  \\
\mathtt{head} \ptr{} \fbox{first} \ptr{next} &\fbox{another} \ptr{next} \mathtt{null} \\
                                             &\fbox{second}  \ptr{next}
                                              \fbox{rest}    \ptr{next}
                                              \fbox{of}      \ptr{next}
                                              \fbox{list}    \ptr{next} \mathtt{null}
\end{align*}
$$

The key elements are:

• To get the \$\mathtt{typewriter}\$ font: \mathtt{the text}
• To create a \$\fbox{box}\$: \fbox{box}
• To draw an arrow \$\longrightarrow\$: \longrightarrow
• To label the arrow \$\overset{\mathtt{label}}{\longrightarrow}\$: \overset{\mathtt{label}}{\longrightarrow}

• To reduce code repetition, define a \ptr{label} command:

  \newcommand{ptr}[1]{\overset{\mathtt{#1}}{\longrightarrow}}
  

• To make it span multiple lines:

  \begin{align*}
      first line &alignmentpoint something something \\
      next line &alignmentpoint stuff \\
      third line &alignmentpoint stuff
  \end{align*}
  

Answer 2

I think it could be worth mentioning that http://yuml.me/diagram/scruffy/class/draw can be a nice picture-based alternative to the almighty MathJax, for perhaps simpler diagrams:

[Customer]<>-orders*>[Order]
[Order]++-0..*>[LineItem]
[Order]-[note:Aggregate root.]

Answer 3

It's almost a duplicate of @Mat's Mug answer, but there is also Scruffy that is an open-source desktop application designed to create yUML-like diagrams with a yUML-like syntax.

Morevoer, it also introduces some extensions to the yUML syntax and provides some basic support for sequence diagrams:

We really need to embed such a tool on some StackExchange sites. It would be priceless :)

Answer 4

http://asciiflow.com/ !

                    +-------------------+                     
                    |TimerQueue (static)|                     
                    +-------+-----------+                     
                            |                                 
+-----------+        +------v-------+          +-------------+
|TimerHolder+-------->TimerQueueTime+---------->TimerCallback|
+-----^-----+        +--------------+          +-----+-------+
      |                                              |        
      |                                              |        
  +---+-+                                        +---v----+   
  |Timer<----------------------------------------+Cyclical|   
  +-----+                                        +--------+   

It is too bad that since a few weeks they nag you for 3 dollars ;\

Answer 5

You can use Graphviz, possibly through its online version, GraphViz Workspace.

For example:

digraph {
  node [ shape = box ];

  a -> b;
  b -> c;
  c -> d1;
  c -> d2;
}

Answer 6

You can use yEd (a desktop application). I especially like its grid mode, which allows you to position the boxes exactly the way you want, while keeping them evenly spaced.

Example:

Answer 7

I'm doing this with tikz; see for example the question I just posted on tex.stackexchange:

https://tex.stackexchange.com/questions/201071/how-do-i-make-tikz-circular-arrowheads-concentric-to-the-point-they-connect