13
\$\begingroup\$

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?

\$\endgroup\$
14
\$\begingroup\$

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*}
    
\$\endgroup\$
  • 1
    \$\begingroup\$ See also: MathJax basic tutorial and quick reference on Meta.Math.SE. \$\endgroup\$ – Mathieu Guindon May 1 '14 at 17:38
  • 1
    \$\begingroup\$ gah, why is there MathJax but no syntax highlighting on Meta? If <!-- language: lang-tex --> worked here, this would be more readable :/ \$\endgroup\$ – amon May 1 '14 at 17:41
9
\$\begingroup\$

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

enter image description here

\$\endgroup\$
  • 2
    \$\begingroup\$ I love yUML *-* \$\endgroup\$ – Morwenn May 1 '14 at 20:20
  • 1
    \$\begingroup\$ Don't forget about the good old mspaint.exe! (It comes with free-hand circles!) \$\endgroup\$ – Simon Forsberg May 1 '14 at 21:01
  • 1
    \$\begingroup\$ Just a note: on my work computer I can't see any images linked in questions/answers on SE, but math jax works just fine. For people like me, it's always a pleasure to see math jax used on a programming SE instead of enter image description here - the alt-text of the image. \$\endgroup\$ – Shaz May 1 '14 at 21:04
5
\$\begingroup\$

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:

yUML-like sequence diagram. That rocks!

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

\$\endgroup\$
5
\$\begingroup\$

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 ;\

\$\endgroup\$
4
\$\begingroup\$

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;
}

rendered result of the code above

\$\endgroup\$
3
\$\begingroup\$

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:

\$\endgroup\$
2
\$\begingroup\$

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

\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .