Published on 2026-02-22

ASCII Art to Images with Ditaa

How to turn classic plain-text ASCII diagrams into beautiful bitmap images using Ditaa.

Ditaa (DIagrams Through Ascii Art) is a legendary small command-line utility that takes ASCII art—the kind containing characters like -, |, and +—and converts it into smooth, visually pleasing diagrams.

While modern tools like Mermaid offer declarative syntax, some developers just love “drawing” directly in plain text. Ditaa ensures that your ASCII art doesn’t just stay raw text, but renders beautifully in your PDF and HTML exports.

Basic Syntax

To use ditaa, simply draw your diagram using ASCII characters within a ditaa code block.

syntax

+--------+   +-------+    +-------+
|        | --+ ditaa +--> |       |
|  Text  |   +-------+    |diagram|
|Document|   |!magic!|    |       |
|     {d}|   |       |    |       |
+---+----+   +-------+    +-------+
    :                         ^
    |       Lots of work      |
    +-------------------------+

The ditaa engine natively recognizes closed boxes made of +, -, and |.

Colors

You can colorize boxes by adding standard hexadecimal color codes (like cFFE or c000) inside the box. Ditaa looks for words starting with a c followed by a 3 or 6 digit hex code.

Alternatively, Ditaa recognizes named colors:

cRED
cBLU
cGRN
cYEL

syntax

/--------\
| cBLU   |
|  Data  |
|  Base  |
|     {s}|
\--------/

Special Shapes

You can change the shape of the boxes by using different corner characters.

Storage / Database: Add {s} anywhere inside the box.
Document: Add {d} anywhere inside the box.
Input / Output: Add {io} anywhere inside the box.
Rounded Corners: Use / and \ for the corners instead of +.

Example

syntax

+-------------+
| cPNK        |
|  Hello      |
|  World! {io}|
+------+------+
       |
       v
/-------------
| cYEL        |
|  Storage {s}|
\-------------/

Ditaa remains one of the fastest ways to document ideas directly in a source file, with the added benefit of rendering gorgeously in your final PDF.