API リファレンス

Shumoku の TypeScript API の概要です。各パッケージの詳しい使い方は、それぞれの README を参照してください。

パッケージ構成

パッケージ	説明
`shumoku`	メインパッケージ（core + SVG/HTML レンダラーを再エクスポート）
`@shumoku/core`	モデル・パーサー・レイアウトエンジン・テーマ・プラグインキット
`@shumoku/renderer-svg`	SVG レンダーパイプライン
`@shumoku/renderer-html`	インタラクティブ HTML 出力
`@shumoku/renderer-png`	PNG 出力（Node.js のみ）
`@shumoku/catalog`	デバイス／サービスカタログ
`@shumoku/plugin-sdk`	データソースプラグイン用 HTTP クライアント

旧 API（HierarchicalLayoutEngine / SvgRenderer クラス、@shumoku/parser-yaml パッケージ）は削除されました。現在はパイプライン関数（prepareRender → renderSvg 等）と computeNetworkLayout() を使います。

パース

import { YamlParser } from 'shumoku'

const { graph, warnings } = new YamlParser().parse(yamlString)

parse() は { graph: NetworkGraph, warnings?: ParseWarning[] } を返します（回復可能な問題では例外を投げず warnings に積みます）。複数ファイル（file: 参照）には HierarchicalParser を使います。

レイアウト

import { computeNetworkLayout } from 'shumoku'

const layout = await computeNetworkLayout(graph)

ノード・リンク・サブグラフを配置した LayoutResult を返します（ネットワーク図に特化したタイア化レイアウト）。通常はレンダラーが内部で呼ぶため、直接呼ぶ必要はありません。

レンダリング

import { prepareRender, renderSvg, renderGraphToSvg } from '@shumoku/renderer-svg'
import { renderGraphToHtml } from '@shumoku/renderer-html'
import { renderGraphToPng } from '@shumoku/renderer-png' // Node.js のみ

// 一括
const svg = await renderGraphToSvg(graph)
const html = await renderGraphToHtml(graph, { title: 'My Network' })
const png = await renderGraphToPng(graph, { scale: 2 })

// パイプラインを分割（prepared を複数の出力で再利用）
const prepared = await prepareRender(graph) // アイコン寸法解決 + レイアウト
const svg2 = await renderSvg(prepared)

prepareRender / renderSvg / renderGraphToSvg / renderGraphToHtml / renderGraphToPng はいずれも async です（renderHtml(prepared) のみ同期）。

テーマ

import { lightTheme, darkTheme, createTheme, mergeTheme } from 'shumoku'

組み込みテーマは lightTheme（デフォルト）と darkTheme。createTheme() / mergeTheme() でカスタマイズできます。テーマは NetworkGraph.settings.theme（'light' | 'dark'）でも指定できます。詳しくはスタイルとテーマを参照してください。

NetworkGraph

interface NetworkGraph {
  version: string
  name?: string
  description?: string
  nodes: Node[]
  links: Link[]
  subgraphs?: Subgraph[]
  settings?: NetworkSettings
}

Node / Link / Subgraph / NetworkSettings の完全な型定義は @shumoku/core（@shumoku/core/models）を参照してください。データ構造の詳細は JSON リファレンスにもあります。

アイコン

ベンダーアイコンは CDN から配信され、レンダラーが寸法を取得して正しいアスペクト比で描画します。利用可能なアイコンはベンダーアイコンを参照してください。