D2（テキストから図を作成するツール）がASCIIレンダリングをサポートしました

279日前原文(d2lang.com)

概要

D2バージョン0.7.1 で新たに ASCII出力機能 を追加
.txt拡張子 の出力ファイルは自動的にASCIIレンダラーを使用
コードコメント 内での簡易図の利用が推奨
Unicode/標準ASCII の切替が可能
制限事項 や既知の問題点も明記

D2のASCII出力機能の概要

D2バージョン0.7.1 でASCII出力機能をリリース
.txt拡張子 のファイルは自動でASCIIレンダラーを使用
Vim拡張 によるプレビュー機能の例を紹介
- .d2ファイル を開き、保存時にプレビューウィンドウが自動更新
コードコメント 内への小さな図挿入を推奨
- 関数やクラスの隣にシンプルな図を追加
- Vim拡張 でd2コードをASCII図に自動変換
ASCIIレンダラー のデフォルトはUnicode文字セット
- より美しい罫線描画を実現
- --ascii-mode=standard フラグ指定で純粋なASCII出力も可能

制限事項と注意点

ASCIIレンダラーはアルファ版
- 多くのコーナーケースやバグが存在
- 問題発見時は GitHub Issues で報告を推奨
ELKレイアウトエンジン で決定したレイアウトをダウンサイジング
- さらに圧縮処理を実施
スタイル非対応
- アニメーションやフォント指定はASCIIで意味がないため未対応
- 将来的に端末用の色付けなど一部機能追加の可能性
テーマ機能は無意味
- ダブルボーダーや複数ボーダーなどは今後の課題
不均一なスペース
- ASCII描画の都合上、ボックス幅とラベル長のバランスが悪い場合あり
- SVG出力よりも見た目が劣るケース
未対応項目
- Markdown、LaTeX、コード、画像、アイコン
- UMLクラス、SQLテーブルも現在は特別扱いなし
全ての図形対応ではない
- cloudやcircleなど曲線を含む形状は矩形＋左上にアイコンで代用
- 今後変更の可能性あり
- カスタム図形の使用は非推奨

実際に試す方法

D2 Playground でASCII出力を即時体験可能
コードブロックを開いて右上クリックで確認

参考リンク

バグ報告・要望受付: https://github.com/terrastruct/d2/issues

Hackerたちの意見

これ、かっこいいね！前の投稿でC4サポートがあるの見たよ！今、C4のことやろうとしてるから、チェックしてみるね。

こんにちは、開発者のみんな！今朝追加した新機能をシェアしたいと思ってるんだけど、まだアルファ段階だよ（もう誰かがGitHubに問題を報告してるし、笑）。ブログ記事を飛ばして直接見たい人はここからどうぞ： https://play.d2lang.com/?script=qlDQtVOotFLIyFTwSEzOTi1S8Est... 大きな例が見たい人はこっち： https://play.d2lang.com/?script=rJJBjtswDEX3OgWBrm2kzU4Feoru...

└

あなたのプレイグラウンドが動いてないのかと思ったら、黒い背景に黒い文字が表示されてたからかも。ダークモードが有効になってるのかな。他のレンダラーはちゃんと動くけど、ASCIIは見えないね。

└

TFAからELKにダウンサイジングするだけなの？これを使うにはELKを指定する必要があるのか、それとも.txtを出力しようとしたら自動的に有効になるのかな？（実際、ほとんどのd2ダイアグラムにELKを使ってるから、ちょっと気になっただけなんだ。）

vimの拡張、めっちゃすごいね...

└

そうだね、でもvimscriptで書かれてるのはちょっと変だし残念だね。

ブラウザベースのテキストから図にするツールのリストを管理してるんだけど（ここで何度かシェアしたことあるよ）。最近気づいたんだけど、D2のオンライン版はブラウザだけでは動かないんだ。図はバックエンドのサーバーで生成されてる。D2はブラウザ単体で動くの？投稿に書かれてた拡張機能はオフラインでも使えるの？（多くのツールはそうだよね）

└

今は動くよ！(1週間前から) d2プレイグラウンドのネットワークタブをチェックしてみて。d2.jsで動いてて、これはd2のwasmポートをラップしたものなんだ。まだ公式には準備できてないけど、もうすぐ発表する予定だよ。

└

~~そのリスト見せてもらってもいい？~~ 編集：見つけた！ありがとう。

D2を使ってシーケンス図やマイグレーション図を作ってるんだけど、気に入ってるよ！この新機能、面白いね！

これめっちゃいいね。D2のことは知らなかったけど、ターミナルでNeovimを使って直接チャートを作れるってアイデアが好き。ざっくりしたドラフトを作って、最後に綺麗な画像でレンダリングするのが楽しみだよ。すぐに試してみるつもり！

└

普段はASCIIダイアグラムにはMoondrawを使ってるけど、Vimの中で使えるのはすごくいいね。

└

D2はすでにライブアップデートするHTTPサーバーをサポートしていて、ライブアップデートする.svgを提供してるから、Vimでブラウザをタイルすれば、もうライブアップデートができるよ。D2を発見したのは約1年前で、今ではすべてのダイアグラムに使ってる。

LLMにアーキテクチャダイアグラムのコンテキストを保存するのにめっちゃ役立ちそう。

これ、mermaidより全然良さそう。mermaidみたいにGitHubのPRコードブロックでサポートされてるの？

└

うーん、残念ながらまだそれが私のドキュメントにとって一番の障害なんだ。CIパイプを設定してD2をPNGにコンパイルする手間を省くために、mermaidをちょっと無理させてる感じ。

└

残念ながらそうじゃないんだ。GHの人たちに連絡を試みたけど、ダメだった。でも、クライアントサイドレンダリングを可能にするd2.jsは今月になってやっと使えるようになったばかりで、まだ正式にはリリースされてない（ちょっと隠れてる感じ）。だから、公式リリース（もうすぐ™）がどうなるか見てみよう。もしD2を楽しんでる人がGHのフロントエンドチームに知り合いがいたら、ぜひ耳を貸してあげてほしいな。

D2はmermaidより好きだったけど、これがあるとグリッドレイアウトがほとんど役に立たなくなると思う。正確なピクセル幅を考えなきゃいけないのは、このツールの意味をなくしちゃうよ、少なくとも僕にとってはね。

└

ありがとう！それを知れてよかった。次のリリース0.7.2に入れとくね。

ASCIIからの変換はいいね。図を更新する必要があるとき、元のD2ソースはどうやって手に入れるの？

ハクソク