Skip to main content

Quickstart

This is the fastest way to understand what ASCII Diagram is for.

1. Open the app​

Go to app.asciidiagram.com.

Start with a new document. The initial diagram is empty and ready for drawing.

2. Learn the core tools​

The default workflow revolves around five tools:

  • V for Select
  • H for Pan
  • B for Box
  • T for Text
  • A for Arrow

These are enough to build most diagrams quickly.

3. Draw two boxes​

Switch to Box and drag out a couple of rectangles on the grid.

Then use the property panel to add titles like:

  • Client
  • API

4. Add an arrow​

Switch to Arrow and connect the boxes.

You can:

  • click to place segments
  • drag arrow endpoints
  • snap endpoints onto objects
  • choose routing in the property panel

5. Add text​

Use the Text tool to label a flow, note a protocol, or describe an edge case.

For example:

+--------+    +-----+
| Client |--> | API |
+--------+    +-----+
     HTTPS / JSON

Select multiple objects and use Ctrl+G / Cmd+G to group them.

Grouping is useful when several objects should move together as one unit.

7. Save the file​

Use the File menu to save the current document as a .asciid file.

In supported browsers, the app can write directly to the chosen file. Otherwise it will download the current document.

8. Copy rendered ASCII​

Use Copy ASCII when you want the current diagram as plain text for:

  • a README
  • an issue
  • a pull request
  • a design note

Read this next​