Skip to content

モジュール

各ソースモジュールが何を export し、誰が import するかを表にまとめました。 どのファイルを開くかを決める際のガイドに使ってください。

src/index.ts — CLI エントリポイント

バイナリの main()argv を解析し、使用法バナーを出力し、 serve / render / examples / llm / help / version のいずれかに 振り分けます。ビジネスロジックはなく、argv → 関数呼び出しに徹しています。

Exports: なし (スクリプトエントリ)。 Imports: server.ts, cli.ts, version.ts, llm-docs/index.ts

src/server.ts — HTTP サーバー

startServer()Bun.serve() を起動、/render/cache/:hash/health/examples にリクエストをルーティング (未知のパスは 404)。認証は checkAuth() で処理。

Exports: startServer(config)ServerConfig インターフェース。 Imports: renderer.ts, cache.ts, examples.ts, version.ts, template.ts (型のみ)。

src/cli.ts — CLI の renderexamples

  • cliRender() が stdin またはファイルから JSON を読み、renderChart() を 呼び、stdout またはファイルに画像を書き、Chart.js メッセージを stderr に出力。
  • cliExamples()EXAMPLES を走査し、各々に renderChart() を呼び、 NN-<slug>.{png,jpg} + NN-<slug>.json--outdir に書き出す。

Exports: cliRendercliExamples、それぞれの引数インターフェース。 Imports: renderer.ts, examples.ts, template.ts (型のみ)。

src/renderer.ts — レンダリングパイプライン / エンジン分岐

レンダリングの中枢。担当する処理:

  • レンダリングエントリrenderChart() がこのモジュールから 露出する主関数。ハッシュ算出、キャッシュ get/set、セマフォ取得/解放を 行い、engine(既定 skia)で分岐する。
  • エンジン分岐skia なら engine-skia.ts::renderSkia を遅延 import してインプロセス描画。browser なら以下の Chromium 経路を辿る。 分岐は ensureBrowser の前にあり、skia だけのプロセスは Chromium を 起動しない。
  • Chromium 検出 & 自動インストールbrowser エンジン)— 検出・ ダウンロード・起動ロジック(chromium.ts と連携)。
  • ブラウザライフサイクルbrowser エンジン)— ensureBrowser()closeBrowser()。モジュールレベルの単一 browser 参照、遅延起動、 disconnected で自動クリア。browser を一度も使わなければ closeBrowser() は no-op。
  • ページライフサイクルbrowser エンジン)— schedulePageCleanup()PAGE_TIMEOUT_SECONDS 後にタブを強制クローズする setTimeout を仕込む。
  • ステータス/health 向けに rendererStats()

Exports: renderChart, closeBrowser, rendererStats, ConsoleMessage, RenderResultImports: puppeteer-core, engine-skia.ts(遅延), template.ts, semaphore.ts, cache.ts

src/engine-skia.ts — skia エンジン(既定)

renderSkia() が Chart.js 設定を skia-canvas(ネイティブ Skia)の キャンバスにインプロセス描画し、PNG / JPEG バッファを返します。Chart.js と 同梱プラグインは npm から読み込み(chart-registry.ts)、skia-polyfills.ts で最小限の DOM グローバルを用意。browser エンジンと出力が一致するよう 調整されており、console.warn / console.error をインプロセスで捕捉して browser エンジンと同じ診断メッセージを surface します。

Exports: renderSkia, SkiaRenderResultImports: skia-canvas, chart-registry.ts, skia-polyfills.ts, template.ts(型のみ)。

src/template.tsbrowser エンジンの HTML

browser エンジン専用の静的 HTML 文字列。Chart.js + 12 プラグインの全 CDN <script> と、以下を行う IIFE を含む(skia エンジンはこのテンプレートを 使わず chart-registry.ts でプラグインを登録します):

  • 自動登録しないプラグインを登録 (datalabels、chartjs-chart-geo);
  • アニメーションを強制 OFF;
  • console.warn / console.error をラップして window.__chartMessages に;
  • try/catch で Chart をインスタンス化;
  • 完了時に window.__chartRendered = true

プラグイン追加/削除/バージョンアップ時はこのファイルを編集。 Chart.js プラグインの追加 を参照。

Exports: buildHtml(options)RenderOptions インターフェース、LIBS 定数。 Imports: なし。

src/cache.ts — メモリ内キャッシュ

LRU 風の追い出し (size >= MAX_ENTRIES で最古キーを追い出し) と TTL (getCache で遅延失効) を持つ Map<string, CacheEntry>computeHash(){chart, width, height, devicePixelRatio, backgroundColor, format, quality} を SHA-256 でハッシュし、先頭 16 桁 (hex) を取り出します。

Exports: computeHash, getCache, setCache, cacheStatsImports: crypto (Node 組み込み)、template.ts (型のみ)。

src/semaphore.ts — 同時実行制御

30 行の async セマフォ。acquire() は容量内なら即座に戻り、容量超過なら リゾルバを FIFO キューに push。release() がキューの先頭を pop してリゾルブ。

Exports: Semaphore クラス。 Imports: なし。

src/examples.ts — 組み込みサンプル

EXAMPLES{ title, config, width?, height? } の配列。 次で使われます:

  • CLI の examples サブコマンド (PNG + JSON ファイル書き出し)
  • HTTP /examples ギャラリー (<img src="/render?chart=…"> タグ埋め込み)

新しいサンプルをここに追加すると、CLI 出力ディレクトリとギャラリーページの両方に 自動的に反映されます。

Exports: EXAMPLES, buildExamplesHtml()Imports: なし。

src/version.ts — バージョン定数

package.json から VERSION を再エクスポートするだけの 1 行モジュール (Bun の await import(..., { type: 'json' }) を使うので bun build で コンパイル時インライン化)。

Exports: VERSIONImports: package.json

src/llm-docs/ — LLM リファレンスバンドル

Chart.js モジュール 1 つに 1 つの TS ファイル。各ファイルは doc: string (複数行 Markdown スニペット) を export。llm-docs/index.ts が集約して getLlmDocs() を公開し、それを chartjs2img llm が出力します。

LLM ドキュメントの追加 を参照。

ファイル一覧

モジュールファイル対象
usage.tschartjs2img の呼び出し方、JSON vs HTTP の違い
chartjs-core.tsChart.js コア: タイプ、データセット、スケール、title/legend/tooltip
plugin-datalabels.tschartjs-plugin-datalabels のオプション
plugin-annotation.tschartjs-plugin-annotation のオプション
plugin-zoom.tschartjs-plugin-zoom のオプション
plugin-gradient.tschartjs-plugin-gradient のオプション
chart-matrix.tsmatrix / ヒートマップ チャートタイプ
chart-sankey.tssankey チャートタイプ
chart-treemap.tstreemap チャートタイプ
chart-wordcloud.tswordcloud チャートタイプ
chart-geo.tschoropleth + bubbleMap チャートタイプ
chart-graph.tsgraph / forceDirectedGraph / dendrogram / tree チャートタイプ
chart-venn.tsvenn + euler チャートタイプ
adapter-dayjs.ts時間軸用 dayjs 日付アダプタ

依存グラフ (ざっくり)

モジュール依存グラフ: index.ts が server.ts と cli.ts をディスパッチし、両者が renderer.ts を呼ぶ。renderer.ts は template.ts / cache.ts / semaphore.ts に依存。cli.ts は examples.ts も参照。llm サブコマンド用に llm-docs/index.ts が多数の llm-docs/*.ts を束ねる。

循環依存なし。server.tscli.tsindex.ts 以外から import されません — エントリポイントを薄く保つため。

このページを編集Last updated: