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.

The example above was drawn when the site was built, so the transform is on the page either way. The drawing grid needs JavaScript, and so does replacing the example with your own diagram. At a terminal, ascii-studio-cli --style light < diagram.txt resolves a file, and --from ascii --to double converts one style to another.

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