Diagram as Code & Diagram as Art

Two habits from the same keyboard. The first is the blueprint: architecture drawn twice, once as an ASCII box map that survives a terminal, a ticket and an email, and once as a Mermaid flowchart that a browser renders from ten lines of text. The second is play: Japanese motifs drawn in the same eighty columns, and an orca set that borrows the blueprint's own trick — the same subject once as a picture, once as a graph. Both are text in git before they are pictures.

Rights. Every image on this page is the property of Cloud Lab Works LLC and is shown watermarked. Sources, licences and versions drawn for another estate are by inquiry.

Diagram as code

One blueprint from the lab, in two notations of the same drawing. Left: the ASCII map, width-checked so it never wraps. Right: the Mermaid source rendered. When the two disagree, the code is wrong, which is the point of keeping both.

ASCII box map · Mermaid flowchartInfrastructure as Music, nightlyThe lab plays its own state. Every night the recording is cut, measured, drawn and written, then published with the music.Ask about this blueprint →

Diagram as art

Japanese motifs in the character set a 1978 terminal had: pipe, underscore, slash, tilde, a period for the spray. Hand-composed, each under ninety columns.

ASCII · monospace, ink on creamToriiThe gate, in eleven lines of pipe and underscore. Two lintels, two posts, the space between them is the point.Inquire about the original →
ASCII · monospace, ink on creamFujiSnow on the shoulders as a zigzag, the sun as a period. Every woodblock does the same three things.Inquire about the original →
ASCII · monospace, ink on creamThe waveHokusai's claw as one long curl rising from the left, the spray as periods. The boat is not in this one; the boat never had a chance.Inquire about the original →
ASCII · monospace, ink on creamTsuruThe crane, standing. The head is three characters; the legs are the same pipe as the torii posts.Inquire about the original →
ASCII · monospace, ink on creamChōchinThe paper lantern: a hood, six ribs, a tassel. The ribs are underscores because that is what ribs are.Inquire about the original →
ASCII · monospace, ink on creamPagodaThree stories of roof and lath. Each roof is one line wider than the one above, which is the whole trick of a pagoda.Inquire about the original →
ASCII · monospace, ink on creamDarumaOne eye painted. The other waits for the goal. Round, weighted, gets back up: the whole doll is a proverb.Inquire about the original →
ASCII · monospace, ink on creamTakeThree culms, the nodes as double bars, leaves as slashes. Bends in wind; drawn straight because ASCII does not bend.Inquire about the original →

The orca set: once as a picture, once as a graph

Three pieces, each drawn twice the way the blueprints above are: the ASCII on the left is the drawing, the Mermaid on the right is the same subject read as a sequence or a structure instead of a shape. Orca, not "killer whale" — the site's own rule, stated on the mark's own card.

ASCII · monospace, ink on cream · Mermaid flowchartShachiAn orca surfacing: the back breaks first, then the fin, and that is the whole of what the water gives you. Japanese writes the animal 鯱, the fish radical beside the tiger, a tiger being the nearest thing they had to compare it to. The graph on the right is the same four seconds read as a cycle instead of a silhouette.Inquire about the original →
ASCII · monospace, ink on cream · Mermaid flowchartThe podFour dorsal fins at the surface and nothing else showing. Tallest is a bull, the straight blades are cows and a calf tucked beside one of them — this is the whole of what you see from a beach. The graph on the right is what the beach doesn't show: the matriline underneath, a grandmother leading daughters, a son who never leaves.Inquire about the original →
ASCII · monospace, ink on cream · Mermaid flowchartSeigaihaBlue sea waves. Concentric arcs, each rank offset by half a wave, repeating until the eye gives up and reads it as water — the oldest pattern here, and the only one that tiles. The graph on the right is the rule the tiling follows, not the water itself.Inquire about the original →

How it is made. The sources are one Python file: an ASCII block and a Mermaid block per blueprint, an ASCII block per motif, and for the orca set both an ASCII block and a Mermaid block per piece. A script renders the text with a monospace face on cream, renders the Mermaid in a headless browser, pads both, and bakes the watermark in. Rerun the script and every image on this page is rebuilt from the text; nothing here was drawn with a mouse.