エディトリアルダイアグラムデザイン
クリーンでパブリッシュ品質のダイアグラムを、単一の自己完結型HTMLファイル（インラインSVG + CSS）として生成します。汎用的なダークシアングロー、デフォルトのMermaidレイアウト、または斜めのコネクタ線は決して使用しません。
ビジュアルDNAとカラーパレット
- 紙（背景）:
#f5f5f5（フラットキャンバス）。 - インク（テキストと主要ストローク）:
#2d3142。 - ミュート（セカンダリテキストと標準線）:
#4f5d75。 - ボーダーと区切り線:
rgba(45, 49, 66, 0.12)。 - アクセント（ボトルネック/批判的フォーカス）:
#eb6c36（コーラル/テラコッタ; ダイアグラムあたり最大1〜2のフォーカルノード）。 - 外部/緩い境界: 破線ストローク（
stroke-dasharray="4,4"）。
タイポグラフィ（Google Fonts）
HTMLヘッダーに埋め込み:
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
- ダイアグラムタイトル:
Instrument Serif、28px、通常ウェイト。 - ノード名:
Geist（サンセリフ）、12px、ウェイト600。 - サブラベルとメタデータ:
Geist Mono、9px（ポート、プロトコル、バッチ間隔）。 - コネクタバッジ/アイブロウ:
Geist Mono、7〜8px、大文字、トラッキング（letter-spacing: 0.08em）。
SVGジオメトリとレイアウト標準
- 4pxグリッドの規律: すべての座標（
x、y）、寸法（width、height）、パディング、ギャップは4の倍数である必要があります。 - 直交コネクタのみ使用: 軸がずれたノード間に斜めの線を決して描かないでください。すべての曲がりは、角丸（
r=8）の直角エルボにする必要があります。ストレートの<line>は、厳密に同一軸を共有するノードにのみ使用してください。 - マスク付きコネクタバッジ: プロトコル/データラベル（例：
CSV、XLSX、LOAD）を、#f5f5f5（rx=2）で塗りつぶした不透明な<rect>内に配置します。ラベルが矢印を横切らないように、線ストロークから6px〜10pxの可視ギャップを維持します。 - ゾーンと機能コンテナ: ステップを広い列/エリア（例：
COLLECTION、PROCESSING、DISSEMINATION）にグループ化します。1pxのボーダー（rgba(45,49,66,0.12)）、角丸（rx=8）、および左上に大文字のモノタイトルタブを使用します。 - ノード階層:
- 標準:
#ffffff塗りつぶし、1px#2d3142ストローク、6px半径（rx=6）。 - ボトルネック/ペインポイント:
#fbeee8塗りつぶし（rgba(235,108,54,0.08)）、#eb6c36ストローク。 - 外部: 透明または白の塗りつぶし、破線ボーダー（
stroke-dasharray="4,4"）。
- 標準:
- 水平方向の下部凡例: ダイアグラムノードの下に、全幅の細い罫線で区切られた水平方向の凡例ストリップを配置します。
構造化SVGテンプレート
SVG（マーカー、ゾーン、コネクタ、マスクバッジ、ノードボックス）を作成する前に、references/template.mdを読み込んでください。