Runs in your browser · nothing is uploaded

Text diagrams,drawn properly.

Paste the box diagram you (or your AI) already wrote. ascii2svg turns it into a crisp, animated SVG, and proves every character is exactly where you put it.

Start drawing →

Playground

Draw in text. Ship a picture.

Pick an example or paste your own. Everything renders as you type, with Python running right here in your browser tab.

Your diagram

Result

Starting…

Boxes: +--+ / | | / +--+ or ┌─┐ │ │ └─┘. Arrows end in v ^ < > or ▼ ▲ ▶ ◀, touching (or one space from) the box they point at. Warnings say exactly what to move; click one to jump there. Runs ascii2svg with Pyodide.

How it works

Three steps, no guessing.

ascii2svg never invents a shape. When it isn't sure, a character stays text, and every render is checked against your input before you see it.

Paste plain text

ASCII or Unicode, from a README, a code comment or a chat with an AI.

+--------+     +-------+
|  api   |---->|  db   |
+--------+     +-------+

Check and repair

Warnings say exactly what to move. Fix alignment lines up what a model got one column wrong.

line 2, col 12: the line '│' is one
column right; move one of them
✓ Fixed 5 misalignments

Ship a verified SVG

Light and dark, animated or still. The SVG is read back and compared cell by cell.

ok Rendered 2 boxes and 1 arrow
(3x24); 1:1 self-check exact

Why ascii2svg

Professional pictures from the text you already have.

1:1

Faithful, provably

Every character lands in its exact cell, verified by reading the SVG back.

⇥

Fixes LLM diagrams

Walls, connectors and arrowheads one column off move into line. Your words never change.

◐

Alive, light and dark

Lines draw themselves, pulses follow the arrows, and the theme follows your reader.

△

More than boxes

Flowcharts, sequence and state diagrams, C4, UML, ER crow's feet, Gantt and bar charts.

{ }

Built for agents

One JSON report for every outcome, an MCP server, and a Claude skill.

py

Zero dependencies

One Python file. The same file runs this page through WebAssembly.

Your next diagram is one paste away.

Open the playground ★ Star on GitHub