@yanqirenshi/d3.terraform

Terraform リポジトリを SVG で可視化する TypeScript ライブラリです。 ディレクトリツリーを再帰的に描画し、.tf ファイルを持つディレクトリ(モジュール)は Input / Process / Output の3カラムでブロック(variable / resource / data / module / provider / locals / output)を一覧表示します。

hayabusa リポジトリの src/features/terraform/ から移植したものです。

構成(データ/描画の2系統)

• データクラス
  • TerraformDirectory / TerraformFile / TfItem — パース済みの構成
  • parseTerraformFile / extractBlockContent / buildTerraformDirectory — HCL ブロックの簡易パーサ(ブラウザ安全)
  • TerraformDrawing — レイアウト計算(3カラム配置 + 再帰縦並び。テキスト計測関数を注入可能)
  • BoxNode / BranchBoxNode — 描画ノード(icon / subtitle / strokeWidth)
• 描画クラス
  • D3Terraform — エントリ React コンポーネント(SVG 100%、ホイールズーム/パン、背景グリッド、Canvas テキスト計測)
  • TerraformGroup / BaseBoxNode — 再帰 SVG レンダラ

使い方

import D3Terraform, { buildTerraformDirectory } from '@yanqirenshi/d3.terraform';

const data = buildTerraformDirectory({
  name: 'infra',
  children: [
    {
      name: 'network',
      path: 'modules/network',
      files: [
        { name: 'main.tf',      content: mainTfSource },
        { name: 'variables.tf', content: variablesTfSource },
        { name: 'outputs.tf',   content: outputsTfSource },
      ],
    },
  ],
});

<D3Terraform
  data={data}
  onNodeClick={(node) => console.log(node.data)}  // TfItem(content 含む)
/>

ファイルシステムの走査(.tf 収集)は Node 専用のためパッケージには含めていません。 利用側でディレクトリを走査して { name, content } を集め、buildTerraformDirectory に渡してください。

コマンド

npm run build     -w @yanqirenshi/d3.terraform   # tsc で dist/ へビルド(d.ts 含む)
npm run typecheck -w @yanqirenshi/d3.terraform
npm test          -w @yanqirenshi/d3.terraform   # vitest(パーサ + レイアウト)

既知の制限(原典からの継承)

• パーサは正規表現ベースの簡易実装です。locals ブロックは入れ子の波括弧 (locals { tags = { ... } } など)に対応していません。