ditaa: ASCII art to diagram

简介 / Introduction

ditaa is a notation for “describing shapes as text”: you hand-write +---+ borders and | verticals in the source, and the backend renders them into an actual diagram. PlantUML ships the ditaa engine, so @startditaa turns ASCII art straight into an image — handy for quick wireframe sketches or layouts with a deliberately hand-drawn feel. Mermaid has no ASCII art syntax, but a flowchart can express exactly the same service topology.

PlantUML 版

PlantUML wraps a ditaa source block in @startditaa / @endditaa. Arrows use +------>, vertical arrows use v, | draws verticals, and +---+ draws borders:

1
2
3
4
5
6
7
8
9
10
11
12
13

@startditaa
   +----------+       +-------------+
   |   Web    |       |             |
   |  Client  |       |   Gateway   |
   |          +------>+             |
   +----------+       |             |
                      +-------------+
                        |         |
                        v         v
                  +---------+ +---------+
                  |  Auth   | | Orders |
                  +---------+ +---------+
@endditaa

Spacing in the ASCII art must line up exactly, and an arrow head has to land precisely on the target box border — otherwise the rendered connector drifts.

Mermaid 版

Mermaid expresses the same structure with a flowchart, where nodes and edges are declared explicitly and no character alignment is needed:

1
2
3
4

flowchart TD
  Web["Web Client"] --> Gateway["Gateway"]
  Gateway --> Auth["Auth"]
  Gateway --> Orders["Orders"]

对比 / Side-by-side

小结 / Wrap-up

ditaa shines when you want a “what you see is what you get” sketch — it is fast for wireframe prototypes, at the cost of brutal sensitivity to spacing. For maintainable, auto-laid-out topology diagrams, a Mermaid flowchart is the better tool. The two also mix well: lock the layout down with ASCII art first, then translate it into Mermaid for team collaboration.