D2（テキストからダイアグラムを生成するツール）、ASCIIレンダリングに対応

 (d2lang.com)
4 ポイント 投稿者 GN⁺ 2025-08-20 | 1件のコメント | WhatsAppで共有
  • D2 0.7.1 で、テキストダイアグラムを ASCII でレンダリングする機能が追加
  • コードコメント内で シンプルな ASCII ダイアグラム を使い、関数やクラスの流れを説明可能
  • デフォルトでは Unicode の罫線文字を使用 するが、オプションフラグで標準 ASCII を選択可能
  • この機能は アルファ段階 であり、一部のスタイル、特殊文字、特定の図形は未対応
  • D2 Playground や Vim 拡張などで ASCII レンダリングを直接体験 可能

D2 ASCII レンダリングの紹介

D2 の最新リリース（バージョン 0.7.1）から、テキストダイアグラムの ASCII 出力機能 が追加された。
.txt 拡張子を持つ出力ファイルは、自動的に ASCII レンダラーでレンダリングされる。
例は D2 Vim 拡張 で確認でき、.d2 ファイルを開いてプレビューウィンドウを通じて、保存のたびに ASCII ダイアグラムの出力状態をリアルタイムで確認できる。

コード文書化での活用

ASCII ダイアグラムは、ソースコードのコメント に挿入する際に最も実用的だ。

  • 小さな関数やクラスの横に簡単なダイアグラムを追加すると、文章で流れを説明するよりも直感的にコード理解を助けられる
  • Vim 拡張では、D2 コードを書いて選択範囲をそのまま ASCII ダイアグラムへ変換できる

Unicode と標準 ASCII の選択

デフォルトの ASCII レンダリングは、Unicode のボックス描画文字 を使って、より見やすい出力を提供する。

  • もし 最大限の移植性 を求めるなら、--ascii-mode=standard オプションフラグで通常の ASCII 文字によるレンダリングも可能

現在の制限

この ASCII レンダリング機能は アルファ段階 だ。

  • コーナーケース、改善点、バグが多数存在する可能性がある
  • Web サイトへのバグレポートやフィードバックの送信が推奨されている

主な制限事項

  • スタイル未対応
    • アニメーションやフォントなどは ASCII では意味を持たない
    • 今後、ターミナルカラーなど一部の限定的なスタイル対応を検討予定
    • テーマも対応対象ではない
    • double-border、multiple などは今後の改善予定リストに含まれている
  • 不均一な間隔
    • ASCII への変換過程で、ボックス配置が SVG と比べて不規則になることがある
  • レンダリング不可の対象
    • Markdown、Latex、コードなどの特殊テキストは未対応
    • 画像やアイコン、UML クラス、SQL テーブルなどはレンダリング不可
    • これらの項目を削除するか、プレースホルダー表示にするかは今後決定予定
  • 一部図形は未対応
    • クラウドや円などの曲線系図形は、ASCII ではうまく表現できない
    • これらの図形は四角形に置き換え、左上に小さなアイコンを追加して種類を区別する

実際に試してみる

この機能は D2 Playground ですぐに利用できる。

  • 提供されているコードブロックを開いて、ASCII レンダリングを直接体験できる

関連記事

1件のコメント

 
GN⁺ 2025-08-20
Hacker Newsのコメント

  • こんにちは、開発者のみなさん。今朝追加した新機能を共有したいです。まだアルファ段階で、すでに github issue が1件上がっています。ブログ記事を飛ばしてすぐ確認したいなら、こちらで確認できます。もう少し大きな例もこのリンクで確認できます

    • playground で黒い背景に黒い文字でレンダリングされていて、動いていないのかと思いました。たぶんダークモードを有効にしているからだと思います。ほかのレンダラーは問題ないのに、ascii だけ見えません
    • TFA では単に ELK からダウンスケールされるという意味なのでしょうか。この機能を使うには ELK を明示的に設定する必要があるのか、それとも .txt に出力すれば自動で有効になるのか気になります。自分の d2 ダイアグラムでは主にすでに ELK を使っています

  • mermaid と比べて、どういう点に価値があるのか気になります。デザインと動作の仕方は気に入っていますが、mermaid から移行する実質的な理由があるのか知りたいです。また、この手のツールはたいてい、自動生成された結果でボックスの位置やサイズを x/y 値で手動調整する機能が不足していると思います

    • 何に価値を置くか次第です。あなたが挙げた2点で十分な人もいますし、私たちのように CLI で SVG をレンダリングするときに chromium ブラウザが不要な点を重視する人もいます（関連事例参照）。全体の違いを示しているわけではありませんが、簡単な比較サイトもあります。それから、有料製品の宣伝はしたくありませんが、位置とサイズを固定できる manual 調整機能が必要な場合は IDE で提供しています

  • D2 の文法はとても魅力的なのに、これまでは Mermaid のツール群のためにそちらをより多く使っていました。でもこの機能は大きな新規性があり、Mermaid では見たことがありません。asciiflow.com とのつながりも上手く作ってくれます

  • ASCII から変換される機能が良いですね。ただ、ダイアグラムを更新する必要があるときに、元の D2 ソースをどうやって取得するのか気になります

  • D2 のほうが mermaid より常に好みだったのですが、自分としては次の issue のせいで grid layout が実質的に使い物にならなくなっています（関連 issue）。ピクセル単位を直接合わせなければならないなら、この種のツールの目的が失われるのと同じです

    • ありがとうございます！知らせてもらえて助かります。0.7.2（次のリリース）に反映予定です

  • ブラウザベースのテキスト-to-ダイアグラムツールの一覧を管理して、何度か共有したことがあります。最近知ったのは、D2 のオンライン版は純粋にブラウザ内で動いているのではなく、バックエンドサーバーがダイアグラムを生成しているという点です。D2 がクライアント（ブラウザ）だけで単独動作できるのか、そして今回の記事で言及された拡張機能がオフラインでも動くのか気になります

    • いまは可能です！ （1週間前から）d2 playground のネットワークタブを見れば、d2.js という D2 の wasm ポートを包むラッパーで動いているのが分かるはずです。まだ正式リリース前ですが、まもなく分離して告知する予定です
    • ~~一覧を見せてもらえないかと思ったけど~~ 編集: もう見つけました！ありがとう

  • 公式の Python repository を用意してほしいです。notebook で使いたいのですが、今は databricks を事実上強制されるので不便です

  • 見た目が本当に素晴らしいです。以前投稿されていた C4 対応の記事も見ました！ 近いうちに C4 モデリングが必要になるので確認してみる予定です

  • 本当に素晴らしい機能です。D2 は初めて知りましたが、ターミナルでもすぐにチャートを作れて、きれいにレンダリングできる点がとても気に入りました。すぐ試してみるつもりです

    • D2 はすでにリアルタイム HTTP サーバーで .svg を live 更新する機能もサポートしています。ブラウザと vim を並べて開けばリアルタイム更新も見られます。1年前に D2 を見つけて、それ以来すべてのダイアグラムに使っています
    • 普段は ascii ダイアグラムに Moondraw を使っていますが、すでに vim 環境にいるならこのツールのほうがずっと良いです

  • vim extension は本当にすごい機能です

    • ただ、vimscript で書かれているのは変だし、少し残念です