当サイトを閲覧いただきありがとうございます。本記事はAI時代にコード管理できる図形シリーズの第3回として、テキストアート系ダイアグラム3種を比較解説します。シリーズ全体の一覧は完全ガイドをご覧ください。
テキストアート系とは、+ - | > などの文字だけで図を描くアプローチです。特別なツールがなくてもテキストエディタだけで見える図になりますし、ツールを通せばきれいな画像に変換することもできます。
ここが面白いところなのですが、AIの出力はテキストそのものなので、実はテキストアートこそAIとの相性が最も高い図の形式だったりします。ChatGPTやClaudeに「このシステムの構成図を描いて」と頼むと、まさにこの形式で返ってくる。そしてそれをSvgbobに通せばきれいなSVG画像になる。今後AIが普及するほど、このパイプラインの価値は高まっていくはずです。
3種比較表
| 名称 | 記法 | AI相性 | 描けるもの | 特長 |
|---|---|---|---|---|
| ASCII Art | テキスト | ◎ | 文字だけで構成された図 | 専用ソフト不要。ソースコードのコメントにも埋め込める |
| Ditaa | テキスト | ◎ | ASCIIアート → 画像（PNG）変換 | 文字の図を手書き風の画像に変換 |
| Svgbob | テキスト | ◎ | ASCIIアート → きれいなSVG変換 | Ditaaより高品質。曲線の認識にも対応 |
ASCII Art — 専用ソフト不要の最古参
ASCII Artとは、テキスト文字だけで図や絵を表現する技法です。+、-、|、>、/ などの基本的なASCII文字を組み合わせて、フローチャートやアーキテクチャ図を描きます。
RFC文書やLinuxカーネルのドキュメントなど、プレーンテキスト環境での図解に長い歴史があります。
サンプル：フローチャート
+------------------+
| ユーザー入力 |
+--------+---------+
|
v
+--------+---------+
| バリデーション |
+--------+---------+
|
+------+------+
| |
v v
+-----+----+ +----+------+
| 成功 | | 失敗 |
+-----+----+ +----+------+
| |
v v
+-----+----+ +----+------+
| 処理実行 | | エラー表示 |
+----------+ +-----------++ でコーナー、- と | で線、v と > で矢印を表現します。Monospaceフォントで表示すれば位置が揃います。
サンプル：アーキテクチャ図
+-----------+ +-----------+ +-----------+
| Browser | ----> | Nginx | ----> | App |
| (React) | | (Proxy) | | (Node) |
+-----------+ +-----------+ +-----+-----+
|
+-------------------+-------------------+
| | |
v v v
+-----+-----+ +-----+-----+ +----+------+
| PostgreSQL | | Redis | | S3 |
+------------+ +-----------+ +-----------+サンプル：シーケンス図
Client Server Database
| | |
| POST /login | |
|--------------->| |
| | SELECT user |
| |--------------->|
| | user data |
| |<---------------|
| 200 OK + JWT | |
|<---------------| |メリット・デメリット
ツールが一切不要という手軽さは他のどのツールにも真似できません。ソースコードのコメント、コミットメッセージ、Slackのメッセージ — テキストが書ける場所ならどこにでも図を入れられますし、Git差分が完全に可読です。
ただ、手軽さの裏返しで文字の位置合わせは全て手作業です。ボックスを1つ追加するたびに周囲の罫線を全部ずらす必要があり、ノードが10個を超えるような図は正直やめておいた方がいいです。Monospaceフォント前提なので、環境によっては崩れます。
AIとの相性
テキストアート系のツールの中で、ASCIIアートはAIとの相性が非常に良いです。LLMの出力はそもそもテキストなので、追加の構文を覚えさせる必要すらありません。「このシステムのアーキテクチャ図をテキストで描いて」と投げるだけで即座にASCIIアートが返ってきます。
ただし一つ注意点があって、日本語を含む場合は全角・半角の幅の違いで罫線がズレやすいです。ラベルは英語にするか、日本語を使う場合は生成後に手動で位置調整するのが現実的です。
Ditaa — ASCIIアートを画像に自動変換
Ditaaは「DIagrams Through Ascii Art」の略で、ASCIIアートをきれいなPNG画像に自動変換するJava製ツールです。+、-、| で描かれた四角形を角丸ボックスに変換し、--> をスムーズな矢印に変換します。
特筆すべきは手書き風のデフォルトスタイルです。カッチリした図面ではなく、柔らかい手書き風の見た目で出力されます。
サンプル：システムアーキテクチャ
+----------+ +-----------+ +----------+
| | | | | |
| Client +---->+ Nginx +---->+ App |
| {d} | | | | {io} |
+----------+ +-----------+ +-----+----+
|
+-----v----+
| MySQL |
| {s} |
+----------+{d} はドキュメント型、{s} はストレージ型、{io} はI/O型の図形を意味する特殊マーカーです。
サンプル：カラー指定
+----------+ +-----------+ +----------+
| cBLU | | cGRE | | cPNK |
| Client +---->+ Server +---->+ DB |
+----------+ +-----------+ +----------+cBLU（青）、cGRE（緑）、cPNK（ピンク）のようにカラーコードを指定できます。
メリット・デメリット
ASCIIアートの手軽さとビジュアル品質を両立できるのがDitaaの魅力です。テキストエディタだけで編集できてGit差分も読みやすく、Asciidoctorとの統合もあるのでドキュメント生成パイプラインに組み込みやすい。
気になるのは、出力がPNGのみという点です。2020年代のWebではSVGが欲しい場面が多く、拡大すると劣化するPNGは物足りない。Java依存で環境構築も手間ですし、開発も停滞気味です。次のSvgbobがこれらの課題を解決しているので、新規に導入するなら比較した上で選ぶことをお勧めします。
AIとの相性
入力がASCIIアートなので、前述のASCII Art同様にLLMが自然に生成できます。つまり「AI → ASCIIアート → Ditaa → PNG」というパイプラインを組めば、AIがダイアグラム画像を間接的に生成できることになります。{d} や {s} のようなDitaa固有の特殊マーカーも、プロンプトで指示すれば入れてくれます。
Svgbob — ASCIIアートをSVGに変換する現代版
SvgbobはASCIIアートをSVGに変換するRust製ツールです。Ditaaの現代版とも言える存在で、「PNG出力のみ」「Java依存」といったDitaaの課題を解決しています。曲線や斜め線、円弧などの認識精度も向上しています。
サンプル：曲線・円弧
_____
/ \
| DB |
\_____/
|
.---+---.
/ \
| Cache |
\ /
'-------'Svgbobは /、\、_ などの文字を組み合わせた曲線表現を正確に認識し、滑らかなSVGパスに変換します。
サンプル：ネットワーク構成
.-,( ),-.
.-( )-.
( Internet )
'-( ).-'
'-.( ).-'
|
.-----+------.
| Firewall |
'-----+------'
|
+-----------+-----------+
| |
.-----+------. .-----+------.
| Server A | | Server B |
'-----+------' '-----+------'
| |
+----------+------------+
|
.-----+------.
| Database |
'------------'.-,( ),-. のような複雑なASCII表現を「雲」の形として認識してくれます。
Ditaaとの比較
| 項目 | Ditaa | Svgbob |
|---|---|---|
| 出力形式 | PNG | SVG |
| 実装言語 | Java | Rust |
| 曲線対応 | 限定的 | 充実 |
| 依存関係 | Java必須 | 単体動作 |
| カラー指定 | cBLU等で簡単 | 限定的 |
| 開発状況 | 停滞気味 | アクティブ |
メリット・デメリット
Ditaaの弱点をほぼ全て解消しています。SVG出力で拡大しても劣化せず、曲線・円弧の認識精度もDitaaより高い。変換も高速で、ブラウザ上で動くバージョンも用意されています。
知名度がDitaaより低いので、困ったときに検索で解決策を見つけにくいのが難点です。あと、テキスト中の文字が意図せず線として認識されてしまうことがあり、ラベルの書き方にちょっとしたコツが必要になる場面もあります。
AIとの相性
Ditaaと同様にASCIIアートが入力なので、AIとの組み合わせは自然にハマります。個人的に気に入っているのは「AI → ASCIIアート → Svgbob → SVG」というパイプラインで、AIにテキストで図を描かせてSvgbobでベクター画像にする流れはかなり実用的です。Svgbobは曲線の認識精度が高いので、AIが / や \ を使った曲線表現を生成してくれればきれいなSVGになります。
選定ガイド
| あなたの状況 | おすすめ |
|---|---|
| ソースコードのコメントに図を入れたい | ASCII Art |
| Slackやメールで図を共有したい | ASCII Art |
| ASCIIアートを手書き風のPNG画像にしたい | Ditaa |
| Asciidoctorでドキュメントを書いている | Ditaa |
| ASCIIアートを高品質なSVGにしたい | Svgbob |
| AIが生成したテキスト図を画像にしたい | Svgbob（SVG出力推奨） |
実践Tips：ソースコードのコメントにASCIIアートで図を入れる
ASCII Artのユニークな使い方として、ソースコード内のコメントに処理フローや状態遷移を図示するというものがあります。
# リクエスト処理の流れ:
#
# Client --> [API Gateway] --> [Auth] --> [Handler]
# | |
# v v
# [403 Error] [Database]
# |
# v
# [Response]
#
def handle_request(event):
...この方法なら図がコードのすぐ横にあるので、別ファイルやWikiを参照する手間がありません。AIに「この関数の処理フローをASCIIアートのコメントとして書いて」と依頼すれば一瞬で生成されます。
複雑なアルゴリズムやステートマシンの実装を理解する助けとして、意外と重宝する場面が多いテクニックです。
導入方法
ASCII Art
専用ソフト不要です。テキストエディタで直接書くか、ブラウザベースの ASCIIFlow エディタが便利です。
Ditaa
# macOS
brew install ditaa
# 使い方
ditaa input.txt output.png
ditaa --no-shadows input.txt output.png # 影なしSvgbob
# Cargo（Rust）でインストール
cargo install svgbob_cli
# 使い方
svgbob input.txt -o output.svgこの記事に関連する記事
まとめ
本記事ではAI時代のコード管理図形として、テキストアート系3種を比較解説しました。如何だったでしょうか。
テキストアート系は最もシンプルな手法でありながらAIとの相性が良いという面白い立ち位置にあります。AIが吐いたASCIIアートをそのままSvgbobに流し込んでSVGにする、というワークフローは実際けっこう使えます。
個人的には、今からDitaaとSvgbobのどちらかを選ぶならSvgbobを推します。SVG出力、高い認識精度、軽量な実装と、Ditaaの課題をほぼ全て解決しています。ただし、Asciidoctorとの統合が必要な場合はDitaaも依然として有力な選択肢です。
次回はドメイン特化・設計系（Structurizr、DBML、Diagrams(Python)）について解説します。
各ツールの詳細は公式サイトも参考にしてください：ASCIIFlow / Ditaa / Svgbob
それでは次の記事も閲覧いただけると幸いです。
📚 シリーズ：AI時代のコード管理できる図形（3/9）
