Skip to content

# ASCII & Unicode Diagram Studio

Paste a diagram you already have, pick a connector style, and every corner, tee and crossing is redrawn in it: `+---+` becomes `┌───┐`.

Drawn when the site was built, by running the same transform your browser runs. With JavaScript on, this example loads into the editable grid and you can redraw it or replace it with your own.

## Before and after

41 × 9 cells

The example is plain ASCII, which is what a diagram in a README usually is. Every `+` in it stands for a different glyph, and only its four neighbours say which one: eight of them are box corners, three are tees, and one is a crossing.

    +--------+     +---------+     +--------+
    | source |---->| encoder |---->|  sink  |
    +--------+     +----+----+     +--------+
                        |
         +--------------+--------------+
         |              |              |
    +----+---+     +----+---+     +----+----+
    |  file  |     | stdout |     | metrics |
    +--------+     +--------+     +---------+

    ┌────────┐     ┌─────────┐     ┌────────┐
    │ source ├────>│ encoder ├────>│  sink  │
    └────────┘     └────┬────┘     └────────┘
                        │
         ┌──────────────┼──────────────┐
         │              │              │
    ┌────┴───┐     ┌────┴───┐     ┌────┴────┐
    │  file  │     │ stdout │     │ metrics │
    └────────┘     └────────┘     └─────────┘

## The connector styles

6 styles

Five alphabets. The glyphs in each row are the ones this page would emit for those four junctions.

Every connector style, on the same four junctions
Style | What it looks like | Corner | Tee | Crossing | Line
--- | --- | --- | --- | --- | ---
ASCII | Plain ASCII, safe in any font | + | + | + | -
Light | Thin single lines | ┌ | ┬ | ┼ | ─
Heavy | Thick single lines | ┏ | ┳ | ╋ | ━
Double | Two parallel lines | ╔ | ╦ | ╬ | ═
Rounded | Thin lines with rounded corners | ╭ | ┬ | ┼ | ─
Dashed | Thin dashed lines, light junctions | ┌ | ┬ | ┼ | ┄

## The export formats

8 formats

The same diagram leaves in whichever of these suits where it is going.

The eight export formats
Format | What it is for | How its output starts
--- | --- | ---
Plain text | Paste into a terminal, a commit message or a code comment. | ┌────────┐ ┌─────────┐ ┌────────┐
Markdown | A fenced code block for a README. | ```
ANSI | Real SGR colour escapes when connectors are highlighted; plain text otherwise. | ┌────────┐ ┌─────────┐ ┌────────┐
HTML <pre> | Drop into a web page with the characters already escaped. | <pre>┌────────┐ ┌─────────┐ ┌───────…
SVG | Scales for docs and slides. | <svg xmlns="http://www.w3.org/2000/svg" widt…
Rust string literal | Paste into source as an escaped string. | "┌────────┐ ┌─────────┐ ┌────────┐\n…
JSON project | Save the grid and load it back later. | {"width":41,"height":9,"rows":["┌────────┐ …
PNG image | A pixel raster to drop into a doc or an issue; rendered in your browser. | 89 50 4E 47 …

This is generated in browser and is not sent to pah.moi servers.

About this tool2 paragraphs

You can also draw one from scratch. The editable grid takes a pencil, an eraser, typed text, a rectangular selection and a move, with the mouse or entirely from the keyboard, and whatever you draw feeds the same restyling and the same exports.

Take the result away in eight formats, from a fenced Markdown block to an SVG or a PNG image. Offline, `ascii-studio-cli --style light < diagram.txt` prints the same thing, and `--format png` writes a PNG.

Use it locally This tool has a native command line twin. Build `ascii-studio-cli` from the site's source with:

    cargo build --release --bin ascii-studio-cli

Source and licence terms