The Monodraw diagram editor

Updated on .

The Text editor family tree was made using a macOS-only application called Monodraw, which lays out diagrams using only plain text UTF-8 characters. The Unicode lines and arrows work well and, depending on the typeface, look similar to what a constrained version of OmniGraffle might produce. Forcing a fixed grid, limiting fill patterns, and only supporting rectilinear layouts increase the clarity and accessibility of the diagrams.

A major benefit to this approach is that diagrams can be kept in comments alongside the source code they describe, making them much more valuable. Descriptions that might have taken paragraphs to explain can be rendered as flowcharts, sequence diagrams, or data graphs. And when the diagram needs to change, those differences are visible in a version control system’s review workflow. Unfortunately, the editor’s flexibility means that, like other graphics editors, Monodraw’s internal file format is binary. This means that the file where boxes and lines can be moved around as objects is tricky to keep in typical version control software. It’s likely that this file will live only on the author’s machine, hindering collaboration.

When a diagram is embedded in a webpage, the text mode output acts like other text, not a bitmap image or even an SVG. Depending on the styles applied, it can respond to light and dark mode changes, embed hyperlinks, and scale with the user’s selected text size. For the diagrams to make sense, visitors need a suitable monospace typeface installed, with the line drawing and arrow glyphs from Unicode. Another option is to export the diagrams as SVG, which converts each glyph that makes up the diagram to a path. This reproduces the diagram exactly, but comes at the cost of hyperlinks and straightforward dark mode support.

Export sizes

The text output ends up being the smallest, since it’s only storing a byte or two per grid cell. SVG, as it’s exported by Monodraw, is surprisingly large because it’s rendering each glyph as a separate path. So a box, for instance, might require dozens of individual paths to make up each line segment, instead of using the more compact <rect> tag. Minifying the SVG can cut its size to a quarter of the original exported version and compression can bring it close to the uncompressed text output.