mdmark

構成図の決まり

構成図の見た目の決まり（枠・3 層・題と凡例・線・交差・ツールチップ・操作）

システムの構成を描くフロー図の部品が守る決まり。部品の定義の書き方は図を描く、処理の順番を描く図はフローチャートの決まり。

項目	決まり
システムの枠	システムの内側を大きな枠で囲む。枠の題にはサーバーのアイコンを付ける
外部のシステム	枠の外に置く。凡例には `（枠の外）` を添える（枠を持つ図だけ）
層	枠の内側を上から LLM・意思決定モデルなどのノード、MCP・スクリプトなどの処理、データの 3 層に分ける。各層は何行でもよい
層の背景	層の箱の色を、`--mdmark-diagram-lane-tint`（既定 8%）の濃さでうっすら敷く
配置	自動配置のライブラリは使わず、定義の座標のとおりに置く

箱の種類は、色だけでなく左上のアイコンと種類の名前でも示す。データの箱は下の角を丸くする。

`kind`	表すもの	色の変数
`llm`	LLM	`--mdmark-color-diagram-llm`（層の色も同じ）
`dm`	意思決定モデル	`--mdmark-color-diagram-dm`
`script`	スクリプト	`--mdmark-color-diagram-script`
`mcp`	MCP	`--mdmark-color-diagram-mcp`（処理の層の色も同じ）
`data`	データ	`--mdmark-color-diagram-data`（データの層の色も同じ）
`external`	外部のシステム	`--mdmark-color-diagram-external`

箱と線のラベルの文字は選べ、読み上げに出る。長い名前と補足は箱の中で折り返す。

線の種類は、色と模様（破線の間隔・太さ・矢じり）の組で分け、色だけで分けない。

`line`	意味	模様	太さ	矢じり
`flow`	処理の流れ	実線	1.5	塗る
`read`	読む	破線（6 4）	1.5	開く
`write`	書く	実線	2.5	塗る
`reply`	返す	破線（4 3）	1.5	開く
`loop`	戻る（ループ）	破線（8 4）	1.5	開く

処理の流れと戻る線の色は --mdmark-color-diagram-line。線は縦と横だけの折れ線で、箱の縁から縁へ引く。矢印には入力の要約を書き、詳細は tip に持たせてツールチップに出す。

付く先	出すもの
矢印（`tip` を持つ線のラベル）	入力の詳細
LLM・スクリプトなどの箱（`io` か `hint` を持つ箱の印）	`io` は入力・処理・出力の 3 行、`hint` は説明の文。両方を持つ箱は 1 つの印に、入力・処理・出力の後に `hint` を出す。ツールチップのある箱には右上に印を付ける
箱の中の用語	用語集の意味。本文の用語と同じ破線の下線とツールチップ

操作	決まり
開いたとき	全体が表示する枠に収まる倍率（100% を超えない）で開く。どの幅でも同じ
拡大・縮小	図の右上のボタンと、図にフォーカスしているときのキー `+`・`-`・`0`。1 回 1.25 倍で、下限は開いたときの倍率、上限は 300%
戻す	`0` か倍率のボタンで、開いたときの倍率と位置に戻る。開いたときの倍率でも押せ、何も変わらない。倍率のボタンの読み上げの名前は `倍率 {今の倍率}。全体が収まる倍率に戻す`
ホイール	受け取らず、文書のスクロール（Shift を押しながらで横）に使う
文字の選択	文字の上はカーソルが I の形で文字を選べ、それ以外の上はドラッグで図を動かす。ドラッグ中は文字を選ばせない
移動	矢印キー（80px ずつ）と、右上の移動のボタン。移動のボタンは、図が表示する枠に収まらない間だけ出す
全画面	右上のボタンで図をモーダルに開く。閉じるボタンか Esc で閉じてフォーカスを戻す。ツールチップを開いている間の Esc はツールチップだけを閉じる

ライトとダークで切り替わる。値はテーマの CSS 変数の図の変数。