Architecture Diagram Examples in ASCII Art

Why ASCII for Architecture Diagrams?

Architecture diagrams are essential for communicating system design, but they are notoriously difficult to maintain. Binary diagram files (Visio, Draw.io, Figma) cannot be diffed in pull requests, often become outdated, and require specific software to edit. ASCII architecture diagrams solve these problems: they live in your codebase, they diff cleanly, and anyone with a text editor can update them.

Each example below is a complete, valid ASCII diagram that you can paste directly into our ASCII to SVG Converter to produce a polished vector graphic. Every pattern comes from real-world software systems.

1. Three-Tier Client-Server

The most fundamental web architecture pattern: a client communicates with a server, which communicates with a database. This diagram includes a cache layer, which is a common extension.

+-----------+          +-----------+          +-----------+
|           |          |           |          |           |
|  Client   |--------->|   API     |--------->| Database  |
|  Browser  |<---------|  Server   |<---------|  (SQL)    |
|           |          |           |          |           |
+-----------+          +-----------+          +-----------+
                            |
                            v
                       +-----------+
                       |   Cache   |
                       |  (Redis)  |
                       +-----------+

When to use: README files for web applications, onboarding documentation, and system design interviews.

2. Microservices with API Gateway

A microservices architecture with an API gateway that routes requests to individual services, each with its own database. This pattern enforces service isolation and independent deployability.

                  +-------------+
                  | API Gateway |
                  +------+------+
                         |
          +--------------+--------------+
          |              |              |
          v              v              v
    +-----+----+   +----+-----+  +-----+----+
    |  Auth    |   |  Users   |  | Products |
    | Service  |   | Service  |  | Service  |
    +-----+----+   +----+-----+  +-----+----+
          |              |              |
          v              v              v
    +-----+----+   +----+-----+  +-----+----+
    | Auth DB  |   | Users DB |  |Products  |
    |          |   |          |  |   DB     |
    +----------+   +----------+  +----------+

When to use: System design documentation, ADRs (Architecture Decision Records), and service dependency mapping.

3. Layered Architecture

The layered (or n-tier) architecture separates concerns into horizontal layers. Each layer only depends on the layer directly below it. Double-line borders indicate layer boundaries.

+==============================================+
|            Presentation Layer                |
|  +----------+  +----------+  +----------+   |
|  |   Web    |  | Mobile   |  |   CLI    |   |
|  +----------+  +----------+  +----------+   |
+==============================================+
|            Application Layer                 |
|  +----------+  +----------+  +----------+   |
|  |  Auth    |  | Orders   |  | Reports  |   |
|  +----------+  +----------+  +----------+   |
+==============================================+
|              Domain Layer                    |
|  +----------+  +----------+  +----------+   |
|  |  User    |  | Product  |  | Payment  |   |
|  +----------+  +----------+  +----------+   |
+==============================================+

When to use: Clean architecture documentation, domain-driven design overviews, and codebase structure guides.

4. Network Topology

Network diagrams show the physical or logical layout of infrastructure components. This example shows a simple two-tier web and application server setup behind a firewall.

                  +----------+
                  | Internet |
                  +----+-----+
                       |
                  +----+-----+
                  | Firewall |
                  +----+-----+
                       |
          +------------+------------+
          |                         |
     +----+-----+            +-----+----+
     |  Switch  |            |  Switch  |
     +----+-----+            +-----+----+
          |                         |
     +----+----+              +-----+-----+
     |         |              |           |
+----+---+ +---+----+   +----+---+  +----+---+
| Web 01 | | Web 02 |   | App 01 |  | App 02 |
+--------+ +--------+   +--------+  +--------+

When to use: Infrastructure documentation, network security audits, and cloud architecture planning.

5. CI/CD Pipeline

Pipeline diagrams show a linear sequence of stages. Rounded boxes (using . and ' corners) give the pipeline a softer, more modern appearance.

.--------.     .----------.     .--------.     .--------.     .--------.
| Commit |---->|  Build   |---->|  Test  |---->| Stage  |---->| Deploy |
'--------'     '----------'     '--------'     '--------'     '--------'

When to use: CI/CD documentation, DevOps runbooks, and GitHub Actions workflow descriptions.

6. Event-Driven Architecture

Event-driven systems decouple producers from consumers through a message broker. This pattern is common in systems that need high scalability and loose coupling.

+----------+          +----------+          +----------+
| Order    |--------->|  Event   |--------->| Email    |
| Service  |          |  Bus     |          | Service  |
+----------+          +----+-----+          +----------+
                           |
                           +----------+
                           |          |
                           v          v
                      +----+---+ +---+------+
                      |Inventory| |Analytics |
                      | Service | | Service  |
                      +---------+ +----------+

When to use: Event storming documentation, message queue architecture docs, and system integration diagrams.

7. Request-Response Sequence

Sequence-style diagrams show the temporal flow of messages between components. While not true UML sequence diagrams, they effectively communicate request-response patterns in ASCII.

+--------+          +--------+          +--------+
| Client |          | Server |          |   DB   |
+---+----+          +---+----+          +---+----+
    |                   |                   |
    |  POST /login      |                   |
    |------------------>|                   |
    |                   |  SELECT user      |
    |                   |------------------>|
    |                   |                   |
    |                   |  user row         |
    |                   |<------------------|
    |                   |                   |
    |  200 OK + token   |                   |
    |<------------------|                   |
    |                   |                   |

When to use: API documentation, debugging guides, and protocol explanations.

8. Hexagonal Architecture

Also known as ports and adapters, hexagonal architecture places the domain logic at the center with adapters around the edges. This pattern is difficult to draw in ASCII but the nested box approach works well.

+============================================+
|              Adapters (Driving)             |
|  +----------+  +----------+  +----------+  |
|  | REST API |  | GraphQL  |  |   CLI    |  |
|  +-----+----+  +-----+----+  +-----+----+  |
|        |              |              |       |
+========|==============|==============|======+
|        v              v              v       |
|  +------------------------------------+     |
|  |          Application Core          |     |
|  |  +-----------+  +-------------+    |     |
|  |  |  Use      |  |   Domain    |    |     |
|  |  |  Cases    |  |   Model     |    |     |
|  |  +-----------+  +-------------+    |     |
|  +------------------------------------+     |
|        |              |              |       |
+========|==============|==============|======+
|        v              v              v       |
|  +----------+  +----------+  +----------+   |
|  |   SQL    |  |  Cache   |  |  Email   |   |
|  | Adapter  |  | Adapter  |  | Adapter  |   |
|  +----------+  +----------+  +----------+   |
|              Adapters (Driven)              |
+============================================+

When to use: Domain-driven design documentation, architecture overview diagrams, and clean code guides.

Next Steps

To convert any of these diagrams into a polished SVG, paste the code block into our ASCII to SVG Converter. You can modify the examples, switch between dark and light themes, and export the result as SVG or PNG for your documentation.