nomnoml

nomnoml turns remarkably terse text — [a] -> [b] is a complete diagram — into UML-flavored node-edge drawings, laid out automatically in the layered Sugiyama style (Sugiyama et al. 1981). It occupies a sweet spot: expressive enough for state machines and class structure, terse enough that writing a diagram is faster than opening a drawing tool. Below: a pipeline (Figure 1), a state machine (Figure 2), and a class diagram (Figure 3) — each a handful of lines. Click to zoom.

Figure 1: Rendering pipeline

view source: pipeline.noml

Figure 2: Render lifecycle

view source: states.noml

Figure 3: Filter/backend/cache structure

view source: classes.noml

Diagrams can also live inline as fenced code blocks — Figure 4 is authored directly in this page’s source:

Figure 4: An inline diagram, no separate file

References

Sugiyama, Kozo, Shojiro Tagawa, and Mitsuhiko Toda. 1981. “Methods for Visual Understanding of Hierarchical System Structures.” IEEE Transactions on Systems, Man, and Cybernetics 11 (2): 109–25.