Bone Flow #021 Shape ガイド

DOC-0021 / UI-021 / JA

このガイドについて

#021 Shape v1.0.35 の通常操作、HTML Functional Class、34 TYPE、Property、TIME JOB、#002 Joint、Smoke / Validation / Completion、既存Public APIを一つのDOCから確認します。UI HTMLに説明本文を複製せず、DOC RegistryのDOC-0021を#021専用Guideが読み込み、#023型レイアウトで表示します。共有DOC Loader / Guideは変更しません。

最初に

#021はShape Geometry / Port / Tooltip / Comment / UI position / TIME JOB状態表現を担当します。接続線は#002 Bone Joint、色選択UIは#040 ColorPicker、Hover枠Effectは#022、要素Animationは#117へ委譲します。

Shapeとは

Registry data/bone-shapes.json から固定Shape、複合Shape、可変詳細Shapeを生成します。UI上はTIME JOBを加えた4分類で選択します。Runtime Registryは34 TYPEです。

図形を先に確認（実Shape表示）

この節では、既存のShape Listと同じ正式サムネイル描画を使い、代表TYPEの実Shapeを表示します。IN/OUT文字・Tooltip・Commentは図鑑では非表示にし、図形本体・Joint Port・表示文字を確認できます。各Shapeの用途・形状・Port / 接続・使いどころとコピー可能HTMLも同じ場所に記載します。

`START` — 開始

用途: フローの開始点を表す。
見た目: 角丸の開始形状。
Port / 接続: 4方向Joint Portを保持。横フローではLEFT=IN / RIGHT=OUTの表示規則に従う。
使いどころ: 処理フローの入口を明示したいときに使用。
Registry category: fixed

<div class="bf-shape" data-shape-type="START">開始</div>

<div class="bf-shape" data-shape-type="START">開始</div>

`PROCESS` — 処理

用途: 一般的な処理工程を表す。
見た目: 長方形。
Port / 接続: 4方向Joint Port。
使いどころ: 通常の処理、変換、計算などの基本ノード。
Registry category: fixed

<div class="bf-shape" data-shape-type="PROCESS">処理</div>

<div class="bf-shape" data-shape-type="PROCESS">処理</div>

`DECISION` — 条件分岐

用途: 条件分岐を表す。
見た目: ひし形。
Port / 接続: 4方向Joint Port。分岐表示ラベルはdecisionLabelsで管理。
使いどころ: YES/NOなど複数経路へ分岐する判断点。
Registry category: fixed

<div class="bf-shape" data-shape-type="DECISION">条件分岐</div>

<div class="bf-shape" data-shape-type="DECISION">条件分岐</div>

`INPUT_OUTPUT` — 入出力

用途: 入出力工程を表す。
見た目: 平行四辺形。
Port / 接続: 4方向Joint Port。
使いどころ: 外部からの入力、画面/帳票への出力など入出力を示す。
Registry category: fixed

<div class="bf-shape" data-shape-type="INPUT_OUTPUT">入出力</div>

<div class="bf-shape" data-shape-type="INPUT_OUTPUT">入出力</div>

`DATABASE` — データベース

用途: データベースを表す。
見た目: 円柱形。
Port / 接続: 4方向Joint Port。
使いどころ: DBへの参照・更新などデータベース主体を示す。
Registry category: fixed

<div class="bf-shape" data-shape-type="DATABASE">データベース</div>

<div class="bf-shape" data-shape-type="DATABASE">データベース</div>

`DOCUMENT` — ドキュメント

用途: 文書データを表す。
見た目: 下辺が波形のドキュメント形状。
Port / 接続: 4方向Joint Port。
使いどころ: 帳票・文書・ドキュメント成果物を示す。
Registry category: fixed

<div class="bf-shape" data-shape-type="DOCUMENT">ドキュメント</div>

<div class="bf-shape" data-shape-type="DOCUMENT">ドキュメント</div>

`TABLE_DETAIL` — テーブル詳細

用途: テーブルとフィールド詳細を可変行で表す。
見た目: 列見出し＋フィールド行をデータ件数に応じて生成。
Port / 接続: テーブル全体4Portに加え、各フィールド独立IN/OUT Portを持つ。
使いどころ: DBテーブルのフィールド単位接続まで図示したい場合に使用。
Registry category: detail
Renderer: table-detail

<div class="bf-shape" data-shape-type="TABLE_DETAIL">テーブル詳細</div>

<div class="bf-shape" data-shape-type="TABLE_DETAIL">テーブル詳細</div>

`JOB` — ジョブ

用途: TIME JOBの単一実行処理を表す。
見た目: 角丸の大きな矩形。
Port / 接続: Semantic Port IN / SUCCESS / ERROR。flowDirectionへ追従。
使いどころ: SQL/BAT/API等の処理定義、受入TYPE、状態、戻り分岐をShape状態として表現する。
Registry category: fixed

<div class="bf-shape" data-shape-type="JOB">ジョブ</div>

<div class="bf-shape" data-shape-type="JOB">ジョブ</div>

Shape List 全件対応（省略なし）

実画面のShape Listを基準に、DOC説明対象を固定します。

固定Shapeタブ: 31件 — START, END, PROCESS, DECISION, INPUT_OUTPUT, SUB_PROCESS, DOCUMENT, DATABASE, DATA_STORE, MANUAL_INPUT, MANUAL_OPERATION, PREPARATION, DELAY, CONNECTOR, OFFPAGE_CONNECTOR, TABLE, VIEW, API, FILE, JSON, XML, CSV, OBJECT, IMAGE, ICON, LABEL, PANEL, GROUP, SCHEDULE_TRIGGER, JOB, JOBNET
複合Shapeタブ: 2件 — MULTI_DOCUMENT, COLLECTION
可変詳細Shapeタブ: 1件 — TABLE_DETAIL
TIME JOBタブ: 3件 — SCHEDULE_TRIGGER, JOB, JOBNET
RegistryユニークTYPE: 34件。SCHEDULE_TRIGGER / JOB / JOBNET はRegistry categoryが fixed のため固定Shapeタブにも含まれ、TIME JOBタブでは同じ3 TYPEを運用分類として再表示します。新しいTYPEが3件増えるわけではありません。
以下のShape図鑑はユニーク34 TYPEを1件も省略せず個別説明します。

HTML Functional Class

通常利用Classは bf-shape 1つだけです。BoneShape.Node、BoneShape.Component、関数Public APIはHTML Functional Classではなく高度操作として別管理します。

最小HTML

<div class="bf-shape" data-shape-type="PROCESS">処理</div>

<div class="bf-shape" data-shape-type="PROCESS">処理</div>

HTML指定の意味

class="bf-shape": #021 ShapeをHTMLから開始する正式Class。
data-shape-type="PROCESS": Shape TYPE。省略時は PROCESS。
要素内テキスト: label 初期値。空の場合はRegistryのShape既定文字。
TYPEまたはlabel以外のProperty: HTML Functional Classから直接指定不可。Property Editor / Public APIを使用。
未知TYPE: PROCESSへ勝手に置換せず、マウントを拒否して data-bf-shape-status="error" とする。

使用サンプル（コピー可能・実Shape付き）

この節は 「何をしたいか → 実Shape → 設定 → コピー可能コード → 結果」 の順で確認します。コードは各ブロック右上の「コピー」からそのまま取得できます。

1. PROCESSを最小HTMLで表示

何をするか: 一般処理ShapeをHTMLだけで表示する。
設定: bf-shape＋data-shape-type="PROCESS"。要素本文が表示文字。

<div class="bf-shape" data-shape-type="PROCESS">受注処理</div>

<div class="bf-shape" data-shape-type="PROCESS">受注処理</div>

結果: PROCESSの長方形Geometry、Joint Port、表示文字「受注処理」がRuntimeで生成されます。

2. DECISIONを条件分岐として表示

何をするか: 条件分岐のひし形を表示する。
設定: TYPEをDECISIONへ変更。YES/NO表示名はProperty Editor / Public APIで設定。

<div class="bf-shape" data-shape-type="DECISION">承認?</div>

<div class="bf-shape" data-shape-type="DECISION">承認?</div>

結果: DECISION Geometryが表示されます。分岐ラベルと表示文字は別Propertyです。

3. INPUT_OUTPUTを入出力として表示

何をするか: 外部入力/出力工程を平行四辺形で示す。
設定: TYPE=INPUT_OUTPUT。

<div class="bf-shape" data-shape-type="INPUT_OUTPUT">CSV取込</div>

<div class="bf-shape" data-shape-type="INPUT_OUTPUT">CSV取込</div>

結果: INPUT_OUTPUT Geometryで表示されます。

4. FILE / JSON / XML / CSVを使い分ける

何をするか: 同じFILE系Geometryでもデータ形式をTYPEとして区別する。
設定: FILE / JSON / XML / CSV のいずれかを指定。

<div class="bf-shape" data-shape-type="JSON">API Response</div>
<div class="bf-shape" data-shape-type="CSV">売上CSV</div>

<div class="bf-shape" data-shape-type="JSON">API Response</div>
<div class="bf-shape" data-shape-type="CSV">売上CSV</div>

結果: FILE基底の形状を使いながら、Runtime TYPEはJSON / CSVとして保持されます。

5. MULTI_DOCUMENTを複合Shapeとして使う

何をするか: 複数ドキュメントを重ねたShapeを表示する。
設定: HTML Functional ClassではTYPEと表示文字だけ指定。重ね数compositeCountはProperty Editor / Public APIで2〜4を設定。

<div class="bf-shape" data-shape-type="MULTI_DOCUMENT">請求書一式</div>

<div class="bf-shape" data-shape-type="MULTI_DOCUMENT">請求書一式</div>

結果: DOCUMENTを重ねたComposite Geometryとして表示されます。

6. TABLE_DETAILでフィールド接続を表示

何をするか: テーブル全体だけでなく各フィールドのIN/OUT接続点も持つShapeを作る。
設定: フィールド配列はHTML Functional Classから直接指定不可。Public APIを使用。

<div id="table-detail-host"></div>
<script>
BoneShape.load("/boneflow/data/bone-shapes.json").then(() => {
  const node = new BoneShape.Node({
    type: "TABLE_DETAIL",
    logicalName: "顧客",
    tableName: "customers",
    fields: [
      { name: "顧客ID", alias: "customer_id", type: "BIGINT" },
      { name: "顧客名", alias: "customer_name", type: "VARCHAR(100)" }
    ]
  });
  node.render(document.getElementById("table-detail-host"));
});
</script>

結果: Table Detail本体4Portに加え、各フィールドのIN/OUT Portが生成されます。

7. SCHEDULE_TRIGGERをTIME JOB起点として表示

何をするか: スケジュール条件からJOBへ進む起点Shapeを表示する。
設定: TYPE=SCHEDULE_TRIGGER。時刻・calendar・triggerMode等はProperty Editor / Public APIで設定。

<div class="bf-shape" data-shape-type="SCHEDULE_TRIGGER">日次 03:00</div>

<div class="bf-shape" data-shape-type="SCHEDULE_TRIGGER">日次 03:00</div>

結果: Semantic OUT Portを持つSchedule Triggerが表示されます。#021はtimerを内包しません。

8. JOBをSQL処理として設定

何をするか: Shape TYPEはJOBのまま、処理内容をSQLとして設定する。
設定: job.processType="SQL"、job.acceptedInputType="JSON"などはPublic API / Property Editorで設定。

<div id="job-host"></div>
<script>
BoneShape.load("/boneflow/data/bone-shapes.json").then(() => {
  const job = new BoneShape.Node({
    type: "JOB",
    label: "売上集計",
    job: {
      processType: "SQL",
      processContent: "SELECT ...",
      acceptedInputType: "JSON",
      status: "WAIT",
      enabled: true
    }
  });
  job.render(document.getElementById("job-host"));
});
</script>

結果: JOB TYPEを維持したまま、処理TYPEと受入TYPEがJOB状態として保持されます。

9. JOBNETを複数JOBグループとして表示

何をするか: 複数JOBのまとまりをJobNet Shapeとして表示する。
設定: TYPE=JOBNET。parallel等はProperty Editor / Public API。

<div class="bf-shape" data-shape-type="JOBNET">夜間バッチ</div>

<div class="bf-shape" data-shape-type="JOBNET">夜間バッチ</div>

結果: IN / SUCCESS / ERROR Semantic Portを持つJOBNETとして表示されます。

10. 縦フローへ切り替える

何をするか: IN/OUTの表示位置を横から縦へ変更する。
設定: flowDirection="vertical"。HTML Functional Class直接指定ではなくPublic APIを使用。

<div id="vertical-host"></div>
<script>
BoneShape.load("/boneflow/data/bone-shapes.json").then(() => {
  const node = new BoneShape.Node({
    type: "PROCESS",
    label: "縦フロー",
    flowDirection: "vertical",
    portLabelVisibility: { in: true, out: true }
  });
  node.render(document.getElementById("vertical-host"));
});
</script>

結果: 通常ShapeはIN=TOP / OUT=BOTTOM、TIME JOB Semantic Portも正式規則に従って移動します。

11. 表示率を120%へ変更

何をするか: Shape Geometry定義を変えず、表示だけ120%へする。
設定: displayRate=120。範囲は25〜200%。

<div id="rate-host"></div>
<script>
BoneShape.load("/boneflow/data/bone-shapes.json").then(() => {
  new BoneShape.Node({ type: "PROCESS", label: "120%", displayRate: 120 })
    .render(document.getElementById("rate-host"));
});
</script>

結果: Registry/SVG座標を変えず、Preview表示率のみ120%になります。

12. 後から追加したbf-shapeを自動マウント

何をするか: ページ読込後に追加したShapeもHTML Functional Classとして動かす。
設定: 新しいElementへbf-shapeと正式TYPEを付けてDOMへ追加。

<div id="dynamic-shape-host"></div>
<script>
const shape = document.createElement("div");
shape.className = "bf-shape";
shape.dataset.shapeType = "PROCESS";
shape.textContent = "動的処理";
document.getElementById("dynamic-shape-host").appendChild(shape);
</script>

結果: MutationObserverが追加Elementを検出し、#021 Runtimeへマウントします。

Runtime Default / Property Editor

#021 v1.0.35のProperty EditorとRuntime正規化から確認した全Propertyです。HTML Functional Classから直接指定できるのは type と label の入口だけです。

1. `type`

目的: Shape種別。HTMLでは data-shape-type から指定可能。未知TYPEはRuntimeが拒否。
Runtime Default / Editor初期値: PROCESS
型: string / 34 TYPE
範囲・許容値: 34 TYPE一覧のみ
HTML直接指定: 可能（上記Class契約の範囲）
関連・依存・競合: HTML可: data-shape-type。Shape List選択と同じTYPE。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

2. `uiNo`

目的: #117 AnimationのtargetUiNoにも使用。不正形式はAnimation正規化で拒否。
Runtime Default / Editor初期値: UI-021-001
型: string
範囲・許容値: UI-[0-9A-Za-z._-]+
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: HTML直接指定不可。Property Editor / Public API。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

3. `theme`

目的: Theme色を選択。custom color OFF時の見た目を決める。
Runtime Default / Editor初期値: dark
型: enum
範囲・許容値: dark / light / neon
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: HTML直接指定不可。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

4. `displayRate`

目的: SVGの表示率。Registry/SVG座標そのものは変更しない。範囲外はRuntimeで25-200へclamp。
Runtime Default / Editor初期値: 100
型: number / %
範囲・許容値: 25-200 / Editor step 5
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: HTML直接指定不可。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

5. `appearance.enabled`

目的: false=Theme色、true=#040経由のFill/Stroke/Textを使用。
Runtime Default / Editor初期値: false
型: boolean
範囲・許容値: false / true
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: HTML直接指定不可。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

6. `appearance.fill`

目的: Shape Fill。Gradient可。無効色は拒否。
Runtime Default / Editor初期値: #172538
型: paint
範囲・許容値: solid / transparent / GRADIENT_V1
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: appearance.enabled=true時に有効。#040 ColorPicker。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

7. `appearance.stroke`

目的: Shape枠色。
Runtime Default / Editor初期値: #45BDF8
型: color
範囲・許容値: solid #RRGGBB
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: appearance.enabled=true時に有効。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

8. `appearance.text`

目的: Shape主表示文字色。
Runtime Default / Editor初期値: #F5F9FF
型: color
範囲・許容値: solid #RRGGBB
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: appearance.enabled=true時に有効。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

9. `flowDirection`

目的: horizontal=IN左/OUT右、vertical=IN上/OUT下。TIME JOB semantic portも追従。
Runtime Default / Editor初期値: horizontal
型: enum
範囲・許容値: horizontal / vertical
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: HTML直接指定不可。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

10. `portLabelVisibility.in`

目的: IN文字ラベルだけを表示/非表示。Port自体は残る。
Runtime Default / Editor初期値: true
型: boolean
範囲・許容値: true / false
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: HTML直接指定不可。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

11. `portLabelVisibility.out`

目的: OUT文字ラベルだけを表示/非表示。Port自体は残る。
Runtime Default / Editor初期値: true
型: boolean
範囲・許容値: true / false
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: HTML直接指定不可。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

12. `label`

目的: Shape主表示文字。4行以上は3行へ制限される。
Runtime Default / Editor初期値: Registry既定表示文字
型: string
範囲・許容値: 最大3行
HTML直接指定: 可能（上記Class契約の範囲）
関連・依存・競合: HTML可: bf-shape要素内テキスト。空ならRegistry既定。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

13. `displayTextStyle.fontFamily`

目的: 主表示文字専用font。Tooltip/Commentとは独立。
Runtime Default / Editor初期値: Meiryo, sans-serif
型: string
範囲・許容値: Editor 8候補 + 有効CSS font-family
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: HTML直接指定不可。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

14. `displayTextStyle.fontSize`

目的: 主表示文字font size。範囲外は8-72へclamp。
Runtime Default / Editor初期値: 16
型: number / px
範囲・許容値: 8-72 / step 1
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: HTML直接指定不可。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

15. `compositeCount`

目的: MULTI_DOCUMENT / COLLECTIONの重ね数。
Runtime Default / Editor初期値: 3
型: integer
範囲・許容値: 2-4
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: Composite Shapeのみ意味を持つ。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

16. `decisionLabels.positive`

目的: DECISION右側の正側ラベル。
Runtime Default / Editor初期値: YES
型: string
範囲・許容値: 任意文字列 / 空はYES
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: DECISIONのみ。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

17. `decisionLabels.negative`

目的: DECISION下側の負側ラベル。
Runtime Default / Editor初期値: NO
型: string
範囲・許容値: 任意文字列 / 空はNO
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: DECISIONのみ。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

18. `tooltip.mode`

目的: Tooltip表示モード。
Runtime Default / Editor初期値: hover
型: enum
範囲・許容値: hover / select / always / hidden
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: HTML直接指定不可。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

19. `tooltip.text`

目的: Tooltip本文。
Runtime Default / Editor初期値: Shape情報
型: string
範囲・許容値: 任意文字列
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: tooltip.modeと組み合わせる。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

20. `tooltip.fontFamily`

目的: Tooltip専用font。
Runtime Default / Editor初期値: Meiryo, sans-serif
型: string
範囲・許容値: Editor 8候補 + 有効CSS font-family
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: 主表示/Commentと独立。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

21. `tooltip.fontSize`

目的: Tooltip font size。
Runtime Default / Editor初期値: 13
型: number / px
範囲・許容値: 8-72
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: HTML直接指定不可。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

22. `comment.enabled`

目的: Comment bubble表示。
Runtime Default / Editor初期値: true
型: boolean
範囲・許容値: true / false
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: HTML直接指定不可。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

23. `comment.line`

目的: CommentとShape outline間の接続線表示。
Runtime Default / Editor初期値: true
型: boolean
範囲・許容値: true / false
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: comment.enabledと独立して設定される。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

24. `comment.text`

目的: Comment本文。
Runtime Default / Editor初期値: Shape Comment
型: string
範囲・許容値: 任意文字列
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: HTML直接指定不可。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

25. `comment.fontFamily`

目的: Comment専用font。
Runtime Default / Editor初期値: Meiryo, sans-serif
型: string
範囲・許容値: Editor 8候補 + 有効CSS font-family
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: 他文字設定と独立。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

26. `comment.fontSize`

目的: Comment font size。
Runtime Default / Editor初期値: 13
型: number / px
範囲・許容値: 8-72
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: HTML直接指定不可。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

27. `uiState.tooltip.x / y`

目的: Tooltip drag位置。referenceはPARENT固定。
Runtime Default / Editor初期値: 0.46 / 0.08
型: number
範囲・許容値: 親要素基準の正規化座標
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: 操作で更新。HTML直接指定不可。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

28. `uiState.comment.bubbleX / bubbleY`

目的: Comment bubble drag位置。
Runtime Default / Editor初期値: 0.77 / 0.74
型: number
範囲・許容値: 親要素基準の正規化座標
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: 操作で更新。HTML直接指定不可。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

29. `uiState.comment.outlineIndex`

目的: Comment anchor対象outline。
Runtime Default / Editor初期値: 0
型: number
範囲・許容値: 有効outline index
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: Comment anchor dragで更新。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

30. `uiState.comment.anchorRate`

目的: Comment専用起点位置。Joint Portとは共有しない。
Runtime Default / Editor初期値: 0.66
型: number
範囲・許容値: outline上のrate
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: 操作で更新。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

31. `hoverBorderEffect.enabled`

目的: #022 Hover Border Effect利用ON/OFF。
Runtime Default / Editor初期値: false
型: boolean
範囲・許容値: true / false
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: false時はEffect設定を表示へ適用しない。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

32. `hoverBorderEffect.effect`

目的: #022 Effect種別。
Runtime Default / Editor初期値: normal
型: enum
範囲・許容値: normal / neon / spin / cross / blink
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: enabled=true時に適用。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

33. `hoverBorderEffect.color`

目的: Effect色。
Runtime Default / Editor初期値: #35F4FF
型: color
範囲・許容値: solid #RRGGBB
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: #040 ColorPicker solid-only。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

34. `hoverBorderEffect.direction`

目的: spin等の方向。
Runtime Default / Editor初期値: clockwise
型: enum
範囲・許容値: clockwise / counterclockwise
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: 不正値は拒否。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

35. `hoverBorderEffect.speed`

目的: Effect速度。
Runtime Default / Editor初期値: normal
型: enum
範囲・許容値: slow / normal / fast
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: 不正値は拒否。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

36. `hoverBorderEffect.spinWidth`

目的: Spin幅。
Runtime Default / Editor初期値: 2
型: number
範囲・許容値: 1-12
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: 範囲外は拒否。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

37. `hoverBorderEffect.spinGlow`

目的: Spin Glow。
Runtime Default / Editor初期値: 12
型: number
範囲・許容値: 0-60
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: 範囲外は拒否。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

38. `animation.animationUiNo`

目的: #117 Animation側UI番号。
Runtime Default / Editor初期値: UI-117-021-001
型: string
範囲・許容値: UI-*形式
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: 不正形式は拒否。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

39. `animation.targetPart`

目的: Shape全体/SVG/主表示文字のどこへAnimationを適用するか。
Runtime Default / Editor初期値: whole
型: enum
範囲・許容値: whole / visual / label
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: #117責務。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

40. `animation.animation`

目的: #117 Animation種類。
Runtime Default / Editor初期値: none
型: enum
範囲・許容値: none / move / bounce / pulse / spin / blink / slide / zoom / flow / shimmer / glow-sweep / breathing-glow
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: HTML直接指定不可。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

41. `animation.direction`

目的: Animation方向。
Runtime Default / Editor初期値: forward
型: enum
範囲・許容値: forward / reverse
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: 不正値は拒否。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

42. `animation.axis`

目的: 移動系Animation軸。
Runtime Default / Editor初期値: horizontal
型: enum
範囲・許容値: horizontal / vertical
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: 不正値は拒否。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

43. `animation.speed`

目的: Animation速度。
Runtime Default / Editor初期値: normal
型: enum
範囲・許容値: slow / normal / fast
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: 不正値は拒否。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

44. `animation.distance`

目的: 移動距離。
Runtime Default / Editor初期値: 24
型: number
範囲・許容値: 0-10000
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: 範囲外は拒否。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

45. `animation.loop`

目的: Animation繰返し。
Runtime Default / Editor初期値: true
型: boolean
範囲・許容値: true / false
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: #117責務。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

46. `animation.loopWaitMs`

目的: Loop間WAIT。
Runtime Default / Editor初期値: 300
型: integer / ms
範囲・許容値: 0-60000
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: 範囲外は拒否。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

47. `animation.respectReducedMotion`

目的: reduced-motion設定尊重。
Runtime Default / Editor初期値: true
型: boolean
範囲・許容値: true / false
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: #117責務。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

48. `animation.autoplay`

目的: attach時自動再生。
Runtime Default / Editor初期値: true
型: boolean
範囲・許容値: true / false
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: Property Editorではtrue固定。Public APIで詳細操作。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

49. `schedule.type`

目的: SCHEDULE_TRIGGERのSchedule種別。
Runtime Default / Editor初期値: daily
型: enum
範囲・許容値: daily / weekly / monthly / business-day / cron / once
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: SCHEDULE_TRIGGERのみ。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

50. `schedule.triggerMode`

目的: 起動方式。#021はtimerを所有せず、CLOCKはmatchesScheduleで判定。
Runtime Default / Editor初期値: CLOCK
型: enum
範囲・許容値: CLOCK / MANUAL / API / JOINT
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: SCHEDULE_TRIGGERのみ。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

51. `schedule.month`

目的: once等の月。
Runtime Default / Editor初期値: 1
型: integer
範囲・許容値: 1-12
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: 範囲外は拒否。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

52. `schedule.dayOfMonth`

目的: monthly/onceの日。
Runtime Default / Editor初期値: 1
型: integer
範囲・許容値: 1-31
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: 範囲外は拒否。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

53. `schedule.dayOfWeek`

目的: weekly曜日。
Runtime Default / Editor初期値: MON
型: enum
範囲・許容値: SUN / MON / TUE / WED / THU / FRI / SAT
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: 不正値は拒否。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

54. `schedule.hour`

目的: Schedule時。
Runtime Default / Editor初期値: 3
型: integer
範囲・許容値: 0-23
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: 範囲外は拒否。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

55. `schedule.minute`

目的: Schedule分。
Runtime Default / Editor初期値: 0
型: integer
範囲・許容値: 0-59
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: 範囲外は拒否。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

56. `schedule.cron`

目的: cron元データ。
Runtime Default / Editor初期値: 空
型: string
範囲・許容値: 任意文字列
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: type=cron時の表示生成に使用。#021はcron実行器ではない。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

57. `schedule.text`

目的: 元入力値を受けるがnormalizedScheduleで各fieldから表示文字を再生成。
Runtime Default / Editor初期値: 毎日 03:00（自動生成）
型: string
範囲・許容値: Runtime生成
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: 直接実行条件ではなく表示/OUT情報。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

58. `schedule.calendar`

目的: 営業日calendar等の識別情報。
Runtime Default / Editor初期値: 空
型: string
範囲・許容値: 任意文字列
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: #021はcalendar engineを内包しない。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

59. `schedule.enabled`

目的: Schedule有効状態。
Runtime Default / Editor初期値: true
型: boolean
範囲・許容値: true / false
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: SCHEDULE_TRIGGERのみ。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

60. `job.processType`

目的: JOB/JOBNETの処理TYPE metadata。
Runtime Default / Editor初期値: CUSTOM
型: enum
範囲・許容値: SQL / BAT / JS / POWERSHELL / EXE / API / SHELL / ETL / FILE_TRANSFER / AI / CUSTOM
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: #021は処理本体を実行しない。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

61. `job.processContent`

目的: 実際の処理内容TEXTを保持。
Runtime Default / Editor初期値: 空
型: string
範囲・許容値: 0-50000文字 / control char禁止
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: 不正control文字/50000超は拒否。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

62. `job.acceptedInputType`

目的: JOB IN受入TYPE契約。
Runtime Default / Editor初期値: ANY
型: enum
範囲・許容値: ANY / JSON / TEXT / FILE / SQL / COMMAND / JOB_REQUEST
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: ANY以外はinput.type不一致を拒否。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

63. `job.status`

目的: JOB/JOBNET状態。resultがあればSUCCESS/ERRORへ同期。
Runtime Default / Editor初期値: WAIT
型: enum
範囲・許容値: WAIT / READY / RUNNING / SUCCESS / ERROR / HOLD / SKIPPED
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: TYPEと状態は別。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

64. `job.statusColors.running`

目的: RUNNING状態色。
Runtime Default / Editor初期値: #F59E0B
型: paint
範囲・許容値: solid / GRADIENT_V1
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: #040 ColorPicker。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

65. `job.statusColors.success`

目的: SUCCESS状態色。
Runtime Default / Editor初期値: #3B82F6
型: paint
範囲・許容値: solid / GRADIENT_V1
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: #040 ColorPicker。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

66. `job.statusColors.error`

目的: ERROR状態色。
Runtime Default / Editor初期値: #EF4444
型: paint
範囲・許容値: solid / GRADIENT_V1
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: #040 ColorPicker。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

67. `job.scheduleText`

目的: JOB/JOBNETが保持するSchedule表示情報。
Runtime Default / Editor初期値: 03:00
型: string
範囲・許容値: 任意文字列
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: SCHEDULE_TRIGGER scheduleとは別。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

68. `job.enabled`

目的: JOB/JOBNET有効状態。
Runtime Default / Editor初期値: true
型: boolean
範囲・許容値: true / false
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: HTML直接指定不可。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

69. `job.parallel`

目的: JOBNETのParallel表示/metadata。
Runtime Default / Editor初期値: false
型: boolean
範囲・許容値: true / false
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: JOBNETで主に使用。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

70. `job.input`

目的: setJobInputで受けるデータIN。acceptedInputTypeを適用。
Runtime Default / Editor初期値: null
型: Bone object
範囲・許容値: {id,type,value}
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: Property Editor直接入力ではなくPublic API。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

71. `job.result`

目的: applyJobResultで戻り値を保持。
Runtime Default / Editor初期値: null
型: object / SUCCESS|ERROR
範囲・許容値: statusはSUCCESS / ERRORのみ
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: Public API。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

72. `job.returnPort`

目的: result.statusと同期する戻りPort識別。
Runtime Default / Editor初期値: null
型: enum / null
範囲・許容値: SUCCESS / ERROR / null
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: Public API結果から生成。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

73. `logicalName`

目的: TABLE_DETAILの論理名。
Runtime Default / Editor初期値: 顧客
型: string
範囲・許容値: 任意文字列
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: Detail Shapeのみ。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

74. `tableName`

目的: TABLE_DETAILの物理テーブル名。
Runtime Default / Editor初期値: customers
型: string
範囲・許容値: 任意文字列
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: Detail Shapeのみ。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

75. `fields`

目的: TABLE_DETAILの可変field行。各fieldにIN/OUT Port。
Runtime Default / Editor初期値: 3行sample（顧客ID / 顧客名 / 登録日時）
型: array of object
範囲・許容値: 各要素は { name, alias, type }。name=表示フィールド名、alias=field key/略名、type=型表示文字列。行は追加・削除可能。
HTML直接指定: 不可。Property EditorまたはPublic APIを使用。
関連・依存・競合: 空/追加/削除はProperty Editorで操作。
無効値時: 上記に個別記載がある場合はRuntimeが拒否。clampと明記した数値は範囲内へ補正。

Shape図鑑（34 TYPE・30項目完全監査＋実Shape＋コピー可能HTML）

Shape List実体とRegistry 34 TYPEを1件ずつ照合した完全版です。各TYPEの30項目を省略せず、実ShapeはShape Listと同じthumbnail契約でRuntime生成します。

`START` — 開始

TYPE正式名: START
日本語名称: 開始
English名称: Start
Shape List上の分類: 固定Shape
Registry category: fixed
用途: フローの開始点を表す。
Shapeが表す意味: 処理系列がここから始まることを示す開始記号。
実Geometry / 見た目: 角丸長方形。180×80、rx=40。
Default width / height: 220×140 (viewBox [0, 0, 220, 140])
Port数: 4
Port位置: LEFT=[20, 70], RIGHT=[200, 70], TOP=[110, 30], BOTTOM=[110, 110]
IN / OUT方向: horizontal: LEFT=IN / RIGHT=OUT; vertical: TOP=IN / BOTTOM=OUT
Joint接続上の意味: Port座標とroleを#021が提示し、接続可否・線描画・再接続・配送状態は#002 Bone Jointが担当する。
固有Property: 固有追加Propertyなし。開始という意味はTYPEで表し、共通Shape Propertyを使用する。
共通Property: theme, uiNo, displayRate, appearance（#040 ColorPicker）, flowDirection, portLabelVisibility, displayTextStyle, tooltip, comment, hoverBorderEffect（#022）, animation（#117）。TYPE固有で無効になる項目はRuntime正規化/Validationに従う。
Property既定値: theme=dark; uiNo=UI-021-001; displayRate=100%; appearance.enabled=false/fill=#172538/stroke=#45BDF8/text=#F5F9FF; flowDirection=horizontal; port labels=true/true; main font=Meiryo, sans-serif 16px; tooltip=hidden 13px; comment disabled 13px; hover effect disabled; animation=none. No additional TYPE-only default beyond the Registry geometry/text and the common Shape defaults.
Enum全値: theme = dark / light / neon; flowDirection = horizontal / vertical; tooltip.mode = hover / select / always / hidden; hover effect = normal / neon / spin / cross / blink; hover direction = clockwise / counterclockwise; hover speed = slow / normal / fast; animation target = whole / visual / label; animation = none / move / bounce / pulse / spin / blink / slide / zoom / flow / shimmer / glow-sweep / breathing-glow; animation direction = forward / reverse; animation axis = horizontal / vertical; animation speed = slow / normal / fast. このTYPE固有の追加enumなし。
Boolean ON / OFF: appearance.enabled, portLabelVisibility.in/out, comment.enabled/line, hoverBorderEffect.enabled, animation.loop/respectReducedMotion/autoplay use true/false; false disables that feature while preserving the Shape itself.
数値範囲 / 単位 / default: displayRate: 25-200%, default 100%; displayTextStyle.fontSize: 8-72px, default 16px; tooltip/comment fontSize: 8-72px, default 13px; hover spinWidth: 1-12, default 2; spinGlow: 0-60, default 12; animation distance: 0-10000, default 24; loopWaitMs: 0-60000ms, default 300.
依存Component: #002 Bone Joint（接続/WAIT/FIFO/BLOCKED）、#022 Hover Border Effect（min v1.0.5 + attach/detach/getState/isAttached。v1.0.10可）、#117 Animation v1.0.9、#040 ColorPicker（Property色選択）。#020 LabelはUI/Class基準。
責務分離: Shape開始記号。別Componentを内包しない。
Securityとの関係: TYPEはRegistry存在確認、色・数値・enum等はRuntime正規化/Validationを通す。Shape自体は任意コードを実行しない。
WAIT / FIFO / BLOCKEDとの関係: このShapeは独自配送キューを持たない。WAIT/FIFO/BLOCKEDは#002 Bone Jointの接続・配送状態として扱い、Shape GeometryやTYPE意味と混同しない。
似たShapeとの違い: ENDは終端。STARTは開始専用。
使い分け: ENDは終端。STARTは開始専用。このTYPEの意味が必要な場合だけ選択する。
実際の使用場面: 処理フローの入口。ENDと対になる。
HTML Functional Class指定: 通常利用Classは bf-shape 1つ。data-shape-type="START" と本文labelのみHTMLから直接指定する。
コピー可能HTML: 直後の html ブロックをCopyボタンで使用できる: <div class="bf-shape" data-shape-type="START">開始</div>
実Shape表示: 直後の shape-live ブロックをDOC専用rendererがShape Listと同じthumbnail値でBoneShape Runtimeへ渡して描画する。IN/OUT文字・Tooltip・Comment・Hover/Animationは図鑑では非表示。
Public API例 / 必要性: new BoneShape.Node(value) / createNode(value) / getOutput() を高度操作で使用。HTMLだけで足りる場合は直接呼ばない。

<div class="bf-shape" data-shape-type="START">開始</div>

<div class="bf-shape" data-shape-type="START">開始</div>

`END` — 終了

TYPE正式名: END
日本語名称: 終了
English名称: End
Shape List上の分類: 固定Shape
Registry category: fixed
用途: フローの終了点を表す。
Shapeが表す意味: 処理系列がここで終了することを示す終端記号。
実Geometry / 見た目: STARTと同じ角丸長方形。180×80、rx=40。
Default width / height: 220×140 (viewBox [0, 0, 220, 140])
Port数: 4
Port位置: LEFT=[20, 70], RIGHT=[200, 70], TOP=[110, 30], BOTTOM=[110, 110]
IN / OUT方向: horizontal: LEFT=IN / RIGHT=OUT; vertical: TOP=IN / BOTTOM=OUT
Joint接続上の意味: Port座標とroleを#021が提示し、接続可否・線描画・再接続・配送状態は#002 Bone Jointが担当する。
固有Property: 固有追加Propertyなし。
共通Property: theme, uiNo, displayRate, appearance（#040 ColorPicker）, flowDirection, portLabelVisibility, displayTextStyle, tooltip, comment, hoverBorderEffect（#022）, animation（#117）。TYPE固有で無効になる項目はRuntime正規化/Validationに従う。
Property既定値: theme=dark; uiNo=UI-021-001; displayRate=100%; appearance.enabled=false/fill=#172538/stroke=#45BDF8/text=#F5F9FF; flowDirection=horizontal; port labels=true/true; main font=Meiryo, sans-serif 16px; tooltip=hidden 13px; comment disabled 13px; hover effect disabled; animation=none. No additional TYPE-only default beyond the Registry geometry/text and the common Shape defaults.
Enum全値: theme = dark / light / neon; flowDirection = horizontal / vertical; tooltip.mode = hover / select / always / hidden; hover effect = normal / neon / spin / cross / blink; hover direction = clockwise / counterclockwise; hover speed = slow / normal / fast; animation target = whole / visual / label; animation = none / move / bounce / pulse / spin / blink / slide / zoom / flow / shimmer / glow-sweep / breathing-glow; animation direction = forward / reverse; animation axis = horizontal / vertical; animation speed = slow / normal / fast. このTYPE固有の追加enumなし。
Boolean ON / OFF: appearance.enabled, portLabelVisibility.in/out, comment.enabled/line, hoverBorderEffect.enabled, animation.loop/respectReducedMotion/autoplay use true/false; false disables that feature while preserving the Shape itself.
数値範囲 / 単位 / default: displayRate: 25-200%, default 100%; displayTextStyle.fontSize: 8-72px, default 16px; tooltip/comment fontSize: 8-72px, default 13px; hover spinWidth: 1-12, default 2; spinGlow: 0-60, default 12; animation distance: 0-10000, default 24; loopWaitMs: 0-60000ms, default 300.
依存Component: #002 Bone Joint（接続/WAIT/FIFO/BLOCKED）、#022 Hover Border Effect（min v1.0.5 + attach/detach/getState/isAttached。v1.0.10可）、#117 Animation v1.0.9、#040 ColorPicker（Property色選択）。#020 LabelはUI/Class基準。
責務分離: Shape終了記号。別Componentを内包しない。
Securityとの関係: TYPEはRegistry存在確認、色・数値・enum等はRuntime正規化/Validationを通す。Shape自体は任意コードを実行しない。
WAIT / FIFO / BLOCKEDとの関係: このShapeは独自配送キューを持たない。WAIT/FIFO/BLOCKEDは#002 Bone Jointの接続・配送状態として扱い、Shape GeometryやTYPE意味と混同しない。
似たShapeとの違い: STARTは入口、ENDは出口。Geometryは同系統でも意味が逆。
使い分け: STARTは入口、ENDは出口。Geometryは同系統でも意味が逆。このTYPEの意味が必要な場合だけ選択する。
実際の使用場面: 処理フローの終端。
HTML Functional Class指定: 通常利用Classは bf-shape 1つ。data-shape-type="END" と本文labelのみHTMLから直接指定する。
コピー可能HTML: 直後の html ブロックをCopyボタンで使用できる: <div class="bf-shape" data-shape-type="END">終了</div>
実Shape表示: 直後の shape-live ブロックをDOC専用rendererがShape Listと同じthumbnail値でBoneShape Runtimeへ渡して描画する。IN/OUT文字・Tooltip・Comment・Hover/Animationは図鑑では非表示。
Public API例 / 必要性: new BoneShape.Node(value) / createNode(value) / getOutput() を高度操作で使用。HTMLだけで足りる場合は直接呼ばない。

<div class="bf-shape" data-shape-type="END">終了</div>

<div class="bf-shape" data-shape-type="END">終了</div>

`PROCESS` — 処理

TYPE正式名: PROCESS
日本語名称: 処理
English名称: Process
Shape List上の分類: 固定Shape
Registry category: fixed
用途: 一般的な処理工程を表す。
Shapeが表す意味: 自動・一般処理を1工程として表す基本処理記号。
実Geometry / 見た目: 長方形。180×100。
Default width / height: 220×140 (viewBox [0, 0, 220, 140])
Port数: 4
Port位置: LEFT=[20, 70], RIGHT=[200, 70], TOP=[110, 20], BOTTOM=[110, 120]
IN / OUT方向: horizontal: LEFT=IN / RIGHT=OUT; vertical: TOP=IN / BOTTOM=OUT
Joint接続上の意味: Port座標とroleを#021が提示し、接続可否・線描画・再接続・配送状態は#002 Bone Jointが担当する。
固有Property: 固有追加Propertyなし。
共通Property: theme, uiNo, displayRate, appearance（#040 ColorPicker）, flowDirection, portLabelVisibility, displayTextStyle, tooltip, comment, hoverBorderEffect（#022）, animation（#117）。TYPE固有で無効になる項目はRuntime正規化/Validationに従う。
Property既定値: theme=dark; uiNo=UI-021-001; displayRate=100%; appearance.enabled=false/fill=#172538/stroke=#45BDF8/text=#F5F9FF; flowDirection=horizontal; port labels=true/true; main font=Meiryo, sans-serif 16px; tooltip=hidden 13px; comment disabled 13px; hover effect disabled; animation=none. No additional TYPE-only default beyond the Registry geometry/text and the common Shape defaults.
Enum全値: theme = dark / light / neon; flowDirection = horizontal / vertical; tooltip.mode = hover / select / always / hidden; hover effect = normal / neon / spin / cross / blink; hover direction = clockwise / counterclockwise; hover speed = slow / normal / fast; animation target = whole / visual / label; animation = none / move / bounce / pulse / spin / blink / slide / zoom / flow / shimmer / glow-sweep / breathing-glow; animation direction = forward / reverse; animation axis = horizontal / vertical; animation speed = slow / normal / fast. このTYPE固有の追加enumなし。
Boolean ON / OFF: appearance.enabled, portLabelVisibility.in/out, comment.enabled/line, hoverBorderEffect.enabled, animation.loop/respectReducedMotion/autoplay use true/false; false disables that feature while preserving the Shape itself.
数値範囲 / 単位 / default: displayRate: 25-200%, default 100%; displayTextStyle.fontSize: 8-72px, default 16px; tooltip/comment fontSize: 8-72px, default 13px; hover spinWidth: 1-12, default 2; spinGlow: 0-60, default 12; animation distance: 0-10000, default 24; loopWaitMs: 0-60000ms, default 300.
依存Component: #002 Bone Joint（接続/WAIT/FIFO/BLOCKED）、#022 Hover Border Effect（min v1.0.5 + attach/detach/getState/isAttached。v1.0.10可）、#117 Animation v1.0.9、#040 ColorPicker（Property色選択）。#020 LabelはUI/Class基準。
責務分離: 通常処理Shape。
Securityとの関係: TYPEはRegistry存在確認、色・数値・enum等はRuntime正規化/Validationを通す。Shape自体は任意コードを実行しない。
WAIT / FIFO / BLOCKEDとの関係: このShapeは独自配送キューを持たない。WAIT/FIFO/BLOCKEDは#002 Bone Jointの接続・配送状態として扱い、Shape GeometryやTYPE意味と混同しない。
似たShapeとの違い: SUB_PROCESSは再利用/別定義処理、MANUAL_OPERATIONは人手作業。
使い分け: SUB_PROCESSは再利用/別定義処理、MANUAL_OPERATIONは人手作業。このTYPEの意味が必要な場合だけ選択する。
実際の使用場面: 計算、変換、更新、通常処理。
HTML Functional Class指定: 通常利用Classは bf-shape 1つ。data-shape-type="PROCESS" と本文labelのみHTMLから直接指定する。
コピー可能HTML: 直後の html ブロックをCopyボタンで使用できる: <div class="bf-shape" data-shape-type="PROCESS">処理</div>
実Shape表示: 直後の shape-live ブロックをDOC専用rendererがShape Listと同じthumbnail値でBoneShape Runtimeへ渡して描画する。IN/OUT文字・Tooltip・Comment・Hover/Animationは図鑑では非表示。
Public API例 / 必要性: new BoneShape.Node(value) / createNode(value) / getOutput() を高度操作で使用。HTMLだけで足りる場合は直接呼ばない。

<div class="bf-shape" data-shape-type="PROCESS">処理</div>

<div class="bf-shape" data-shape-type="PROCESS">処理</div>

`DECISION` — 条件分岐

TYPE正式名: DECISION
日本語名称: 条件分岐
English名称: Decision
Shape List上の分類: 固定Shape
Registry category: fixed
用途: 条件判定と分岐点を表す。
Shapeが表す意味: 入力条件を評価し、複数経路へ分ける判断点。
実Geometry / 見た目: ひし形。左右180、高さ120相当。
Default width / height: 220×160 (viewBox [0, 0, 220, 160])
Port数: 4
Port位置: LEFT=[20, 80], RIGHT=[200, 80], TOP=[110, 20], BOTTOM=[110, 140]
IN / OUT方向: horizontal: LEFT=IN / RIGHT=OUT; vertical: TOP=IN / BOTTOM=OUT
Joint接続上の意味: Port座標とroleを#021が提示し、接続可否・線描画・再接続・配送状態は#002 Bone Jointが担当する。
固有Property: decisionLabels.positive / negative。表示ラベルは内部KEYと分離。
共通Property: theme, uiNo, displayRate, appearance（#040 ColorPicker）, flowDirection, portLabelVisibility, displayTextStyle, tooltip, comment, hoverBorderEffect（#022）, animation（#117）。TYPE固有で無効になる項目はRuntime正規化/Validationに従う。
Property既定値: theme=dark; uiNo=UI-021-001; displayRate=100%; appearance.enabled=false/fill=#172538/stroke=#45BDF8/text=#F5F9FF; flowDirection=horizontal; port labels=true/true; main font=Meiryo, sans-serif 16px; tooltip=hidden 13px; comment disabled 13px; hover effect disabled; animation=none. decisionLabels.positive=YES, decisionLabels.negative=NO.
Enum全値: theme = dark / light / neon; flowDirection = horizontal / vertical; tooltip.mode = hover / select / always / hidden; hover effect = normal / neon / spin / cross / blink; hover direction = clockwise / counterclockwise; hover speed = slow / normal / fast; animation target = whole / visual / label; animation = none / move / bounce / pulse / spin / blink / slide / zoom / flow / shimmer / glow-sweep / breathing-glow; animation direction = forward / reverse; animation axis = horizontal / vertical; animation speed = slow / normal / fast. decision labels are free text; no extra enum.
Boolean ON / OFF: appearance.enabled, portLabelVisibility.in/out, comment.enabled/line, hoverBorderEffect.enabled, animation.loop/respectReducedMotion/autoplay use true/false; false disables that feature while preserving the Shape itself.
数値範囲 / 単位 / default: displayRate: 25-200%, default 100%; displayTextStyle.fontSize: 8-72px, default 16px; tooltip/comment fontSize: 8-72px, default 13px; hover spinWidth: 1-12, default 2; spinGlow: 0-60, default 12; animation distance: 0-10000, default 24; loopWaitMs: 0-60000ms, default 300.
依存Component: #002 Bone Joint（接続/WAIT/FIFO/BLOCKED）、#022 Hover Border Effect（min v1.0.5 + attach/detach/getState/isAttached。v1.0.10可）、#117 Animation v1.0.9、#040 ColorPicker（Property色選択）。#020 LabelはUI/Class基準。
責務分離: 分岐ラベルを持つShape。Joint接続は#002。
Securityとの関係: TYPEはRegistry存在確認、色・数値・enum等はRuntime正規化/Validationを通す。Shape自体は任意コードを実行しない。
WAIT / FIFO / BLOCKEDとの関係: このShapeは独自配送キューを持たない。WAIT/FIFO/BLOCKEDは#002 Bone Jointの接続・配送状態として扱い、Shape GeometryやTYPE意味と混同しない。
似たShapeとの違い: PROCESSは処理、DECISIONは分岐。
使い分け: PROCESSは処理、DECISIONは分岐。このTYPEの意味が必要な場合だけ選択する。
実際の使用場面: YES/NO、TRUE/FALSE、任意2分岐の判断点。
HTML Functional Class指定: 通常利用Classは bf-shape 1つ。data-shape-type="DECISION" と本文labelのみHTMLから直接指定する。
コピー可能HTML: 直後の html ブロックをCopyボタンで使用できる: <div class="bf-shape" data-shape-type="DECISION">条件分岐</div>
実Shape表示: 直後の shape-live ブロックをDOC専用rendererがShape Listと同じthumbnail値でBoneShape Runtimeへ渡して描画する。IN/OUT文字・Tooltip・Comment・Hover/Animationは図鑑では非表示。
Public API例 / 必要性: new BoneShape.Node(value) / createNode(value) / getOutput() を高度操作で使用。HTMLだけで足りる場合は直接呼ばない。

<div class="bf-shape" data-shape-type="DECISION">条件分岐</div>

<div class="bf-shape" data-shape-type="DECISION">条件分岐</div>

`INPUT_OUTPUT` — 入出力

TYPE正式名: INPUT_OUTPUT
日本語名称: 入出力
English名称: Input Output
Shape List上の分類: 固定Shape
Registry category: fixed
用途: 外部入力または出力工程を表す。
Shapeが表す意味: システム境界をまたぐ入力または出力工程。
実Geometry / 見た目: 平行四辺形。viewBox 240×140。
Default width / height: 240×140 (viewBox [0, 0, 240, 140])
Port数: 4
Port位置: LEFT=[30, 70], RIGHT=[210, 70], TOP=[120, 20], BOTTOM=[120, 120]
IN / OUT方向: horizontal: LEFT=IN / RIGHT=OUT; vertical: TOP=IN / BOTTOM=OUT
Joint接続上の意味: Port座標とroleを#021が提示し、接続可否・線描画・再接続・配送状態は#002 Bone Jointが担当する。
固有Property: 固有追加Propertyなし。
共通Property: theme, uiNo, displayRate, appearance（#040 ColorPicker）, flowDirection, portLabelVisibility, displayTextStyle, tooltip, comment, hoverBorderEffect（#022）, animation（#117）。TYPE固有で無効になる項目はRuntime正規化/Validationに従う。
Property既定値: theme=dark; uiNo=UI-021-001; displayRate=100%; appearance.enabled=false/fill=#172538/stroke=#45BDF8/text=#F5F9FF; flowDirection=horizontal; port labels=true/true; main font=Meiryo, sans-serif 16px; tooltip=hidden 13px; comment disabled 13px; hover effect disabled; animation=none. No additional TYPE-only default beyond the Registry geometry/text and the common Shape defaults.
Enum全値: theme = dark / light / neon; flowDirection = horizontal / vertical; tooltip.mode = hover / select / always / hidden; hover effect = normal / neon / spin / cross / blink; hover direction = clockwise / counterclockwise; hover speed = slow / normal / fast; animation target = whole / visual / label; animation = none / move / bounce / pulse / spin / blink / slide / zoom / flow / shimmer / glow-sweep / breathing-glow; animation direction = forward / reverse; animation axis = horizontal / vertical; animation speed = slow / normal / fast. このTYPE固有の追加enumなし。
Boolean ON / OFF: appearance.enabled, portLabelVisibility.in/out, comment.enabled/line, hoverBorderEffect.enabled, animation.loop/respectReducedMotion/autoplay use true/false; false disables that feature while preserving the Shape itself.
数値範囲 / 単位 / default: displayRate: 25-200%, default 100%; displayTextStyle.fontSize: 8-72px, default 16px; tooltip/comment fontSize: 8-72px, default 13px; hover spinWidth: 1-12, default 2; spinGlow: 0-60, default 12; animation distance: 0-10000, default 24; loopWaitMs: 0-60000ms, default 300.
依存Component: #002 Bone Joint（接続/WAIT/FIFO/BLOCKED）、#022 Hover Border Effect（min v1.0.5 + attach/detach/getState/isAttached。v1.0.10可）、#117 Animation v1.0.9、#040 ColorPicker（Property色選択）。#020 LabelはUI/Class基準。
責務分離: 入出力工程を表すShape。
Securityとの関係: TYPEはRegistry存在確認、色・数値・enum等はRuntime正規化/Validationを通す。Shape自体は任意コードを実行しない。
WAIT / FIFO / BLOCKEDとの関係: このShapeは独自配送キューを持たない。WAIT/FIFO/BLOCKEDは#002 Bone Jointの接続・配送状態として扱い、Shape GeometryやTYPE意味と混同しない。
似たShapeとの違い: FILEはデータそのもの、INPUT_OUTPUTは入出力工程。
使い分け: FILEはデータそのもの、INPUT_OUTPUTは入出力工程。このTYPEの意味が必要な場合だけ選択する。
実際の使用場面: ファイル取込、画面入力、帳票出力、外部入出力境界。
HTML Functional Class指定: 通常利用Classは bf-shape 1つ。data-shape-type="INPUT_OUTPUT" と本文labelのみHTMLから直接指定する。
コピー可能HTML: 直後の html ブロックをCopyボタンで使用できる: <div class="bf-shape" data-shape-type="INPUT_OUTPUT">入出力</div>
実Shape表示: 直後の shape-live ブロックをDOC専用rendererがShape Listと同じthumbnail値でBoneShape Runtimeへ渡して描画する。IN/OUT文字・Tooltip・Comment・Hover/Animationは図鑑では非表示。
Public API例 / 必要性: new BoneShape.Node(value) / createNode(value) / getOutput() を高度操作で使用。HTMLだけで足りる場合は直接呼ばない。

<div class="bf-shape" data-shape-type="INPUT_OUTPUT">入出力</div>

<div class="bf-shape" data-shape-type="INPUT_OUTPUT">入出力</div>

`SUB_PROCESS` — サブプロセス

TYPE正式名: SUB_PROCESS
日本語名称: サブプロセス
English名称: Sub Process
Shape List上の分類: 固定Shape
Registry category: fixed
用途: サブプロセス、別定義処理、再利用処理の呼出位置を表す。
Shapeが表す意味: 別定義・再利用可能な処理まとまりを呼び出す工程。
実Geometry / 見た目: 長方形＋左右内側の縦線2本。180×100。
Default width / height: 220×140 (viewBox [0, 0, 220, 140])
Port数: 4
Port位置: LEFT=[20, 70], RIGHT=[200, 70], TOP=[110, 20], BOTTOM=[110, 120]
IN / OUT方向: horizontal: LEFT=IN / RIGHT=OUT; vertical: TOP=IN / BOTTOM=OUT
Joint接続上の意味: Port座標とroleを#021が提示し、接続可否・線描画・再接続・配送状態は#002 Bone Jointが担当する。
固有Property: 固有追加Propertyなし。
共通Property: theme, uiNo, displayRate, appearance（#040 ColorPicker）, flowDirection, portLabelVisibility, displayTextStyle, tooltip, comment, hoverBorderEffect（#022）, animation（#117）。TYPE固有で無効になる項目はRuntime正規化/Validationに従う。
Property既定値: theme=dark; uiNo=UI-021-001; displayRate=100%; appearance.enabled=false/fill=#172538/stroke=#45BDF8/text=#F5F9FF; flowDirection=horizontal; port labels=true/true; main font=Meiryo, sans-serif 16px; tooltip=hidden 13px; comment disabled 13px; hover effect disabled; animation=none. No additional TYPE-only default beyond the Registry geometry/text and the common Shape defaults.
Enum全値: theme = dark / light / neon; flowDirection = horizontal / vertical; tooltip.mode = hover / select / always / hidden; hover effect = normal / neon / spin / cross / blink; hover direction = clockwise / counterclockwise; hover speed = slow / normal / fast; animation target = whole / visual / label; animation = none / move / bounce / pulse / spin / blink / slide / zoom / flow / shimmer / glow-sweep / breathing-glow; animation direction = forward / reverse; animation axis = horizontal / vertical; animation speed = slow / normal / fast. このTYPE固有の追加enumなし。
Boolean ON / OFF: appearance.enabled, portLabelVisibility.in/out, comment.enabled/line, hoverBorderEffect.enabled, animation.loop/respectReducedMotion/autoplay use true/false; false disables that feature while preserving the Shape itself.
数値範囲 / 単位 / default: displayRate: 25-200%, default 100%; displayTextStyle.fontSize: 8-72px, default 16px; tooltip/comment fontSize: 8-72px, default 13px; hover spinWidth: 1-12, default 2; spinGlow: 0-60, default 12; animation distance: 0-10000, default 24; loopWaitMs: 0-60000ms, default 300.
依存Component: #002 Bone Joint（接続/WAIT/FIFO/BLOCKED）、#022 Hover Border Effect（min v1.0.5 + attach/detach/getState/isAttached。v1.0.10可）、#117 Animation v1.0.9、#040 ColorPicker（Property色選択）。#020 LabelはUI/Class基準。
責務分離: サブプロセス表現。
Securityとの関係: TYPEはRegistry存在確認、色・数値・enum等はRuntime正規化/Validationを通す。Shape自体は任意コードを実行しない。
WAIT / FIFO / BLOCKEDとの関係: このShapeは独自配送キューを持たない。WAIT/FIFO/BLOCKEDは#002 Bone Jointの接続・配送状態として扱い、Shape GeometryやTYPE意味と混同しない。
似たShapeとの違い: PROCESSは通常処理、SUB_PROCESSは別定義処理を示す。
使い分け: PROCESSは通常処理、SUB_PROCESSは別定義処理を示す。このTYPEの意味が必要な場合だけ選択する。
実際の使用場面: 別フローや再利用工程への委譲。
HTML Functional Class指定: 通常利用Classは bf-shape 1つ。data-shape-type="SUB_PROCESS" と本文labelのみHTMLから直接指定する。
コピー可能HTML: 直後の html ブロックをCopyボタンで使用できる: <div class="bf-shape" data-shape-type="SUB_PROCESS">サブプロセス</div>
実Shape表示: 直後の shape-live ブロックをDOC専用rendererがShape Listと同じthumbnail値でBoneShape Runtimeへ渡して描画する。IN/OUT文字・Tooltip・Comment・Hover/Animationは図鑑では非表示。
Public API例 / 必要性: new BoneShape.Node(value) / createNode(value) / getOutput() を高度操作で使用。HTMLだけで足りる場合は直接呼ばない。

<div class="bf-shape" data-shape-type="SUB_PROCESS">サブプロセス</div>

<div class="bf-shape" data-shape-type="SUB_PROCESS">サブプロセス</div>

`DOCUMENT` — ドキュメント

TYPE正式名: DOCUMENT
日本語名称: ドキュメント
English名称: Document
Shape List上の分類: 固定Shape
Registry category: fixed
用途: 文書・帳票・ドキュメント成果物を表す。
Shapeが表す意味: 単一文書・帳票・文書データを表す記号。
実Geometry / 見た目: 下辺が波形の文書Shape。viewBox 240×160。
Default width / height: 240×160 (viewBox [0, 0, 240, 160])
Port数: 4
Port位置: LEFT=[20, 70], RIGHT=[220, 70], TOP=[120, 20], BOTTOM=[120, 119]
IN / OUT方向: horizontal: LEFT=IN / RIGHT=OUT; vertical: TOP=IN / BOTTOM=OUT
Joint接続上の意味: Port座標とroleを#021が提示し、接続可否・線描画・再接続・配送状態は#002 Bone Jointが担当する。
固有Property: 固有追加Propertyなし。MULTI_DOCUMENTの基底Shapeでもある。
共通Property: theme, uiNo, displayRate, appearance（#040 ColorPicker）, flowDirection, portLabelVisibility, displayTextStyle, tooltip, comment, hoverBorderEffect（#022）, animation（#117）。TYPE固有で無効になる項目はRuntime正規化/Validationに従う。
Property既定値: theme=dark; uiNo=UI-021-001; displayRate=100%; appearance.enabled=false/fill=#172538/stroke=#45BDF8/text=#F5F9FF; flowDirection=horizontal; port labels=true/true; main font=Meiryo, sans-serif 16px; tooltip=hidden 13px; comment disabled 13px; hover effect disabled; animation=none. No additional TYPE-only default beyond the Registry geometry/text and the common Shape defaults.
Enum全値: theme = dark / light / neon; flowDirection = horizontal / vertical; tooltip.mode = hover / select / always / hidden; hover effect = normal / neon / spin / cross / blink; hover direction = clockwise / counterclockwise; hover speed = slow / normal / fast; animation target = whole / visual / label; animation = none / move / bounce / pulse / spin / blink / slide / zoom / flow / shimmer / glow-sweep / breathing-glow; animation direction = forward / reverse; animation axis = horizontal / vertical; animation speed = slow / normal / fast. このTYPE固有の追加enumなし。
Boolean ON / OFF: appearance.enabled, portLabelVisibility.in/out, comment.enabled/line, hoverBorderEffect.enabled, animation.loop/respectReducedMotion/autoplay use true/false; false disables that feature while preserving the Shape itself.
数値範囲 / 単位 / default: displayRate: 25-200%, default 100%; displayTextStyle.fontSize: 8-72px, default 16px; tooltip/comment fontSize: 8-72px, default 13px; hover spinWidth: 1-12, default 2; spinGlow: 0-60, default 12; animation distance: 0-10000, default 24; loopWaitMs: 0-60000ms, default 300.
依存Component: #002 Bone Joint（接続/WAIT/FIFO/BLOCKED）、#022 Hover Border Effect（min v1.0.5 + attach/detach/getState/isAttached。v1.0.10可）、#117 Animation v1.0.9、#040 ColorPicker（Property色選択）。#020 LabelはUI/Class基準。
責務分離: 文書データ表現。
Securityとの関係: TYPEはRegistry存在確認、色・数値・enum等はRuntime正規化/Validationを通す。Shape自体は任意コードを実行しない。
WAIT / FIFO / BLOCKEDとの関係: このShapeは独自配送キューを持たない。WAIT/FIFO/BLOCKEDは#002 Bone Jointの接続・配送状態として扱い、Shape GeometryやTYPE意味と混同しない。
似たShapeとの違い: MULTI_DOCUMENTは複数文書、FILEは一般ファイル。
使い分け: MULTI_DOCUMENTは複数文書、FILEは一般ファイル。このTYPEの意味が必要な場合だけ選択する。
実際の使用場面: 帳票、PDF、文書、申請書など文書単体。
HTML Functional Class指定: 通常利用Classは bf-shape 1つ。data-shape-type="DOCUMENT" と本文labelのみHTMLから直接指定する。
コピー可能HTML: 直後の html ブロックをCopyボタンで使用できる: <div class="bf-shape" data-shape-type="DOCUMENT">ドキュメント</div>
実Shape表示: 直後の shape-live ブロックをDOC専用rendererがShape Listと同じthumbnail値でBoneShape Runtimeへ渡して描画する。IN/OUT文字・Tooltip・Comment・Hover/Animationは図鑑では非表示。
Public API例 / 必要性: new BoneShape.Node(value) / createNode(value) / getOutput() を高度操作で使用。HTMLだけで足りる場合は直接呼ばない。

<div class="bf-shape" data-shape-type="DOCUMENT">ドキュメント</div>

<div class="bf-shape" data-shape-type="DOCUMENT">ドキュメント</div>

`DATABASE` — データベース

TYPE正式名: DATABASE
日本語名称: データベース
English名称: Database
Shape List上の分類: 固定Shape
Registry category: fixed
用途: データベースを表す。
Shapeが表す意味: 永続データベース／DBアクセス対象を表す記号。
実Geometry / 見た目: 円柱形。上下楕円＋中段曲線。viewBox 220×160。
Default width / height: 220×160 (viewBox [0, 0, 220, 160])
Port数: 4
Port位置: LEFT=[30, 80], RIGHT=[190, 80], TOP=[110, 20], BOTTOM=[110, 140]
IN / OUT方向: horizontal: LEFT=IN / RIGHT=OUT; vertical: TOP=IN / BOTTOM=OUT
Joint接続上の意味: Port座標とroleを#021が提示し、接続可否・線描画・再接続・配送状態は#002 Bone Jointが担当する。
固有Property: 固有追加Propertyなし。
共通Property: theme, uiNo, displayRate, appearance（#040 ColorPicker）, flowDirection, portLabelVisibility, displayTextStyle, tooltip, comment, hoverBorderEffect（#022）, animation（#117）。TYPE固有で無効になる項目はRuntime正規化/Validationに従う。
Property既定値: theme=dark; uiNo=UI-021-001; displayRate=100%; appearance.enabled=false/fill=#172538/stroke=#45BDF8/text=#F5F9FF; flowDirection=horizontal; port labels=true/true; main font=Meiryo, sans-serif 16px; tooltip=hidden 13px; comment disabled 13px; hover effect disabled; animation=none. No additional TYPE-only default beyond the Registry geometry/text and the common Shape defaults.
Enum全値: theme = dark / light / neon; flowDirection = horizontal / vertical; tooltip.mode = hover / select / always / hidden; hover effect = normal / neon / spin / cross / blink; hover direction = clockwise / counterclockwise; hover speed = slow / normal / fast; animation target = whole / visual / label; animation = none / move / bounce / pulse / spin / blink / slide / zoom / flow / shimmer / glow-sweep / breathing-glow; animation direction = forward / reverse; animation axis = horizontal / vertical; animation speed = slow / normal / fast. このTYPE固有の追加enumなし。
Boolean ON / OFF: appearance.enabled, portLabelVisibility.in/out, comment.enabled/line, hoverBorderEffect.enabled, animation.loop/respectReducedMotion/autoplay use true/false; false disables that feature while preserving the Shape itself.
数値範囲 / 単位 / default: displayRate: 25-200%, default 100%; displayTextStyle.fontSize: 8-72px, default 16px; tooltip/comment fontSize: 8-72px, default 13px; hover spinWidth: 1-12, default 2; spinGlow: 0-60, default 12; animation distance: 0-10000, default 24; loopWaitMs: 0-60000ms, default 300.
依存Component: #002 Bone Joint（接続/WAIT/FIFO/BLOCKED）、#022 Hover Border Effect（min v1.0.5 + attach/detach/getState/isAttached。v1.0.10可）、#117 Animation v1.0.9、#040 ColorPicker（Property色選択）。#020 LabelはUI/Class基準。
責務分離: DB全体を表すShape。
Securityとの関係: TYPEはRegistry存在確認、色・数値・enum等はRuntime正規化/Validationを通す。Shape自体は任意コードを実行しない。
WAIT / FIFO / BLOCKEDとの関係: このShapeは独自配送キューを持たない。WAIT/FIFO/BLOCKEDは#002 Bone Jointの接続・配送状態として扱い、Shape GeometryやTYPE意味と混同しない。
似たShapeとの違い: DATA_STOREは一般ストレージ、TABLEは表単位、DATABASEはDB全体。
使い分け: DATA_STOREは一般ストレージ、TABLEは表単位、DATABASEはDB全体。このTYPEの意味が必要な場合だけ選択する。
実際の使用場面: DB参照、更新、永続DB境界。
HTML Functional Class指定: 通常利用Classは bf-shape 1つ。data-shape-type="DATABASE" と本文labelのみHTMLから直接指定する。
コピー可能HTML: 直後の html ブロックをCopyボタンで使用できる: <div class="bf-shape" data-shape-type="DATABASE">データベース</div>
実Shape表示: 直後の shape-live ブロックをDOC専用rendererがShape Listと同じthumbnail値でBoneShape Runtimeへ渡して描画する。IN/OUT文字・Tooltip・Comment・Hover/Animationは図鑑では非表示。
Public API例 / 必要性: new BoneShape.Node(value) / createNode(value) / getOutput() を高度操作で使用。HTMLだけで足りる場合は直接呼ばない。

<div class="bf-shape" data-shape-type="DATABASE">データベース</div>

<div class="bf-shape" data-shape-type="DATABASE">データベース</div>

`DATA_STORE` — データストア

TYPE正式名: DATA_STORE
日本語名称: データストア
English名称: Data Store
Shape List上の分類: 固定Shape
Registry category: fixed
用途: データ格納領域を表す。
Shapeが表す意味: フロー途中のデータ保管領域を表す記号。
実Geometry / 見た目: 矩形＋右側内部縦線。viewBox 260×160。
Default width / height: 260×160 (viewBox [0, 0, 260, 160])
Port数: 4
Port位置: LEFT=[30, 80], RIGHT=[230, 80], TOP=[130, 30], BOTTOM=[130, 130]
IN / OUT方向: horizontal: LEFT=IN / RIGHT=OUT; vertical: TOP=IN / BOTTOM=OUT
Joint接続上の意味: Port座標とroleを#021が提示し、接続可否・線描画・再接続・配送状態は#002 Bone Jointが担当する。
固有Property: 固有追加Propertyなし。
共通Property: theme, uiNo, displayRate, appearance（#040 ColorPicker）, flowDirection, portLabelVisibility, displayTextStyle, tooltip, comment, hoverBorderEffect（#022）, animation（#117）。TYPE固有で無効になる項目はRuntime正規化/Validationに従う。
Property既定値: theme=dark; uiNo=UI-021-001; displayRate=100%; appearance.enabled=false/fill=#172538/stroke=#45BDF8/text=#F5F9FF; flowDirection=horizontal; port labels=true/true; main font=Meiryo, sans-serif 16px; tooltip=hidden 13px; comment disabled 13px; hover effect disabled; animation=none. No additional TYPE-only default beyond the Registry geometry/text and the common Shape defaults.
Enum全値: theme = dark / light / neon; flowDirection = horizontal / vertical; tooltip.mode = hover / select / always / hidden; hover effect = normal / neon / spin / cross / blink; hover direction = clockwise / counterclockwise; hover speed = slow / normal / fast; animation target = whole / visual / label; animation = none / move / bounce / pulse / spin / blink / slide / zoom / flow / shimmer / glow-sweep / breathing-glow; animation direction = forward / reverse; animation axis = horizontal / vertical; animation speed = slow / normal / fast. このTYPE固有の追加enumなし。
Boolean ON / OFF: appearance.enabled, portLabelVisibility.in/out, comment.enabled/line, hoverBorderEffect.enabled, animation.loop/respectReducedMotion/autoplay use true/false; false disables that feature while preserving the Shape itself.
数値範囲 / 単位 / default: displayRate: 25-200%, default 100%; displayTextStyle.fontSize: 8-72px, default 16px; tooltip/comment fontSize: 8-72px, default 13px; hover spinWidth: 1-12, default 2; spinGlow: 0-60, default 12; animation distance: 0-10000, default 24; loopWaitMs: 0-60000ms, default 300.
依存Component: #002 Bone Joint（接続/WAIT/FIFO/BLOCKED）、#022 Hover Border Effect（min v1.0.5 + attach/detach/getState/isAttached。v1.0.10可）、#117 Animation v1.0.9、#040 ColorPicker（Property色選択）。#020 LabelはUI/Class基準。
責務分離: 抽象データストア。
Securityとの関係: TYPEはRegistry存在確認、色・数値・enum等はRuntime正規化/Validationを通す。Shape自体は任意コードを実行しない。
WAIT / FIFO / BLOCKEDとの関係: このShapeは独自配送キューを持たない。WAIT/FIFO/BLOCKEDは#002 Bone Jointの接続・配送状態として扱い、Shape GeometryやTYPE意味と混同しない。
似たShapeとの違い: DATABASEはDB、FILEは単一ファイル。DATA_STOREは格納領域の抽象表現。
使い分け: DATABASEはDB、FILEは単一ファイル。DATA_STOREは格納領域の抽象表現。このTYPEの意味が必要な場合だけ選択する。
実際の使用場面: 永続/一時ストレージ、論理的な保管領域。
HTML Functional Class指定: 通常利用Classは bf-shape 1つ。data-shape-type="DATA_STORE" と本文labelのみHTMLから直接指定する。
コピー可能HTML: 直後の html ブロックをCopyボタンで使用できる: <div class="bf-shape" data-shape-type="DATA_STORE">データストア</div>
実Shape表示: 直後の shape-live ブロックをDOC専用rendererがShape Listと同じthumbnail値でBoneShape Runtimeへ渡して描画する。IN/OUT文字・Tooltip・Comment・Hover/Animationは図鑑では非表示。
Public API例 / 必要性: new BoneShape.Node(value) / createNode(value) / getOutput() を高度操作で使用。HTMLだけで足りる場合は直接呼ばない。

<div class="bf-shape" data-shape-type="DATA_STORE">データストア</div>

<div class="bf-shape" data-shape-type="DATA_STORE">データストア</div>

`MANUAL_INPUT` — 手動入力

TYPE正式名: MANUAL_INPUT
日本語名称: 手動入力
English名称: Manual Input
Shape List上の分類: 固定Shape
Registry category: fixed
用途: 人が値を入力する工程を表す。
Shapeが表す意味: 人が値・情報を入力する工程を表す。
実Geometry / 見た目: 上辺が斜めの手動入力Shape。viewBox 240×140。
Default width / height: 240×140 (viewBox [0, 0, 240, 140])
Port数: 4
Port位置: LEFT=[32.5, 70], RIGHT=[220, 70], TOP=[120, 20], BOTTOM=[120, 120]
IN / OUT方向: horizontal: LEFT=IN / RIGHT=OUT; vertical: TOP=IN / BOTTOM=OUT
Joint接続上の意味: Port座標とroleを#021が提示し、接続可否・線描画・再接続・配送状態は#002 Bone Jointが担当する。
固有Property: 固有追加Propertyなし。
共通Property: theme, uiNo, displayRate, appearance（#040 ColorPicker）, flowDirection, portLabelVisibility, displayTextStyle, tooltip, comment, hoverBorderEffect（#022）, animation（#117）。TYPE固有で無効になる項目はRuntime正規化/Validationに従う。
Property既定値: theme=dark; uiNo=UI-021-001; displayRate=100%; appearance.enabled=false/fill=#172538/stroke=#45BDF8/text=#F5F9FF; flowDirection=horizontal; port labels=true/true; main font=Meiryo, sans-serif 16px; tooltip=hidden 13px; comment disabled 13px; hover effect disabled; animation=none. No additional TYPE-only default beyond the Registry geometry/text and the common Shape defaults.
Enum全値: theme = dark / light / neon; flowDirection = horizontal / vertical; tooltip.mode = hover / select / always / hidden; hover effect = normal / neon / spin / cross / blink; hover direction = clockwise / counterclockwise; hover speed = slow / normal / fast; animation target = whole / visual / label; animation = none / move / bounce / pulse / spin / blink / slide / zoom / flow / shimmer / glow-sweep / breathing-glow; animation direction = forward / reverse; animation axis = horizontal / vertical; animation speed = slow / normal / fast. このTYPE固有の追加enumなし。
Boolean ON / OFF: appearance.enabled, portLabelVisibility.in/out, comment.enabled/line, hoverBorderEffect.enabled, animation.loop/respectReducedMotion/autoplay use true/false; false disables that feature while preserving the Shape itself.
数値範囲 / 単位 / default: displayRate: 25-200%, default 100%; displayTextStyle.fontSize: 8-72px, default 16px; tooltip/comment fontSize: 8-72px, default 13px; hover spinWidth: 1-12, default 2; spinGlow: 0-60, default 12; animation distance: 0-10000, default 24; loopWaitMs: 0-60000ms, default 300.
依存Component: #002 Bone Joint（接続/WAIT/FIFO/BLOCKED）、#022 Hover Border Effect（min v1.0.5 + attach/detach/getState/isAttached。v1.0.10可）、#117 Animation v1.0.9、#040 ColorPicker（Property色選択）。#020 LabelはUI/Class基準。
責務分離: 手動入力工程。
Securityとの関係: TYPEはRegistry存在確認、色・数値・enum等はRuntime正規化/Validationを通す。Shape自体は任意コードを実行しない。
WAIT / FIFO / BLOCKEDとの関係: このShapeは独自配送キューを持たない。WAIT/FIFO/BLOCKEDは#002 Bone Jointの接続・配送状態として扱い、Shape GeometryやTYPE意味と混同しない。
似たShapeとの違い: INPUT_OUTPUTは一般入出力、MANUAL_INPUTは人の入力を明示。
使い分け: INPUT_OUTPUTは一般入出力、MANUAL_INPUTは人の入力を明示。このTYPEの意味が必要な場合だけ選択する。
実際の使用場面: キーボード入力、フォーム入力、手入力。
HTML Functional Class指定: 通常利用Classは bf-shape 1つ。data-shape-type="MANUAL_INPUT" と本文labelのみHTMLから直接指定する。
コピー可能HTML: 直後の html ブロックをCopyボタンで使用できる: <div class="bf-shape" data-shape-type="MANUAL_INPUT">手動入力</div>
実Shape表示: 直後の shape-live ブロックをDOC専用rendererがShape Listと同じthumbnail値でBoneShape Runtimeへ渡して描画する。IN/OUT文字・Tooltip・Comment・Hover/Animationは図鑑では非表示。
Public API例 / 必要性: new BoneShape.Node(value) / createNode(value) / getOutput() を高度操作で使用。HTMLだけで足りる場合は直接呼ばない。

<div class="bf-shape" data-shape-type="MANUAL_INPUT">手動入力</div>

<div class="bf-shape" data-shape-type="MANUAL_INPUT">手動入力</div>

`MANUAL_OPERATION` — 手動処理

TYPE正式名: MANUAL_OPERATION
日本語名称: 手動処理
English名称: Manual Operation
Shape List上の分類: 固定Shape
Registry category: fixed
用途: 人手による作業・処理を表す。
Shapeが表す意味: 人が手作業で処理する工程を表す。
実Geometry / 見た目: 下側が絞られた台形。viewBox 240×140。
Default width / height: 240×140 (viewBox [0, 0, 240, 140])
Port数: 4
Port位置: LEFT=[32.5, 70], RIGHT=[207.5, 70], TOP=[120, 20], BOTTOM=[120, 120]
IN / OUT方向: horizontal: LEFT=IN / RIGHT=OUT; vertical: TOP=IN / BOTTOM=OUT
Joint接続上の意味: Port座標とroleを#021が提示し、接続可否・線描画・再接続・配送状態は#002 Bone Jointが担当する。
固有Property: 固有追加Propertyなし。
共通Property: theme, uiNo, displayRate, appearance（#040 ColorPicker）, flowDirection, portLabelVisibility, displayTextStyle, tooltip, comment, hoverBorderEffect（#022）, animation（#117）。TYPE固有で無効になる項目はRuntime正規化/Validationに従う。
Property既定値: theme=dark; uiNo=UI-021-001; displayRate=100%; appearance.enabled=false/fill=#172538/stroke=#45BDF8/text=#F5F9FF; flowDirection=horizontal; port labels=true/true; main font=Meiryo, sans-serif 16px; tooltip=hidden 13px; comment disabled 13px; hover effect disabled; animation=none. No additional TYPE-only default beyond the Registry geometry/text and the common Shape defaults.
Enum全値: theme = dark / light / neon; flowDirection = horizontal / vertical; tooltip.mode = hover / select / always / hidden; hover effect = normal / neon / spin / cross / blink; hover direction = clockwise / counterclockwise; hover speed = slow / normal / fast; animation target = whole / visual / label; animation = none / move / bounce / pulse / spin / blink / slide / zoom / flow / shimmer / glow-sweep / breathing-glow; animation direction = forward / reverse; animation axis = horizontal / vertical; animation speed = slow / normal / fast. このTYPE固有の追加enumなし。
Boolean ON / OFF: appearance.enabled, portLabelVisibility.in/out, comment.enabled/line, hoverBorderEffect.enabled, animation.loop/respectReducedMotion/autoplay use true/false; false disables that feature while preserving the Shape itself.
数値範囲 / 単位 / default: displayRate: 25-200%, default 100%; displayTextStyle.fontSize: 8-72px, default 16px; tooltip/comment fontSize: 8-72px, default 13px; hover spinWidth: 1-12, default 2; spinGlow: 0-60, default 12; animation distance: 0-10000, default 24; loopWaitMs: 0-60000ms, default 300.
依存Component: #002 Bone Joint（接続/WAIT/FIFO/BLOCKED）、#022 Hover Border Effect（min v1.0.5 + attach/detach/getState/isAttached。v1.0.10可）、#117 Animation v1.0.9、#040 ColorPicker（Property色選択）。#020 LabelはUI/Class基準。
責務分離: 手動作業工程。
Securityとの関係: TYPEはRegistry存在確認、色・数値・enum等はRuntime正規化/Validationを通す。Shape自体は任意コードを実行しない。
WAIT / FIFO / BLOCKEDとの関係: このShapeは独自配送キューを持たない。WAIT/FIFO/BLOCKEDは#002 Bone Jointの接続・配送状態として扱い、Shape GeometryやTYPE意味と混同しない。
似たShapeとの違い: MANUAL_INPUTは入力、MANUAL_OPERATIONは人手処理全般。
使い分け: MANUAL_INPUTは入力、MANUAL_OPERATIONは人手処理全般。このTYPEの意味が必要な場合だけ選択する。
実際の使用場面: 確認、押印、物理作業、手作業工程。
HTML Functional Class指定: 通常利用Classは bf-shape 1つ。data-shape-type="MANUAL_OPERATION" と本文labelのみHTMLから直接指定する。
コピー可能HTML: 直後の html ブロックをCopyボタンで使用できる: <div class="bf-shape" data-shape-type="MANUAL_OPERATION">手動処理</div>
実Shape表示: 直後の shape-live ブロックをDOC専用rendererがShape Listと同じthumbnail値でBoneShape Runtimeへ渡して描画する。IN/OUT文字・Tooltip・Comment・Hover/Animationは図鑑では非表示。
Public API例 / 必要性: new BoneShape.Node(value) / createNode(value) / getOutput() を高度操作で使用。HTMLだけで足りる場合は直接呼ばない。

<div class="bf-shape" data-shape-type="MANUAL_OPERATION">手動処理</div>

<div class="bf-shape" data-shape-type="MANUAL_OPERATION">手動処理</div>

`PREPARATION` — 準備

TYPE正式名: PREPARATION
日本語名称: 準備
English名称: Preparation
Shape List上の分類: 固定Shape
Registry category: fixed
用途: 準備・初期化・前処理を表す。
Shapeが表す意味: 本処理前の準備・初期化・前処理を表す。
実Geometry / 見た目: 左右が尖った六角形。viewBox 240×140。
Default width / height: 240×140 (viewBox [0, 0, 240, 140])
Port数: 4
Port位置: LEFT=[20, 70], RIGHT=[220, 70], TOP=[120, 20], BOTTOM=[120, 120]
IN / OUT方向: horizontal: LEFT=IN / RIGHT=OUT; vertical: TOP=IN / BOTTOM=OUT
Joint接続上の意味: Port座標とroleを#021が提示し、接続可否・線描画・再接続・配送状態は#002 Bone Jointが担当する。
固有Property: 固有追加Propertyなし。
共通Property: theme, uiNo, displayRate, appearance（#040 ColorPicker）, flowDirection, portLabelVisibility, displayTextStyle, tooltip, comment, hoverBorderEffect（#022）, animation（#117）。TYPE固有で無効になる項目はRuntime正規化/Validationに従う。
Property既定値: theme=dark; uiNo=UI-021-001; displayRate=100%; appearance.enabled=false/fill=#172538/stroke=#45BDF8/text=#F5F9FF; flowDirection=horizontal; port labels=true/true; main font=Meiryo, sans-serif 16px; tooltip=hidden 13px; comment disabled 13px; hover effect disabled; animation=none. No additional TYPE-only default beyond the Registry geometry/text and the common Shape defaults.
Enum全値: theme = dark / light / neon; flowDirection = horizontal / vertical; tooltip.mode = hover / select / always / hidden; hover effect = normal / neon / spin / cross / blink; hover direction = clockwise / counterclockwise; hover speed = slow / normal / fast; animation target = whole / visual / label; animation = none / move / bounce / pulse / spin / blink / slide / zoom / flow / shimmer / glow-sweep / breathing-glow; animation direction = forward / reverse; animation axis = horizontal / vertical; animation speed = slow / normal / fast. このTYPE固有の追加enumなし。
Boolean ON / OFF: appearance.enabled, portLabelVisibility.in/out, comment.enabled/line, hoverBorderEffect.enabled, animation.loop/respectReducedMotion/autoplay use true/false; false disables that feature while preserving the Shape itself.
数値範囲 / 単位 / default: displayRate: 25-200%, default 100%; displayTextStyle.fontSize: 8-72px, default 16px; tooltip/comment fontSize: 8-72px, default 13px; hover spinWidth: 1-12, default 2; spinGlow: 0-60, default 12; animation distance: 0-10000, default 24; loopWaitMs: 0-60000ms, default 300.
依存Component: #002 Bone Joint（接続/WAIT/FIFO/BLOCKED）、#022 Hover Border Effect（min v1.0.5 + attach/detach/getState/isAttached。v1.0.10可）、#117 Animation v1.0.9、#040 ColorPicker（Property色選択）。#020 LabelはUI/Class基準。
責務分離: 準備工程Shape。
Securityとの関係: TYPEはRegistry存在確認、色・数値・enum等はRuntime正規化/Validationを通す。Shape自体は任意コードを実行しない。
WAIT / FIFO / BLOCKEDとの関係: このShapeは独自配送キューを持たない。WAIT/FIFO/BLOCKEDは#002 Bone Jointの接続・配送状態として扱い、Shape GeometryやTYPE意味と混同しない。
似たShapeとの違い: APIも六角系だがAPIは外部API境界。PREPARATIONは準備工程。
使い分け: APIも六角系だがAPIは外部API境界。PREPARATIONは準備工程。このTYPEの意味が必要な場合だけ選択する。
実際の使用場面: 初期化、準備、前提条件設定。
HTML Functional Class指定: 通常利用Classは bf-shape 1つ。data-shape-type="PREPARATION" と本文labelのみHTMLから直接指定する。
コピー可能HTML: 直後の html ブロックをCopyボタンで使用できる: <div class="bf-shape" data-shape-type="PREPARATION">準備</div>
実Shape表示: 直後の shape-live ブロックをDOC専用rendererがShape Listと同じthumbnail値でBoneShape Runtimeへ渡して描画する。IN/OUT文字・Tooltip・Comment・Hover/Animationは図鑑では非表示。
Public API例 / 必要性: new BoneShape.Node(value) / createNode(value) / getOutput() を高度操作で使用。HTMLだけで足りる場合は直接呼ばない。

<div class="bf-shape" data-shape-type="PREPARATION">準備</div>

<div class="bf-shape" data-shape-type="PREPARATION">準備</div>

`DELAY` — 遅延

TYPE正式名: DELAY
日本語名称: 遅延
English名称: Delay
Shape List上の分類: 固定Shape
Registry category: fixed
用途: 待機・遅延工程を表す。
Shapeが表す意味: 処理を一定条件または時間待たせる工程を表す。
実Geometry / 見た目: 右側が半円状のDelay形状。viewBox 230×140。
Default width / height: 230×140 (viewBox [0, 0, 230, 140])
Port数: 4
Port位置: LEFT=[20, 70], RIGHT=[210, 70], TOP=[115, 20], BOTTOM=[115, 120]
IN / OUT方向: horizontal: LEFT=IN / RIGHT=OUT; vertical: TOP=IN / BOTTOM=OUT
Joint接続上の意味: Port座標とroleを#021が提示し、接続可否・線描画・再接続・配送状態は#002 Bone Jointが担当する。
固有Property: 固有追加Propertyなし。
共通Property: theme, uiNo, displayRate, appearance（#040 ColorPicker）, flowDirection, portLabelVisibility, displayTextStyle, tooltip, comment, hoverBorderEffect（#022）, animation（#117）。TYPE固有で無効になる項目はRuntime正規化/Validationに従う。
Property既定値: theme=dark; uiNo=UI-021-001; displayRate=100%; appearance.enabled=false/fill=#172538/stroke=#45BDF8/text=#F5F9FF; flowDirection=horizontal; port labels=true/true; main font=Meiryo, sans-serif 16px; tooltip=hidden 13px; comment disabled 13px; hover effect disabled; animation=none. No additional TYPE-only default beyond the Registry geometry/text and the common Shape defaults.
Enum全値: theme = dark / light / neon; flowDirection = horizontal / vertical; tooltip.mode = hover / select / always / hidden; hover effect = normal / neon / spin / cross / blink; hover direction = clockwise / counterclockwise; hover speed = slow / normal / fast; animation target = whole / visual / label; animation = none / move / bounce / pulse / spin / blink / slide / zoom / flow / shimmer / glow-sweep / breathing-glow; animation direction = forward / reverse; animation axis = horizontal / vertical; animation speed = slow / normal / fast. このTYPE固有の追加enumなし。
Boolean ON / OFF: appearance.enabled, portLabelVisibility.in/out, comment.enabled/line, hoverBorderEffect.enabled, animation.loop/respectReducedMotion/autoplay use true/false; false disables that feature while preserving the Shape itself.
数値範囲 / 単位 / default: displayRate: 25-200%, default 100%; displayTextStyle.fontSize: 8-72px, default 16px; tooltip/comment fontSize: 8-72px, default 13px; hover spinWidth: 1-12, default 2; spinGlow: 0-60, default 12; animation distance: 0-10000, default 24; loopWaitMs: 0-60000ms, default 300.
依存Component: #002 Bone Joint（接続/WAIT/FIFO/BLOCKED）、#022 Hover Border Effect（min v1.0.5 + attach/detach/getState/isAttached。v1.0.10可）、#117 Animation v1.0.9、#040 ColorPicker（Property色選択）。#020 LabelはUI/Class基準。
責務分離: 遅延工程。WAIT/FIFO機構そのものではない。
Securityとの関係: TYPEはRegistry存在確認、色・数値・enum等はRuntime正規化/Validationを通す。Shape自体は任意コードを実行しない。
WAIT / FIFO / BLOCKEDとの関係: このShapeは独自配送キューを持たない。WAIT/FIFO/BLOCKEDは#002 Bone Jointの接続・配送状態として扱い、Shape GeometryやTYPE意味と混同しない。
似たShapeとの違い: TIME JOBのWAIT状態とは別。DELAYはフロー上の工程Shape。
使い分け: TIME JOBのWAIT状態とは別。DELAYはフロー上の工程Shape。このTYPEの意味が必要な場合だけ選択する。
実際の使用場面: 待機時間、保留、遅延工程を図示。
HTML Functional Class指定: 通常利用Classは bf-shape 1つ。data-shape-type="DELAY" と本文labelのみHTMLから直接指定する。
コピー可能HTML: 直後の html ブロックをCopyボタンで使用できる: <div class="bf-shape" data-shape-type="DELAY">遅延</div>
実Shape表示: 直後の shape-live ブロックをDOC専用rendererがShape Listと同じthumbnail値でBoneShape Runtimeへ渡して描画する。IN/OUT文字・Tooltip・Comment・Hover/Animationは図鑑では非表示。
Public API例 / 必要性: new BoneShape.Node(value) / createNode(value) / getOutput() を高度操作で使用。HTMLだけで足りる場合は直接呼ばない。

<div class="bf-shape" data-shape-type="DELAY">遅延</div>

<div class="bf-shape" data-shape-type="DELAY">遅延</div>

`CONNECTOR` — 接続

TYPE正式名: CONNECTOR
日本語名称: 接続
English名称: Connector
Shape List上の分類: 固定Shape
Registry category: fixed
用途: 同一ページ内の接続補助点を表す。
Shapeが表す意味: 同一ページ内の離れたフローを論理的につなぐ接続点。
実Geometry / 見た目: 円形。直径100相当、viewBox 140×140。
Default width / height: 140×140 (viewBox [0, 0, 140, 140])
Port数: 4
Port位置: LEFT=[20, 70], RIGHT=[120, 70], TOP=[70, 20], BOTTOM=[70, 120]
IN / OUT方向: horizontal: LEFT=IN / RIGHT=OUT; vertical: TOP=IN / BOTTOM=OUT
Joint接続上の意味: Port座標とroleを#021が提示し、接続可否・線描画・再接続・配送状態は#002 Bone Jointが担当する。
固有Property: 固有追加Propertyなし。
共通Property: theme, uiNo, displayRate, appearance（#040 ColorPicker）, flowDirection, portLabelVisibility, displayTextStyle, tooltip, comment, hoverBorderEffect（#022）, animation（#117）。TYPE固有で無効になる項目はRuntime正規化/Validationに従う。
Property既定値: theme=dark; uiNo=UI-021-001; displayRate=100%; appearance.enabled=false/fill=#172538/stroke=#45BDF8/text=#F5F9FF; flowDirection=horizontal; port labels=true/true; main font=Meiryo, sans-serif 16px; tooltip=hidden 13px; comment disabled 13px; hover effect disabled; animation=none. No additional TYPE-only default beyond the Registry geometry/text and the common Shape defaults.
Enum全値: theme = dark / light / neon; flowDirection = horizontal / vertical; tooltip.mode = hover / select / always / hidden; hover effect = normal / neon / spin / cross / blink; hover direction = clockwise / counterclockwise; hover speed = slow / normal / fast; animation target = whole / visual / label; animation = none / move / bounce / pulse / spin / blink / slide / zoom / flow / shimmer / glow-sweep / breathing-glow; animation direction = forward / reverse; animation axis = horizontal / vertical; animation speed = slow / normal / fast. このTYPE固有の追加enumなし。
Boolean ON / OFF: appearance.enabled, portLabelVisibility.in/out, comment.enabled/line, hoverBorderEffect.enabled, animation.loop/respectReducedMotion/autoplay use true/false; false disables that feature while preserving the Shape itself.
数値範囲 / 単位 / default: displayRate: 25-200%, default 100%; displayTextStyle.fontSize: 8-72px, default 16px; tooltip/comment fontSize: 8-72px, default 13px; hover spinWidth: 1-12, default 2; spinGlow: 0-60, default 12; animation distance: 0-10000, default 24; loopWaitMs: 0-60000ms, default 300.
依存Component: #002 Bone Joint（接続/WAIT/FIFO/BLOCKED）、#022 Hover Border Effect（min v1.0.5 + attach/detach/getState/isAttached。v1.0.10可）、#117 Animation v1.0.9、#040 ColorPicker（Property色選択）。#020 LabelはUI/Class基準。
責務分離: 接続補助Shape。実接続線は#002 Bone Joint。
Securityとの関係: TYPEはRegistry存在確認、色・数値・enum等はRuntime正規化/Validationを通す。Shape自体は任意コードを実行しない。
WAIT / FIFO / BLOCKEDとの関係: このShapeは独自配送キューを持たない。WAIT/FIFO/BLOCKEDは#002 Bone Jointの接続・配送状態として扱い、Shape GeometryやTYPE意味と混同しない。
似たShapeとの違い: OFFPAGE_CONNECTORは別ページ/別図への接続。
使い分け: OFFPAGE_CONNECTORは別ページ/別図への接続。このTYPEの意味が必要な場合だけ選択する。
実際の使用場面: 長い接続線を整理する中継点。
HTML Functional Class指定: 通常利用Classは bf-shape 1つ。data-shape-type="CONNECTOR" と本文labelのみHTMLから直接指定する。
コピー可能HTML: 直後の html ブロックをCopyボタンで使用できる: <div class="bf-shape" data-shape-type="CONNECTOR">接続</div>
実Shape表示: 直後の shape-live ブロックをDOC専用rendererがShape Listと同じthumbnail値でBoneShape Runtimeへ渡して描画する。IN/OUT文字・Tooltip・Comment・Hover/Animationは図鑑では非表示。
Public API例 / 必要性: new BoneShape.Node(value) / createNode(value) / getOutput() を高度操作で使用。HTMLだけで足りる場合は直接呼ばない。

<div class="bf-shape" data-shape-type="CONNECTOR">接続</div>

<div class="bf-shape" data-shape-type="CONNECTOR">接続</div>

`OFFPAGE_CONNECTOR` — ページ外

TYPE正式名: OFFPAGE_CONNECTOR
日本語名称: ページ外
English名称: Offpage Connector
Shape List上の分類: 固定Shape
Registry category: fixed
用途: 別ページ・別図へ続く接続点を表す。
Shapeが表す意味: 別ページ・別領域へフローが継続することを示す。
実Geometry / 見た目: 下向き五角形状。viewBox 180×160。
Default width / height: 180×160 (viewBox [0, 0, 180, 160])
Port数: 4
Port位置: LEFT=[20, 75], RIGHT=[160, 75], TOP=[90, 20], BOTTOM=[90, 140]
IN / OUT方向: horizontal: LEFT=IN / RIGHT=OUT; vertical: TOP=IN / BOTTOM=OUT
Joint接続上の意味: Port座標とroleを#021が提示し、接続可否・線描画・再接続・配送状態は#002 Bone Jointが担当する。
固有Property: 固有追加Propertyなし。
共通Property: theme, uiNo, displayRate, appearance（#040 ColorPicker）, flowDirection, portLabelVisibility, displayTextStyle, tooltip, comment, hoverBorderEffect（#022）, animation（#117）。TYPE固有で無効になる項目はRuntime正規化/Validationに従う。
Property既定値: theme=dark; uiNo=UI-021-001; displayRate=100%; appearance.enabled=false/fill=#172538/stroke=#45BDF8/text=#F5F9FF; flowDirection=horizontal; port labels=true/true; main font=Meiryo, sans-serif 16px; tooltip=hidden 13px; comment disabled 13px; hover effect disabled; animation=none. No additional TYPE-only default beyond the Registry geometry/text and the common Shape defaults.
Enum全値: theme = dark / light / neon; flowDirection = horizontal / vertical; tooltip.mode = hover / select / always / hidden; hover effect = normal / neon / spin / cross / blink; hover direction = clockwise / counterclockwise; hover speed = slow / normal / fast; animation target = whole / visual / label; animation = none / move / bounce / pulse / spin / blink / slide / zoom / flow / shimmer / glow-sweep / breathing-glow; animation direction = forward / reverse; animation axis = horizontal / vertical; animation speed = slow / normal / fast. このTYPE固有の追加enumなし。
Boolean ON / OFF: appearance.enabled, portLabelVisibility.in/out, comment.enabled/line, hoverBorderEffect.enabled, animation.loop/respectReducedMotion/autoplay use true/false; false disables that feature while preserving the Shape itself.
数値範囲 / 単位 / default: displayRate: 25-200%, default 100%; displayTextStyle.fontSize: 8-72px, default 16px; tooltip/comment fontSize: 8-72px, default 13px; hover spinWidth: 1-12, default 2; spinGlow: 0-60, default 12; animation distance: 0-10000, default 24; loopWaitMs: 0-60000ms, default 300.
依存Component: #002 Bone Joint（接続/WAIT/FIFO/BLOCKED）、#022 Hover Border Effect（min v1.0.5 + attach/detach/getState/isAttached。v1.0.10可）、#117 Animation v1.0.9、#040 ColorPicker（Property色選択）。#020 LabelはUI/Class基準。
責務分離: ページ外接続補助Shape。
Securityとの関係: TYPEはRegistry存在確認、色・数値・enum等はRuntime正規化/Validationを通す。Shape自体は任意コードを実行しない。
WAIT / FIFO / BLOCKEDとの関係: このShapeは独自配送キューを持たない。WAIT/FIFO/BLOCKEDは#002 Bone Jointの接続・配送状態として扱い、Shape GeometryやTYPE意味と混同しない。
似たShapeとの違い: CONNECTORは同一ページ内、OFFPAGE_CONNECTORはページ外。
使い分け: CONNECTORは同一ページ内、OFFPAGE_CONNECTORはページ外。このTYPEの意味が必要な場合だけ選択する。
実際の使用場面: ページ外、別シート、別フローへの継続。
HTML Functional Class指定: 通常利用Classは bf-shape 1つ。data-shape-type="OFFPAGE_CONNECTOR" と本文labelのみHTMLから直接指定する。
コピー可能HTML: 直後の html ブロックをCopyボタンで使用できる: <div class="bf-shape" data-shape-type="OFFPAGE_CONNECTOR">ページ外</div>
実Shape表示: 直後の shape-live ブロックをDOC専用rendererがShape Listと同じthumbnail値でBoneShape Runtimeへ渡して描画する。IN/OUT文字・Tooltip・Comment・Hover/Animationは図鑑では非表示。
Public API例 / 必要性: new BoneShape.Node(value) / createNode(value) / getOutput() を高度操作で使用。HTMLだけで足りる場合は直接呼ばない。

<div class="bf-shape" data-shape-type="OFFPAGE_CONNECTOR">ページ外</div>

<div class="bf-shape" data-shape-type="OFFPAGE_CONNECTOR">ページ外</div>

`TABLE` — テーブル

TYPE正式名: TABLE
日本語名称: テーブル
English名称: Table
Shape List上の分類: 固定Shape
Registry category: fixed
用途: データベースのテーブルを表す。
Shapeが表す意味: 表形式データまたはテーブルを簡略表現する。
実Geometry / 見た目: 矩形内部に行列グリッド。viewBox 240×160。
Default width / height: 240×160 (viewBox [0, 0, 240, 160])
Port数: 4
Port位置: LEFT=[20, 80], RIGHT=[220, 80], TOP=[120, 20], BOTTOM=[120, 140]
IN / OUT方向: horizontal: LEFT=IN / RIGHT=OUT; vertical: TOP=IN / BOTTOM=OUT
Joint接続上の意味: Port座標とroleを#021が提示し、接続可否・線描画・再接続・配送状態は#002 Bone Jointが担当する。
固有Property: logicalName / tableNameは関連情報として利用可能。フィールド単位接続が必要ならTABLE_DETAIL。
共通Property: theme, uiNo, displayRate, appearance（#040 ColorPicker）, flowDirection, portLabelVisibility, displayTextStyle, tooltip, comment, hoverBorderEffect（#022）, animation（#117）。TYPE固有で無効になる項目はRuntime正規化/Validationに従う。
Property既定値: theme=dark; uiNo=UI-021-001; displayRate=100%; appearance.enabled=false/fill=#172538/stroke=#45BDF8/text=#F5F9FF; flowDirection=horizontal; port labels=true/true; main font=Meiryo, sans-serif 16px; tooltip=hidden 13px; comment disabled 13px; hover effect disabled; animation=none. No additional TYPE-only default beyond the Registry geometry/text and the common Shape defaults.
Enum全値: theme = dark / light / neon; flowDirection = horizontal / vertical; tooltip.mode = hover / select / always / hidden; hover effect = normal / neon / spin / cross / blink; hover direction = clockwise / counterclockwise; hover speed = slow / normal / fast; animation target = whole / visual / label; animation = none / move / bounce / pulse / spin / blink / slide / zoom / flow / shimmer / glow-sweep / breathing-glow; animation direction = forward / reverse; animation axis = horizontal / vertical; animation speed = slow / normal / fast. このTYPE固有の追加enumなし。
Boolean ON / OFF: appearance.enabled, portLabelVisibility.in/out, comment.enabled/line, hoverBorderEffect.enabled, animation.loop/respectReducedMotion/autoplay use true/false; false disables that feature while preserving the Shape itself.
数値範囲 / 単位 / default: displayRate: 25-200%, default 100%; displayTextStyle.fontSize: 8-72px, default 16px; tooltip/comment fontSize: 8-72px, default 13px; hover spinWidth: 1-12, default 2; spinGlow: 0-60, default 12; animation distance: 0-10000, default 24; loopWaitMs: 0-60000ms, default 300.
依存Component: #002 Bone Joint（接続/WAIT/FIFO/BLOCKED）、#022 Hover Border Effect（min v1.0.5 + attach/detach/getState/isAttached。v1.0.10可）、#117 Animation v1.0.9、#040 ColorPicker（Property色選択）。#020 LabelはUI/Class基準。
責務分離: DBテーブル表現。
Securityとの関係: TYPEはRegistry存在確認、色・数値・enum等はRuntime正規化/Validationを通す。Shape自体は任意コードを実行しない。
WAIT / FIFO / BLOCKEDとの関係: このShapeは独自配送キューを持たない。WAIT/FIFO/BLOCKEDは#002 Bone Jointの接続・配送状態として扱い、Shape GeometryやTYPE意味と混同しない。
似たShapeとの違い: TABLE_DETAILはフィールド行と各Field Portまで持つ。TABLEは簡易表現。
使い分け: TABLE_DETAILはフィールド行と各Field Portまで持つ。TABLEは簡易表現。このTYPEの意味が必要な場合だけ選択する。
実際の使用場面: テーブル単位の関係や処理を表す。
HTML Functional Class指定: 通常利用Classは bf-shape 1つ。data-shape-type="TABLE" と本文labelのみHTMLから直接指定する。
コピー可能HTML: 直後の html ブロックをCopyボタンで使用できる: <div class="bf-shape" data-shape-type="TABLE">テーブル</div>
実Shape表示: 直後の shape-live ブロックをDOC専用rendererがShape Listと同じthumbnail値でBoneShape Runtimeへ渡して描画する。IN/OUT文字・Tooltip・Comment・Hover/Animationは図鑑では非表示。
Public API例 / 必要性: new BoneShape.Node(value) / createNode(value) / getOutput() を高度操作で使用。HTMLだけで足りる場合は直接呼ばない。

<div class="bf-shape" data-shape-type="TABLE">テーブル</div>

<div class="bf-shape" data-shape-type="TABLE">テーブル</div>

`VIEW` — ビュー

TYPE正式名: VIEW
日本語名称: ビュー
English名称: View
Shape List上の分類: 固定Shape
Registry category: fixed
用途: DB Viewや論理ビューを表す。
Shapeが表す意味: 参照用ビュー・表示用データ集合を表す。
実Geometry / 見た目: 角丸矩形＋上部区切り線。viewBox 240×140。
Default width / height: 240×140 (viewBox [0, 0, 240, 140])
Port数: 4
Port位置: LEFT=[20, 70], RIGHT=[220, 70], TOP=[120, 20], BOTTOM=[120, 120]
IN / OUT方向: horizontal: LEFT=IN / RIGHT=OUT; vertical: TOP=IN / BOTTOM=OUT
Joint接続上の意味: Port座標とroleを#021が提示し、接続可否・線描画・再接続・配送状態は#002 Bone Jointが担当する。
固有Property: 固有追加Propertyなし。
共通Property: theme, uiNo, displayRate, appearance（#040 ColorPicker）, flowDirection, portLabelVisibility, displayTextStyle, tooltip, comment, hoverBorderEffect（#022）, animation（#117）。TYPE固有で無効になる項目はRuntime正規化/Validationに従う。
Property既定値: theme=dark; uiNo=UI-021-001; displayRate=100%; appearance.enabled=false/fill=#172538/stroke=#45BDF8/text=#F5F9FF; flowDirection=horizontal; port labels=true/true; main font=Meiryo, sans-serif 16px; tooltip=hidden 13px; comment disabled 13px; hover effect disabled; animation=none. No additional TYPE-only default beyond the Registry geometry/text and the common Shape defaults.
Enum全値: theme = dark / light / neon; flowDirection = horizontal / vertical; tooltip.mode = hover / select / always / hidden; hover effect = normal / neon / spin / cross / blink; hover direction = clockwise / counterclockwise; hover speed = slow / normal / fast; animation target = whole / visual / label; animation = none / move / bounce / pulse / spin / blink / slide / zoom / flow / shimmer / glow-sweep / breathing-glow; animation direction = forward / reverse; animation axis = horizontal / vertical; animation speed = slow / normal / fast. このTYPE固有の追加enumなし。
Boolean ON / OFF: appearance.enabled, portLabelVisibility.in/out, comment.enabled/line, hoverBorderEffect.enabled, animation.loop/respectReducedMotion/autoplay use true/false; false disables that feature while preserving the Shape itself.
数値範囲 / 単位 / default: displayRate: 25-200%, default 100%; displayTextStyle.fontSize: 8-72px, default 16px; tooltip/comment fontSize: 8-72px, default 13px; hover spinWidth: 1-12, default 2; spinGlow: 0-60, default 12; animation distance: 0-10000, default 24; loopWaitMs: 0-60000ms, default 300.
依存Component: #002 Bone Joint（接続/WAIT/FIFO/BLOCKED）、#022 Hover Border Effect（min v1.0.5 + attach/detach/getState/isAttached。v1.0.10可）、#117 Animation v1.0.9、#040 ColorPicker（Property色選択）。#020 LabelはUI/Class基準。
責務分離: DB View表現。
Securityとの関係: TYPEはRegistry存在確認、色・数値・enum等はRuntime正規化/Validationを通す。Shape自体は任意コードを実行しない。
WAIT / FIFO / BLOCKEDとの関係: このShapeは独自配送キューを持たない。WAIT/FIFO/BLOCKEDは#002 Bone Jointの接続・配送状態として扱い、Shape GeometryやTYPE意味と混同しない。
似たShapeとの違い: TABLEは実テーブル、VIEWは論理ビュー。
使い分け: TABLEは実テーブル、VIEWは論理ビュー。このTYPEの意味が必要な場合だけ選択する。
実際の使用場面: DB View、論理参照、投影結果。
HTML Functional Class指定: 通常利用Classは bf-shape 1つ。data-shape-type="VIEW" と本文labelのみHTMLから直接指定する。
コピー可能HTML: 直後の html ブロックをCopyボタンで使用できる: <div class="bf-shape" data-shape-type="VIEW">ビュー</div>
実Shape表示: 直後の shape-live ブロックをDOC専用rendererがShape Listと同じthumbnail値でBoneShape Runtimeへ渡して描画する。IN/OUT文字・Tooltip・Comment・Hover/Animationは図鑑では非表示。
Public API例 / 必要性: new BoneShape.Node(value) / createNode(value) / getOutput() を高度操作で使用。HTMLだけで足りる場合は直接呼ばない。

<div class="bf-shape" data-shape-type="VIEW">ビュー</div>

<div class="bf-shape" data-shape-type="VIEW">ビュー</div>

`API` — API

TYPE正式名: API
日本語名称: API
English名称: Api
Shape List上の分類: 固定Shape
Registry category: fixed
用途: API・サービス境界を表す。
Shapeが表す意味: 外部または内部API境界を表す記号で、API実行器そのものではない。
実Geometry / 見た目: 横長六角形。viewBox 240×140。
Default width / height: 240×140 (viewBox [0, 0, 240, 140])
Port数: 4
Port位置: LEFT=[20, 70], RIGHT=[220, 70], TOP=[120, 20], BOTTOM=[120, 120]
IN / OUT方向: horizontal: LEFT=IN / RIGHT=OUT; vertical: TOP=IN / BOTTOM=OUT
Joint接続上の意味: Port座標とroleを#021が提示し、接続可否・線描画・再接続・配送状態は#002 Bone Jointが担当する。
固有Property: 固有追加Propertyなし。
共通Property: theme, uiNo, displayRate, appearance（#040 ColorPicker）, flowDirection, portLabelVisibility, displayTextStyle, tooltip, comment, hoverBorderEffect（#022）, animation（#117）。TYPE固有で無効になる項目はRuntime正規化/Validationに従う。
Property既定値: theme=dark; uiNo=UI-021-001; displayRate=100%; appearance.enabled=false/fill=#172538/stroke=#45BDF8/text=#F5F9FF; flowDirection=horizontal; port labels=true/true; main font=Meiryo, sans-serif 16px; tooltip=hidden 13px; comment disabled 13px; hover effect disabled; animation=none. No additional TYPE-only default beyond the Registry geometry/text and the common Shape defaults.
Enum全値: theme = dark / light / neon; flowDirection = horizontal / vertical; tooltip.mode = hover / select / always / hidden; hover effect = normal / neon / spin / cross / blink; hover direction = clockwise / counterclockwise; hover speed = slow / normal / fast; animation target = whole / visual / label; animation = none / move / bounce / pulse / spin / blink / slide / zoom / flow / shimmer / glow-sweep / breathing-glow; animation direction = forward / reverse; animation axis = horizontal / vertical; animation speed = slow / normal / fast. このTYPE固有の追加enumなし。
Boolean ON / OFF: appearance.enabled, portLabelVisibility.in/out, comment.enabled/line, hoverBorderEffect.enabled, animation.loop/respectReducedMotion/autoplay use true/false; false disables that feature while preserving the Shape itself.
数値範囲 / 単位 / default: displayRate: 25-200%, default 100%; displayTextStyle.fontSize: 8-72px, default 16px; tooltip/comment fontSize: 8-72px, default 13px; hover spinWidth: 1-12, default 2; spinGlow: 0-60, default 12; animation distance: 0-10000, default 24; loopWaitMs: 0-60000ms, default 300.
依存Component: #002 Bone Joint（接続/WAIT/FIFO/BLOCKED）、#022 Hover Border Effect（min v1.0.5 + attach/detach/getState/isAttached。v1.0.10可）、#117 Animation v1.0.9、#040 ColorPicker（Property色選択）。#020 LabelはUI/Class基準。
責務分離: API境界のShape。実API実行機能を内包しない。
Securityとの関係: API Shapeは境界表現のみで、URL実行・HTTP通信を#021内部では行わない。
WAIT / FIFO / BLOCKEDとの関係: このShapeは独自配送キューを持たない。WAIT/FIFO/BLOCKEDは#002 Bone Jointの接続・配送状態として扱い、Shape GeometryやTYPE意味と混同しない。
似たShapeとの違い: PREPARATIONも六角系だが用途が異なる。APIはインターフェース境界。
使い分け: PREPARATIONも六角系だが用途が異なる。APIはインターフェース境界。このTYPEの意味が必要な場合だけ選択する。
実際の使用場面: REST/API呼出、外部サービス境界。
HTML Functional Class指定: 通常利用Classは bf-shape 1つ。data-shape-type="API" と本文labelのみHTMLから直接指定する。
コピー可能HTML: 直後の html ブロックをCopyボタンで使用できる: <div class="bf-shape" data-shape-type="API">API</div>
実Shape表示: 直後の shape-live ブロックをDOC専用rendererがShape Listと同じthumbnail値でBoneShape Runtimeへ渡して描画する。IN/OUT文字・Tooltip・Comment・Hover/Animationは図鑑では非表示。
Public API例 / 必要性: new BoneShape.Node(value) / createNode(value) / getOutput() を高度操作で使用。HTMLだけで足りる場合は直接呼ばない。

<div class="bf-shape" data-shape-type="API">API</div>

<div class="bf-shape" data-shape-type="API">API</div>

`FILE` — ファイル

TYPE正式名: FILE
日本語名称: ファイル
English名称: File
Shape List上の分類: 固定Shape
Registry category: fixed
用途: 一般ファイルを表す。
Shapeが表す意味: 形式を限定しない単一ファイルを表す基底ファイル記号。
実Geometry / 見た目: 右上折返し付きファイル形状。viewBox 200×160。
Default width / height: 200×160 (viewBox [0, 0, 200, 160])
Port数: 4
Port位置: LEFT=[20, 80], RIGHT=[180, 80], TOP=[100, 20], BOTTOM=[100, 140]
IN / OUT方向: horizontal: LEFT=IN / RIGHT=OUT; vertical: TOP=IN / BOTTOM=OUT
Joint接続上の意味: Port座標とroleを#021が提示し、接続可否・線描画・再接続・配送状態は#002 Bone Jointが担当する。
固有Property: 固有追加Propertyなし。JSON/XML/CSVのbase。
共通Property: theme, uiNo, displayRate, appearance（#040 ColorPicker）, flowDirection, portLabelVisibility, displayTextStyle, tooltip, comment, hoverBorderEffect（#022）, animation（#117）。TYPE固有で無効になる項目はRuntime正規化/Validationに従う。
Property既定値: theme=dark; uiNo=UI-021-001; displayRate=100%; appearance.enabled=false/fill=#172538/stroke=#45BDF8/text=#F5F9FF; flowDirection=horizontal; port labels=true/true; main font=Meiryo, sans-serif 16px; tooltip=hidden 13px; comment disabled 13px; hover effect disabled; animation=none. No additional TYPE-only default beyond the Registry geometry/text and the common Shape defaults.
Enum全値: theme = dark / light / neon; flowDirection = horizontal / vertical; tooltip.mode = hover / select / always / hidden; hover effect = normal / neon / spin / cross / blink; hover direction = clockwise / counterclockwise; hover speed = slow / normal / fast; animation target = whole / visual / label; animation = none / move / bounce / pulse / spin / blink / slide / zoom / flow / shimmer / glow-sweep / breathing-glow; animation direction = forward / reverse; animation axis = horizontal / vertical; animation speed = slow / normal / fast. このTYPE固有の追加enumなし。
Boolean ON / OFF: appearance.enabled, portLabelVisibility.in/out, comment.enabled/line, hoverBorderEffect.enabled, animation.loop/respectReducedMotion/autoplay use true/false; false disables that feature while preserving the Shape itself.
数値範囲 / 単位 / default: displayRate: 25-200%, default 100%; displayTextStyle.fontSize: 8-72px, default 16px; tooltip/comment fontSize: 8-72px, default 13px; hover spinWidth: 1-12, default 2; spinGlow: 0-60, default 12; animation distance: 0-10000, default 24; loopWaitMs: 0-60000ms, default 300.
依存Component: #002 Bone Joint（接続/WAIT/FIFO/BLOCKED）、#022 Hover Border Effect（min v1.0.5 + attach/detach/getState/isAttached。v1.0.10可）、#117 Animation v1.0.9、#040 ColorPicker（Property色選択）。#020 LabelはUI/Class基準。
責務分離: 一般ファイルShape。
Securityとの関係: ファイル形式を表すだけで、#021自身はファイル読込・解析・実行を行わない。
WAIT / FIFO / BLOCKEDとの関係: このShapeは独自配送キューを持たない。WAIT/FIFO/BLOCKEDは#002 Bone Jointの接続・配送状態として扱い、Shape GeometryやTYPE意味と混同しない。
似たShapeとの違い: JSON/XML/CSVはFILEを基底とする形式特化TYPE。
使い分け: JSON/XML/CSVはFILEを基底とする形式特化TYPE。このTYPEの意味が必要な場合だけ選択する。
実際の使用場面: 形式未限定のファイルデータ。
HTML Functional Class指定: 通常利用Classは bf-shape 1つ。data-shape-type="FILE" と本文labelのみHTMLから直接指定する。
コピー可能HTML: 直後の html ブロックをCopyボタンで使用できる: <div class="bf-shape" data-shape-type="FILE">ファイル</div>
実Shape表示: 直後の shape-live ブロックをDOC専用rendererがShape Listと同じthumbnail値でBoneShape Runtimeへ渡して描画する。IN/OUT文字・Tooltip・Comment・Hover/Animationは図鑑では非表示。
Public API例 / 必要性: new BoneShape.Node(value) / createNode(value) / getOutput() を高度操作で使用。HTMLだけで足りる場合は直接呼ばない。

<div class="bf-shape" data-shape-type="FILE">ファイル</div>

<div class="bf-shape" data-shape-type="FILE">ファイル</div>

`JSON` — JSON

TYPE正式名: JSON
日本語名称: JSON
English名称: Json
Shape List上の分類: 固定Shape
Registry category: fixed / base=FILE
用途: JSON形式のファイル/データを表す。
Shapeが表す意味: FILE形状を継承しJSON形式であることを明示する。
実Geometry / 見た目: FILE Geometryを継承。表示記号は {}。
Default width / height: 200×160 (viewBox [0, 0, 200, 160])
Port数: 4
Port位置: LEFT=[20, 80], RIGHT=[180, 80], TOP=[100, 20], BOTTOM=[100, 140]
IN / OUT方向: horizontal: LEFT=IN / RIGHT=OUT; vertical: TOP=IN / BOTTOM=OUT
Joint接続上の意味: Port座標とroleを#021が提示し、接続可否・線描画・再接続・配送状態は#002 Bone Jointが担当する。
固有Property: base=FILE。Geometry/PortはFILEから継承し、TYPEとtextOverrideだけをJSON固有として保持。
共通Property: theme, uiNo, displayRate, appearance（#040 ColorPicker）, flowDirection, portLabelVisibility, displayTextStyle, tooltip, comment, hoverBorderEffect（#022）, animation（#117）。TYPE固有で無効になる項目はRuntime正規化/Validationに従う。
Property既定値: theme=dark; uiNo=UI-021-001; displayRate=100%; appearance.enabled=false/fill=#172538/stroke=#45BDF8/text=#F5F9FF; flowDirection=horizontal; port labels=true/true; main font=Meiryo, sans-serif 16px; tooltip=hidden 13px; comment disabled 13px; hover effect disabled; animation=none. No additional TYPE-only default beyond the Registry geometry/text and the common Shape defaults.
Enum全値: theme = dark / light / neon; flowDirection = horizontal / vertical; tooltip.mode = hover / select / always / hidden; hover effect = normal / neon / spin / cross / blink; hover direction = clockwise / counterclockwise; hover speed = slow / normal / fast; animation target = whole / visual / label; animation = none / move / bounce / pulse / spin / blink / slide / zoom / flow / shimmer / glow-sweep / breathing-glow; animation direction = forward / reverse; animation axis = horizontal / vertical; animation speed = slow / normal / fast. このTYPE固有の追加enumなし。
Boolean ON / OFF: appearance.enabled, portLabelVisibility.in/out, comment.enabled/line, hoverBorderEffect.enabled, animation.loop/respectReducedMotion/autoplay use true/false; false disables that feature while preserving the Shape itself.
数値範囲 / 単位 / default: displayRate: 25-200%, default 100%; displayTextStyle.fontSize: 8-72px, default 16px; tooltip/comment fontSize: 8-72px, default 13px; hover spinWidth: 1-12, default 2; spinGlow: 0-60, default 12; animation distance: 0-10000, default 24; loopWaitMs: 0-60000ms, default 300.
依存Component: #002 Bone Joint（接続/WAIT/FIFO/BLOCKED）、#022 Hover Border Effect（min v1.0.5 + attach/detach/getState/isAttached。v1.0.10可）、#117 Animation v1.0.9、#040 ColorPicker（Property色選択）。#020 LabelはUI/Class基準。
責務分離: #019 Image等とは無関係。JSON形式Shape。
Securityとの関係: ファイル形式を表すだけで、#021自身はファイル読込・解析・実行を行わない。
WAIT / FIFO / BLOCKEDとの関係: このShapeは独自配送キューを持たない。WAIT/FIFO/BLOCKEDは#002 Bone Jointの接続・配送状態として扱い、Shape GeometryやTYPE意味と混同しない。
似たShapeとの違い: FILEは形式未限定、JSONはJSON形式を明示。
使い分け: FILEは形式未限定、JSONはJSON形式を明示。このTYPEの意味が必要な場合だけ選択する。
実際の使用場面: JSONデータを形式まで明示したい場合。
HTML Functional Class指定: 通常利用Classは bf-shape 1つ。data-shape-type="JSON" と本文labelのみHTMLから直接指定する。
コピー可能HTML: 直後の html ブロックをCopyボタンで使用できる: <div class="bf-shape" data-shape-type="JSON">JSON</div>
実Shape表示: 直後の shape-live ブロックをDOC専用rendererがShape Listと同じthumbnail値でBoneShape Runtimeへ渡して描画する。IN/OUT文字・Tooltip・Comment・Hover/Animationは図鑑では非表示。
Public API例 / 必要性: new BoneShape.Node(value) / createNode(value) / getOutput() を高度操作で使用。HTMLだけで足りる場合は直接呼ばない。

<div class="bf-shape" data-shape-type="JSON">JSON</div>

<div class="bf-shape" data-shape-type="JSON">JSON</div>

`XML` — XML

TYPE正式名: XML
日本語名称: XML
English名称: Xml
Shape List上の分類: 固定Shape
Registry category: fixed / base=FILE
用途: XML形式のファイル/データを表す。
Shapeが表す意味: FILE形状を継承しXML形式であることを明示する。
実Geometry / 見た目: FILE Geometryを継承。表示記号は </>。
Default width / height: 200×160 (viewBox [0, 0, 200, 160])
Port数: 4
Port位置: LEFT=[20, 80], RIGHT=[180, 80], TOP=[100, 20], BOTTOM=[100, 140]
IN / OUT方向: horizontal: LEFT=IN / RIGHT=OUT; vertical: TOP=IN / BOTTOM=OUT
Joint接続上の意味: Port座標とroleを#021が提示し、接続可否・線描画・再接続・配送状態は#002 Bone Jointが担当する。
固有Property: base=FILE。Geometry/PortはFILEから継承。
共通Property: theme, uiNo, displayRate, appearance（#040 ColorPicker）, flowDirection, portLabelVisibility, displayTextStyle, tooltip, comment, hoverBorderEffect（#022）, animation（#117）。TYPE固有で無効になる項目はRuntime正規化/Validationに従う。
Property既定値: theme=dark; uiNo=UI-021-001; displayRate=100%; appearance.enabled=false/fill=#172538/stroke=#45BDF8/text=#F5F9FF; flowDirection=horizontal; port labels=true/true; main font=Meiryo, sans-serif 16px; tooltip=hidden 13px; comment disabled 13px; hover effect disabled; animation=none. No additional TYPE-only default beyond the Registry geometry/text and the common Shape defaults.
Enum全値: theme = dark / light / neon; flowDirection = horizontal / vertical; tooltip.mode = hover / select / always / hidden; hover effect = normal / neon / spin / cross / blink; hover direction = clockwise / counterclockwise; hover speed = slow / normal / fast; animation target = whole / visual / label; animation = none / move / bounce / pulse / spin / blink / slide / zoom / flow / shimmer / glow-sweep / breathing-glow; animation direction = forward / reverse; animation axis = horizontal / vertical; animation speed = slow / normal / fast. このTYPE固有の追加enumなし。
Boolean ON / OFF: appearance.enabled, portLabelVisibility.in/out, comment.enabled/line, hoverBorderEffect.enabled, animation.loop/respectReducedMotion/autoplay use true/false; false disables that feature while preserving the Shape itself.
数値範囲 / 単位 / default: displayRate: 25-200%, default 100%; displayTextStyle.fontSize: 8-72px, default 16px; tooltip/comment fontSize: 8-72px, default 13px; hover spinWidth: 1-12, default 2; spinGlow: 0-60, default 12; animation distance: 0-10000, default 24; loopWaitMs: 0-60000ms, default 300.
依存Component: #002 Bone Joint（接続/WAIT/FIFO/BLOCKED）、#022 Hover Border Effect（min v1.0.5 + attach/detach/getState/isAttached。v1.0.10可）、#117 Animation v1.0.9、#040 ColorPicker（Property色選択）。#020 LabelはUI/Class基準。
責務分離: XML形式Shape。
Securityとの関係: ファイル形式を表すだけで、#021自身はファイル読込・解析・実行を行わない。
WAIT / FIFO / BLOCKEDとの関係: このShapeは独自配送キューを持たない。WAIT/FIFO/BLOCKEDは#002 Bone Jointの接続・配送状態として扱い、Shape GeometryやTYPE意味と混同しない。
似たShapeとの違い: FILEは形式未限定、XMLはXML形式を明示。
使い分け: FILEは形式未限定、XMLはXML形式を明示。このTYPEの意味が必要な場合だけ選択する。
実際の使用場面: XMLデータを形式まで明示したい場合。
HTML Functional Class指定: 通常利用Classは bf-shape 1つ。data-shape-type="XML" と本文labelのみHTMLから直接指定する。
コピー可能HTML: 直後の html ブロックをCopyボタンで使用できる: <div class="bf-shape" data-shape-type="XML">XML</div>
実Shape表示: 直後の shape-live ブロックをDOC専用rendererがShape Listと同じthumbnail値でBoneShape Runtimeへ渡して描画する。IN/OUT文字・Tooltip・Comment・Hover/Animationは図鑑では非表示。
Public API例 / 必要性: new BoneShape.Node(value) / createNode(value) / getOutput() を高度操作で使用。HTMLだけで足りる場合は直接呼ばない。

<div class="bf-shape" data-shape-type="XML">XML</div>

<div class="bf-shape" data-shape-type="XML">XML</div>

`CSV` — CSV

TYPE正式名: CSV
日本語名称: CSV
English名称: Csv
Shape List上の分類: 固定Shape
Registry category: fixed / base=FILE
用途: CSV形式のファイル/データを表す。
Shapeが表す意味: FILE形状を継承しCSV形式であることを明示する。
実Geometry / 見た目: FILE Geometryを継承。表示記号は CSV。
Default width / height: 200×160 (viewBox [0, 0, 200, 160])
Port数: 4
Port位置: LEFT=[20, 80], RIGHT=[180, 80], TOP=[100, 20], BOTTOM=[100, 140]
IN / OUT方向: horizontal: LEFT=IN / RIGHT=OUT; vertical: TOP=IN / BOTTOM=OUT
Joint接続上の意味: Port座標とroleを#021が提示し、接続可否・線描画・再接続・配送状態は#002 Bone Jointが担当する。
固有Property: base=FILE。Geometry/PortはFILEから継承。
共通Property: theme, uiNo, displayRate, appearance（#040 ColorPicker）, flowDirection, portLabelVisibility, displayTextStyle, tooltip, comment, hoverBorderEffect（#022）, animation（#117）。TYPE固有で無効になる項目はRuntime正規化/Validationに従う。
Property既定値: theme=dark; uiNo=UI-021-001; displayRate=100%; appearance.enabled=false/fill=#172538/stroke=#45BDF8/text=#F5F9FF; flowDirection=horizontal; port labels=true/true; main font=Meiryo, sans-serif 16px; tooltip=hidden 13px; comment disabled 13px; hover effect disabled; animation=none. No additional TYPE-only default beyond the Registry geometry/text and the common Shape defaults.
Enum全値: theme = dark / light / neon; flowDirection = horizontal / vertical; tooltip.mode = hover / select / always / hidden; hover effect = normal / neon / spin / cross / blink; hover direction = clockwise / counterclockwise; hover speed = slow / normal / fast; animation target = whole / visual / label; animation = none / move / bounce / pulse / spin / blink / slide / zoom / flow / shimmer / glow-sweep / breathing-glow; animation direction = forward / reverse; animation axis = horizontal / vertical; animation speed = slow / normal / fast. このTYPE固有の追加enumなし。
Boolean ON / OFF: appearance.enabled, portLabelVisibility.in/out, comment.enabled/line, hoverBorderEffect.enabled, animation.loop/respectReducedMotion/autoplay use true/false; false disables that feature while preserving the Shape itself.
数値範囲 / 単位 / default: displayRate: 25-200%, default 100%; displayTextStyle.fontSize: 8-72px, default 16px; tooltip/comment fontSize: 8-72px, default 13px; hover spinWidth: 1-12, default 2; spinGlow: 0-60, default 12; animation distance: 0-10000, default 24; loopWaitMs: 0-60000ms, default 300.
依存Component: #002 Bone Joint（接続/WAIT/FIFO/BLOCKED）、#022 Hover Border Effect（min v1.0.5 + attach/detach/getState/isAttached。v1.0.10可）、#117 Animation v1.0.9、#040 ColorPicker（Property色選択）。#020 LabelはUI/Class基準。
責務分離: CSV形式Shape。
Securityとの関係: ファイル形式を表すだけで、#021自身はファイル読込・解析・実行を行わない。
WAIT / FIFO / BLOCKEDとの関係: このShapeは独自配送キューを持たない。WAIT/FIFO/BLOCKEDは#002 Bone Jointの接続・配送状態として扱い、Shape GeometryやTYPE意味と混同しない。
似たShapeとの違い: FILEは形式未限定、CSVはCSV形式を明示。
使い分け: FILEは形式未限定、CSVはCSV形式を明示。このTYPEの意味が必要な場合だけ選択する。
実際の使用場面: CSV入出力や中間CSVデータ。
HTML Functional Class指定: 通常利用Classは bf-shape 1つ。data-shape-type="CSV" と本文labelのみHTMLから直接指定する。
コピー可能HTML: 直後の html ブロックをCopyボタンで使用できる: <div class="bf-shape" data-shape-type="CSV">CSV</div>
実Shape表示: 直後の shape-live ブロックをDOC専用rendererがShape Listと同じthumbnail値でBoneShape Runtimeへ渡して描画する。IN/OUT文字・Tooltip・Comment・Hover/Animationは図鑑では非表示。
Public API例 / 必要性: new BoneShape.Node(value) / createNode(value) / getOutput() を高度操作で使用。HTMLだけで足りる場合は直接呼ばない。

<div class="bf-shape" data-shape-type="CSV">CSV</div>

<div class="bf-shape" data-shape-type="CSV">CSV</div>

`OBJECT` — オブジェクト

TYPE正式名: OBJECT
日本語名称: オブジェクト
English名称: Object
Shape List上の分類: 固定Shape
Registry category: fixed
用途: 構造化Objectデータを表す。
Shapeが表す意味: 単一オブジェクト／構造化データ1件を表す。
実Geometry / 見た目: 立体箱に見える六角柱風Shape。viewBox 220×160。
Default width / height: 220×160 (viewBox [0, 0, 220, 160])
Port数: 4
Port位置: LEFT=[30, 80], RIGHT=[190, 80], TOP=[110, 20], BOTTOM=[110, 140]
IN / OUT方向: horizontal: LEFT=IN / RIGHT=OUT; vertical: TOP=IN / BOTTOM=OUT
Joint接続上の意味: Port座標とroleを#021が提示し、接続可否・線描画・再接続・配送状態は#002 Bone Jointが担当する。
固有Property: 固有追加Propertyなし。COLLECTIONの基底Shape。
共通Property: theme, uiNo, displayRate, appearance（#040 ColorPicker）, flowDirection, portLabelVisibility, displayTextStyle, tooltip, comment, hoverBorderEffect（#022）, animation（#117）。TYPE固有で無効になる項目はRuntime正規化/Validationに従う。
Property既定値: theme=dark; uiNo=UI-021-001; displayRate=100%; appearance.enabled=false/fill=#172538/stroke=#45BDF8/text=#F5F9FF; flowDirection=horizontal; port labels=true/true; main font=Meiryo, sans-serif 16px; tooltip=hidden 13px; comment disabled 13px; hover effect disabled; animation=none. No additional TYPE-only default beyond the Registry geometry/text and the common Shape defaults.
Enum全値: theme = dark / light / neon; flowDirection = horizontal / vertical; tooltip.mode = hover / select / always / hidden; hover effect = normal / neon / spin / cross / blink; hover direction = clockwise / counterclockwise; hover speed = slow / normal / fast; animation target = whole / visual / label; animation = none / move / bounce / pulse / spin / blink / slide / zoom / flow / shimmer / glow-sweep / breathing-glow; animation direction = forward / reverse; animation axis = horizontal / vertical; animation speed = slow / normal / fast. このTYPE固有の追加enumなし。
Boolean ON / OFF: appearance.enabled, portLabelVisibility.in/out, comment.enabled/line, hoverBorderEffect.enabled, animation.loop/respectReducedMotion/autoplay use true/false; false disables that feature while preserving the Shape itself.
数値範囲 / 単位 / default: displayRate: 25-200%, default 100%; displayTextStyle.fontSize: 8-72px, default 16px; tooltip/comment fontSize: 8-72px, default 13px; hover spinWidth: 1-12, default 2; spinGlow: 0-60, default 12; animation distance: 0-10000, default 24; loopWaitMs: 0-60000ms, default 300.
依存Component: #002 Bone Joint（接続/WAIT/FIFO/BLOCKED）、#022 Hover Border Effect（min v1.0.5 + attach/detach/getState/isAttached。v1.0.10可）、#117 Animation v1.0.9、#040 ColorPicker（Property色選択）。#020 LabelはUI/Class基準。
責務分離: 構造化Object表現。
Securityとの関係: TYPEはRegistry存在確認、色・数値・enum等はRuntime正規化/Validationを通す。Shape自体は任意コードを実行しない。
WAIT / FIFO / BLOCKEDとの関係: このShapeは独自配送キューを持たない。WAIT/FIFO/BLOCKEDは#002 Bone Jointの接続・配送状態として扱い、Shape GeometryやTYPE意味と混同しない。
似たShapeとの違い: COLLECTIONは複数Object、OBJECTは単一Object。
使い分け: COLLECTIONは複数Object、OBJECTは単一Object。このTYPEの意味が必要な場合だけ選択する。
実際の使用場面: オブジェクト、構造化データ、レコード。
HTML Functional Class指定: 通常利用Classは bf-shape 1つ。data-shape-type="OBJECT" と本文labelのみHTMLから直接指定する。
コピー可能HTML: 直後の html ブロックをCopyボタンで使用できる: <div class="bf-shape" data-shape-type="OBJECT">オブジェクト</div>
実Shape表示: 直後の shape-live ブロックをDOC専用rendererがShape Listと同じthumbnail値でBoneShape Runtimeへ渡して描画する。IN/OUT文字・Tooltip・Comment・Hover/Animationは図鑑では非表示。
Public API例 / 必要性: new BoneShape.Node(value) / createNode(value) / getOutput() を高度操作で使用。HTMLだけで足りる場合は直接呼ばない。

<div class="bf-shape" data-shape-type="OBJECT">オブジェクト</div>

<div class="bf-shape" data-shape-type="OBJECT">オブジェクト</div>

`IMAGE` — 画像

TYPE正式名: IMAGE
日本語名称: 画像
English名称: Image
Shape List上の分類: 固定Shape
Registry category: fixed
用途: 画像データをShapeとして表す。
Shapeが表す意味: 画像データという種別をフロー上のShapeとして表す。
実Geometry / 見た目: 画像フレーム＋丸＋山形イメージ。viewBox 240×160。
Default width / height: 240×160 (viewBox [0, 0, 240, 160])
Port数: 4
Port位置: LEFT=[20, 80], RIGHT=[220, 80], TOP=[120, 20], BOTTOM=[120, 140]
IN / OUT方向: horizontal: LEFT=IN / RIGHT=OUT; vertical: TOP=IN / BOTTOM=OUT
Joint接続上の意味: Port座標とroleを#021が提示し、接続可否・線描画・再接続・配送状態は#002 Bone Jointが担当する。
固有Property: 固有追加Propertyなし。実画像のTYPE/fit/region等は#019 Image側の責務。
共通Property: theme, uiNo, displayRate, appearance（#040 ColorPicker）, flowDirection, portLabelVisibility, displayTextStyle, tooltip, comment, hoverBorderEffect（#022）, animation（#117）。TYPE固有で無効になる項目はRuntime正規化/Validationに従う。
Property既定値: theme=dark; uiNo=UI-021-001; displayRate=100%; appearance.enabled=false/fill=#172538/stroke=#45BDF8/text=#F5F9FF; flowDirection=horizontal; port labels=true/true; main font=Meiryo, sans-serif 16px; tooltip=hidden 13px; comment disabled 13px; hover effect disabled; animation=none. No additional TYPE-only default beyond the Registry geometry/text and the common Shape defaults.
Enum全値: theme = dark / light / neon; flowDirection = horizontal / vertical; tooltip.mode = hover / select / always / hidden; hover effect = normal / neon / spin / cross / blink; hover direction = clockwise / counterclockwise; hover speed = slow / normal / fast; animation target = whole / visual / label; animation = none / move / bounce / pulse / spin / blink / slide / zoom / flow / shimmer / glow-sweep / breathing-glow; animation direction = forward / reverse; animation axis = horizontal / vertical; animation speed = slow / normal / fast. このTYPE固有の追加enumなし。
Boolean ON / OFF: appearance.enabled, portLabelVisibility.in/out, comment.enabled/line, hoverBorderEffect.enabled, animation.loop/respectReducedMotion/autoplay use true/false; false disables that feature while preserving the Shape itself.
数値範囲 / 単位 / default: displayRate: 25-200%, default 100%; displayTextStyle.fontSize: 8-72px, default 16px; tooltip/comment fontSize: 8-72px, default 13px; hover spinWidth: 1-12, default 2; spinGlow: 0-60, default 12; animation distance: 0-10000, default 24; loopWaitMs: 0-60000ms, default 300.
依存Component: #002 Bone Joint（接続/WAIT/FIFO/BLOCKED）、#022 Hover Border Effect（min v1.0.5 + attach/detach/getState/isAttached。v1.0.10可）、#117 Animation v1.0.9、#040 ColorPicker（Property色選択）。#020 LabelはUI/Class基準。
責務分離: #019 Imageとは責務分離。#021ではShape Geometryだけを持つ。 #019 Imageの実画像表示・fit・region等を#021へ複製しない。
Securityとの関係: 画像データを表すGeometryのみで、#021自身は外部画像URL取得やファイル実行を行わない。
WAIT / FIFO / BLOCKEDとの関係: このShapeは独自配送キューを持たない。WAIT/FIFO/BLOCKEDは#002 Bone Jointの接続・配送状態として扱い、Shape GeometryやTYPE意味と混同しない。
似たShapeとの違い: #019 Bone Imageそのものを埋め込むTYPEではない。画像データのShape表現。
使い分け: #019 Bone Imageそのものを埋め込むTYPEではない。画像データのShape表現。このTYPEの意味が必要な場合だけ選択する。
実際の使用場面: 画像データがフローを通ることを示す。
HTML Functional Class指定: 通常利用Classは bf-shape 1つ。data-shape-type="IMAGE" と本文labelのみHTMLから直接指定する。
コピー可能HTML: 直後の html ブロックをCopyボタンで使用できる: <div class="bf-shape" data-shape-type="IMAGE">画像</div>
実Shape表示: 直後の shape-live ブロックをDOC専用rendererがShape Listと同じthumbnail値でBoneShape Runtimeへ渡して描画する。IN/OUT文字・Tooltip・Comment・Hover/Animationは図鑑では非表示。
Public API例 / 必要性: new BoneShape.Node(value) / createNode(value) / getOutput() を高度操作で使用。HTMLだけで足りる場合は直接呼ばない。

<div class="bf-shape" data-shape-type="IMAGE">画像</div>

<div class="bf-shape" data-shape-type="IMAGE">画像</div>

`ICON` — アイコン

TYPE正式名: ICON
日本語名称: アイコン
English名称: Icon
Shape List上の分類: 固定Shape
Registry category: fixed
用途: アイコンデータをShapeとして表す。
Shapeが表す意味: アイコンデータ／アイコン要素という種別をShapeとして表す。
実Geometry / 見た目: 角丸正方形＋星形。viewBox 160×160。
Default width / height: 160×160 (viewBox [0, 0, 160, 160])
Port数: 4
Port位置: LEFT=[20, 80], RIGHT=[140, 80], TOP=[80, 20], BOTTOM=[80, 140]
IN / OUT方向: horizontal: LEFT=IN / RIGHT=OUT; vertical: TOP=IN / BOTTOM=OUT
Joint接続上の意味: Port座標とroleを#021が提示し、接続可否・線描画・再接続・配送状態は#002 Bone Jointが担当する。
固有Property: 固有追加Propertyなし。実Icon選択/描画は#018の責務。
共通Property: theme, uiNo, displayRate, appearance（#040 ColorPicker）, flowDirection, portLabelVisibility, displayTextStyle, tooltip, comment, hoverBorderEffect（#022）, animation（#117）。TYPE固有で無効になる項目はRuntime正規化/Validationに従う。
Property既定値: theme=dark; uiNo=UI-021-001; displayRate=100%; appearance.enabled=false/fill=#172538/stroke=#45BDF8/text=#F5F9FF; flowDirection=horizontal; port labels=true/true; main font=Meiryo, sans-serif 16px; tooltip=hidden 13px; comment disabled 13px; hover effect disabled; animation=none. No additional TYPE-only default beyond the Registry geometry/text and the common Shape defaults.
Enum全値: theme = dark / light / neon; flowDirection = horizontal / vertical; tooltip.mode = hover / select / always / hidden; hover effect = normal / neon / spin / cross / blink; hover direction = clockwise / counterclockwise; hover speed = slow / normal / fast; animation target = whole / visual / label; animation = none / move / bounce / pulse / spin / blink / slide / zoom / flow / shimmer / glow-sweep / breathing-glow; animation direction = forward / reverse; animation axis = horizontal / vertical; animation speed = slow / normal / fast. このTYPE固有の追加enumなし。
Boolean ON / OFF: appearance.enabled, portLabelVisibility.in/out, comment.enabled/line, hoverBorderEffect.enabled, animation.loop/respectReducedMotion/autoplay use true/false; false disables that feature while preserving the Shape itself.
数値範囲 / 単位 / default: displayRate: 25-200%, default 100%; displayTextStyle.fontSize: 8-72px, default 16px; tooltip/comment fontSize: 8-72px, default 13px; hover spinWidth: 1-12, default 2; spinGlow: 0-60, default 12; animation distance: 0-10000, default 24; loopWaitMs: 0-60000ms, default 300.
依存Component: #002 Bone Joint（接続/WAIT/FIFO/BLOCKED）、#022 Hover Border Effect（min v1.0.5 + attach/detach/getState/isAttached。v1.0.10可）、#117 Animation v1.0.9、#040 ColorPicker（Property色選択）。#020 LabelはUI/Class基準。
責務分離: #018 Iconとは責務分離。 #018 Iconのアイコン資産・表示責務を#021へ複製しない。
Securityとの関係: TYPEはRegistry存在確認、色・数値・enum等はRuntime正規化/Validationを通す。Shape自体は任意コードを実行しない。
WAIT / FIFO / BLOCKEDとの関係: このShapeは独自配送キューを持たない。WAIT/FIFO/BLOCKEDは#002 Bone Jointの接続・配送状態として扱い、Shape GeometryやTYPE意味と混同しない。
似たShapeとの違い: #018 Bone Iconそのものではない。ICONデータを表すShape。
使い分け: #018 Bone Iconそのものではない。ICONデータを表すShape。このTYPEの意味が必要な場合だけ選択する。
実際の使用場面: アイコンデータ/アイコン工程を図示。
HTML Functional Class指定: 通常利用Classは bf-shape 1つ。data-shape-type="ICON" と本文labelのみHTMLから直接指定する。
コピー可能HTML: 直後の html ブロックをCopyボタンで使用できる: <div class="bf-shape" data-shape-type="ICON">アイコン</div>
実Shape表示: 直後の shape-live ブロックをDOC専用rendererがShape Listと同じthumbnail値でBoneShape Runtimeへ渡して描画する。IN/OUT文字・Tooltip・Comment・Hover/Animationは図鑑では非表示。
Public API例 / 必要性: new BoneShape.Node(value) / createNode(value) / getOutput() を高度操作で使用。HTMLだけで足りる場合は直接呼ばない。

<div class="bf-shape" data-shape-type="ICON">アイコン</div>

<div class="bf-shape" data-shape-type="ICON">アイコン</div>

`LABEL` — ラベル

TYPE正式名: LABEL
日本語名称: ラベル
English名称: Label
Shape List上の分類: 固定Shape
Registry category: fixed
用途: ラベル要素をShapeとして表す。
Shapeが表す意味: ラベル要素／ラベルデータという種別をShapeとして表す。
実Geometry / 見た目: 角丸横長矩形。viewBox 240×120。
Default width / height: 240×120 (viewBox [0, 0, 240, 120])
Port数: 4
Port位置: LEFT=[20, 60], RIGHT=[220, 60], TOP=[120, 20], BOTTOM=[120, 100]
IN / OUT方向: horizontal: LEFT=IN / RIGHT=OUT; vertical: TOP=IN / BOTTOM=OUT
Joint接続上の意味: Port座標とroleを#021が提示し、接続可否・線描画・再接続・配送状態は#002 Bone Jointが担当する。
固有Property: 固有追加Propertyなし。ラベルの詳細表示/配置は#020側の責務。
共通Property: theme, uiNo, displayRate, appearance（#040 ColorPicker）, flowDirection, portLabelVisibility, displayTextStyle, tooltip, comment, hoverBorderEffect（#022）, animation（#117）。TYPE固有で無効になる項目はRuntime正規化/Validationに従う。
Property既定値: theme=dark; uiNo=UI-021-001; displayRate=100%; appearance.enabled=false/fill=#172538/stroke=#45BDF8/text=#F5F9FF; flowDirection=horizontal; port labels=true/true; main font=Meiryo, sans-serif 16px; tooltip=hidden 13px; comment disabled 13px; hover effect disabled; animation=none. No additional TYPE-only default beyond the Registry geometry/text and the common Shape defaults.
Enum全値: theme = dark / light / neon; flowDirection = horizontal / vertical; tooltip.mode = hover / select / always / hidden; hover effect = normal / neon / spin / cross / blink; hover direction = clockwise / counterclockwise; hover speed = slow / normal / fast; animation target = whole / visual / label; animation = none / move / bounce / pulse / spin / blink / slide / zoom / flow / shimmer / glow-sweep / breathing-glow; animation direction = forward / reverse; animation axis = horizontal / vertical; animation speed = slow / normal / fast. このTYPE固有の追加enumなし。
Boolean ON / OFF: appearance.enabled, portLabelVisibility.in/out, comment.enabled/line, hoverBorderEffect.enabled, animation.loop/respectReducedMotion/autoplay use true/false; false disables that feature while preserving the Shape itself.
数値範囲 / 単位 / default: displayRate: 25-200%, default 100%; displayTextStyle.fontSize: 8-72px, default 16px; tooltip/comment fontSize: 8-72px, default 13px; hover spinWidth: 1-12, default 2; spinGlow: 0-60, default 12; animation distance: 0-10000, default 24; loopWaitMs: 0-60000ms, default 300.
依存Component: #002 Bone Joint（接続/WAIT/FIFO/BLOCKED）、#022 Hover Border Effect（min v1.0.5 + attach/detach/getState/isAttached。v1.0.10可）、#117 Animation v1.0.9、#040 ColorPicker（Property色選択）。#020 LabelはUI/Class基準。
責務分離: #020 LabelはUI/Class基準として参照するが、Shape Geometryは#021が保持。 #020 LabelのUI/Class責務を#021 Shape内部へ置換しない。
Securityとの関係: TYPEはRegistry存在確認、色・数値・enum等はRuntime正規化/Validationを通す。Shape自体は任意コードを実行しない。
WAIT / FIFO / BLOCKEDとの関係: このShapeは独自配送キューを持たない。WAIT/FIFO/BLOCKEDは#002 Bone Jointの接続・配送状態として扱い、Shape GeometryやTYPE意味と混同しない。
似たShapeとの違い: #020 Bone Labelそのものを内部DOMへ置換しない。#021のSVG Shapeとして扱う。
使い分け: #020 Bone Labelそのものを内部DOMへ置換しない。#021のSVG Shapeとして扱う。このTYPEの意味が必要な場合だけ選択する。
実際の使用場面: Label要素・ラベル主体をフロー上で示す。
HTML Functional Class指定: 通常利用Classは bf-shape 1つ。data-shape-type="LABEL" と本文labelのみHTMLから直接指定する。
コピー可能HTML: 直後の html ブロックをCopyボタンで使用できる: <div class="bf-shape" data-shape-type="LABEL">ラベル</div>
実Shape表示: 直後の shape-live ブロックをDOC専用rendererがShape Listと同じthumbnail値でBoneShape Runtimeへ渡して描画する。IN/OUT文字・Tooltip・Comment・Hover/Animationは図鑑では非表示。
Public API例 / 必要性: new BoneShape.Node(value) / createNode(value) / getOutput() を高度操作で使用。HTMLだけで足りる場合は直接呼ばない。

<div class="bf-shape" data-shape-type="LABEL">ラベル</div>

<div class="bf-shape" data-shape-type="LABEL">ラベル</div>

`PANEL` — パネル

TYPE正式名: PANEL
日本語名称: パネル
English名称: Panel
Shape List上の分類: 固定Shape
Registry category: fixed
用途: パネル領域を表す。
Shapeが表す意味: 複数要素を収容する視覚パネル領域を表す。
実Geometry / 見た目: 角丸大矩形＋上部ヘッダー帯。viewBox 260×170。
Default width / height: 260×170 (viewBox [0, 0, 260, 170])
Port数: 4
Port位置: LEFT=[20, 85], RIGHT=[240, 85], TOP=[130, 20], BOTTOM=[130, 150]
IN / OUT方向: horizontal: LEFT=IN / RIGHT=OUT; vertical: TOP=IN / BOTTOM=OUT
Joint接続上の意味: Port座標とroleを#021が提示し、接続可否・線描画・再接続・配送状態は#002 Bone Jointが担当する。
固有Property: 固有追加Propertyなし。
共通Property: theme, uiNo, displayRate, appearance（#040 ColorPicker）, flowDirection, portLabelVisibility, displayTextStyle, tooltip, comment, hoverBorderEffect（#022）, animation（#117）。TYPE固有で無効になる項目はRuntime正規化/Validationに従う。
Property既定値: theme=dark; uiNo=UI-021-001; displayRate=100%; appearance.enabled=false/fill=#172538/stroke=#45BDF8/text=#F5F9FF; flowDirection=horizontal; port labels=true/true; main font=Meiryo, sans-serif 16px; tooltip=hidden 13px; comment disabled 13px; hover effect disabled; animation=none. No additional TYPE-only default beyond the Registry geometry/text and the common Shape defaults.
Enum全値: theme = dark / light / neon; flowDirection = horizontal / vertical; tooltip.mode = hover / select / always / hidden; hover effect = normal / neon / spin / cross / blink; hover direction = clockwise / counterclockwise; hover speed = slow / normal / fast; animation target = whole / visual / label; animation = none / move / bounce / pulse / spin / blink / slide / zoom / flow / shimmer / glow-sweep / breathing-glow; animation direction = forward / reverse; animation axis = horizontal / vertical; animation speed = slow / normal / fast. このTYPE固有の追加enumなし。
Boolean ON / OFF: appearance.enabled, portLabelVisibility.in/out, comment.enabled/line, hoverBorderEffect.enabled, animation.loop/respectReducedMotion/autoplay use true/false; false disables that feature while preserving the Shape itself.
数値範囲 / 単位 / default: displayRate: 25-200%, default 100%; displayTextStyle.fontSize: 8-72px, default 16px; tooltip/comment fontSize: 8-72px, default 13px; hover spinWidth: 1-12, default 2; spinGlow: 0-60, default 12; animation distance: 0-10000, default 24; loopWaitMs: 0-60000ms, default 300.
依存Component: #002 Bone Joint（接続/WAIT/FIFO/BLOCKED）、#022 Hover Border Effect（min v1.0.5 + attach/detach/getState/isAttached。v1.0.10可）、#117 Animation v1.0.9、#040 ColorPicker（Property色選択）。#020 LabelはUI/Class基準。
責務分離: UI領域のShape表現。
Securityとの関係: TYPEはRegistry存在確認、色・数値・enum等はRuntime正規化/Validationを通す。Shape自体は任意コードを実行しない。
WAIT / FIFO / BLOCKEDとの関係: このShapeは独自配送キューを持たない。WAIT/FIFO/BLOCKEDは#002 Bone Jointの接続・配送状態として扱い、Shape GeometryやTYPE意味と混同しない。
似たShapeとの違い: GROUPはグループ枠、PANELはヘッダー付きパネル領域。
使い分け: GROUPはグループ枠、PANELはヘッダー付きパネル領域。このTYPEの意味が必要な場合だけ選択する。
実際の使用場面: 画面パネル、まとまりのあるUI領域。
HTML Functional Class指定: 通常利用Classは bf-shape 1つ。data-shape-type="PANEL" と本文labelのみHTMLから直接指定する。
コピー可能HTML: 直後の html ブロックをCopyボタンで使用できる: <div class="bf-shape" data-shape-type="PANEL">パネル</div>
実Shape表示: 直後の shape-live ブロックをDOC専用rendererがShape Listと同じthumbnail値でBoneShape Runtimeへ渡して描画する。IN/OUT文字・Tooltip・Comment・Hover/Animationは図鑑では非表示。
Public API例 / 必要性: new BoneShape.Node(value) / createNode(value) / getOutput() を高度操作で使用。HTMLだけで足りる場合は直接呼ばない。

<div class="bf-shape" data-shape-type="PANEL">パネル</div>

<div class="bf-shape" data-shape-type="PANEL">パネル</div>

`GROUP` — グループ

TYPE正式名: GROUP
日本語名称: グループ
English名称: Group
Shape List上の分類: 固定Shape
Registry category: fixed
用途: 複数要素をまとめるグループ領域を表す。
Shapeが表す意味: 複数Shape・要素を論理的にまとめるグループ領域を表す。
実Geometry / 見た目: 大型角丸矩形＋左上タブ見出し。viewBox 280×190。
Default width / height: 280×190 (viewBox [0, 0, 280, 190])
Port数: 4
Port位置: LEFT=[20, 95], RIGHT=[260, 95], TOP=[140, 20], BOTTOM=[140, 170]
IN / OUT方向: horizontal: LEFT=IN / RIGHT=OUT; vertical: TOP=IN / BOTTOM=OUT
Joint接続上の意味: Port座標とroleを#021が提示し、接続可否・線描画・再接続・配送状態は#002 Bone Jointが担当する。
固有Property: 固有追加Propertyなし。
共通Property: theme, uiNo, displayRate, appearance（#040 ColorPicker）, flowDirection, portLabelVisibility, displayTextStyle, tooltip, comment, hoverBorderEffect（#022）, animation（#117）。TYPE固有で無効になる項目はRuntime正規化/Validationに従う。
Property既定値: theme=dark; uiNo=UI-021-001; displayRate=100%; appearance.enabled=false/fill=#172538/stroke=#45BDF8/text=#F5F9FF; flowDirection=horizontal; port labels=true/true; main font=Meiryo, sans-serif 16px; tooltip=hidden 13px; comment disabled 13px; hover effect disabled; animation=none. No additional TYPE-only default beyond the Registry geometry/text and the common Shape defaults.
Enum全値: theme = dark / light / neon; flowDirection = horizontal / vertical; tooltip.mode = hover / select / always / hidden; hover effect = normal / neon / spin / cross / blink; hover direction = clockwise / counterclockwise; hover speed = slow / normal / fast; animation target = whole / visual / label; animation = none / move / bounce / pulse / spin / blink / slide / zoom / flow / shimmer / glow-sweep / breathing-glow; animation direction = forward / reverse; animation axis = horizontal / vertical; animation speed = slow / normal / fast. このTYPE固有の追加enumなし。
Boolean ON / OFF: appearance.enabled, portLabelVisibility.in/out, comment.enabled/line, hoverBorderEffect.enabled, animation.loop/respectReducedMotion/autoplay use true/false; false disables that feature while preserving the Shape itself.
数値範囲 / 単位 / default: displayRate: 25-200%, default 100%; displayTextStyle.fontSize: 8-72px, default 16px; tooltip/comment fontSize: 8-72px, default 13px; hover spinWidth: 1-12, default 2; spinGlow: 0-60, default 12; animation distance: 0-10000, default 24; loopWaitMs: 0-60000ms, default 300.
依存Component: #002 Bone Joint（接続/WAIT/FIFO/BLOCKED）、#022 Hover Border Effect（min v1.0.5 + attach/detach/getState/isAttached。v1.0.10可）、#117 Animation v1.0.9、#040 ColorPicker（Property色選択）。#020 LabelはUI/Class基準。
責務分離: グループ領域Shape。
Securityとの関係: TYPEはRegistry存在確認、色・数値・enum等はRuntime正規化/Validationを通す。Shape自体は任意コードを実行しない。
WAIT / FIFO / BLOCKEDとの関係: このShapeは独自配送キューを持たない。WAIT/FIFO/BLOCKEDは#002 Bone Jointの接続・配送状態として扱い、Shape GeometryやTYPE意味と混同しない。
似たShapeとの違い: PANELはパネル、GROUPは論理グループ/囲み。
使い分け: PANELはパネル、GROUPは論理グループ/囲み。このTYPEの意味が必要な場合だけ選択する。
実際の使用場面: 複数Shape/UIを論理的に囲うグループ。
HTML Functional Class指定: 通常利用Classは bf-shape 1つ。data-shape-type="GROUP" と本文labelのみHTMLから直接指定する。
コピー可能HTML: 直後の html ブロックをCopyボタンで使用できる: <div class="bf-shape" data-shape-type="GROUP">グループ</div>
実Shape表示: 直後の shape-live ブロックをDOC専用rendererがShape Listと同じthumbnail値でBoneShape Runtimeへ渡して描画する。IN/OUT文字・Tooltip・Comment・Hover/Animationは図鑑では非表示。
Public API例 / 必要性: new BoneShape.Node(value) / createNode(value) / getOutput() を高度操作で使用。HTMLだけで足りる場合は直接呼ばない。

<div class="bf-shape" data-shape-type="GROUP">グループ</div>

<div class="bf-shape" data-shape-type="GROUP">グループ</div>

`MULTI_DOCUMENT` — 複数ドキュメント

TYPE正式名: MULTI_DOCUMENT
日本語名称: 複数ドキュメント
English名称: Multi Document
Shape List上の分類: 複合Shape
Registry category: composite / base=DOCUMENT
用途: 複数文書・複数帳票のまとまりを表す。
Shapeが表す意味: 複数文書を重ねたCompositeとして表す。
実Geometry / 見た目: DOCUMENTを左下方向へ2〜4枚重ねるComposite。viewBox 260×180。
Default width / height: 260×180 (viewBox [-20, 0, 260, 180])
Port数: 4
Port位置: default compositeCount=3: LEFT=[0, 90], RIGHT=[220, 90], TOP=[100, 20], BOTTOM=[100, 139]
IN / OUT方向: horizontal: LEFT=IN / RIGHT=OUT; vertical: TOP=IN / BOTTOM=OUT
Joint接続上の意味: Port座標とroleを#021が提示し、接続可否・線描画・再接続・配送状態は#002 Bone Jointが担当する。
固有Property: compositeCount=2〜4。base=DOCUMENT、offset=[-10,10]、portSetsは2/3/4別定義。
共通Property: theme, uiNo, displayRate, appearance（#040 ColorPicker）, flowDirection, portLabelVisibility, displayTextStyle, tooltip, comment, hoverBorderEffect（#022）, animation（#117）。TYPE固有で無効になる項目はRuntime正規化/Validationに従う。
Property既定値: theme=dark; uiNo=UI-021-001; displayRate=100%; appearance.enabled=false/fill=#172538/stroke=#45BDF8/text=#F5F9FF; flowDirection=horizontal; port labels=true/true; main font=Meiryo, sans-serif 16px; tooltip=hidden 13px; comment disabled 13px; hover effect disabled; animation=none. compositeCount=3; valid range 2-4.
Enum全値: theme = dark / light / neon; flowDirection = horizontal / vertical; tooltip.mode = hover / select / always / hidden; hover effect = normal / neon / spin / cross / blink; hover direction = clockwise / counterclockwise; hover speed = slow / normal / fast; animation target = whole / visual / label; animation = none / move / bounce / pulse / spin / blink / slide / zoom / flow / shimmer / glow-sweep / breathing-glow; animation direction = forward / reverse; animation axis = horizontal / vertical; animation speed = slow / normal / fast. compositeCount = 2 / 3 / 4.
Boolean ON / OFF: appearance.enabled, portLabelVisibility.in/out, comment.enabled/line, hoverBorderEffect.enabled, animation.loop/respectReducedMotion/autoplay use true/false; false disables that feature while preserving the Shape itself.
数値範囲 / 単位 / default: displayRate: 25-200%, default 100%; displayTextStyle.fontSize: 8-72px, default 16px; tooltip/comment fontSize: 8-72px, default 13px; hover spinWidth: 1-12, default 2; spinGlow: 0-60, default 12; animation distance: 0-10000, default 24; loopWaitMs: 0-60000ms, default 300. compositeCount=2-4 default 3。
依存Component: #002 Bone Joint（接続/WAIT/FIFO/BLOCKED）、#022 Hover Border Effect（min v1.0.5 + attach/detach/getState/isAttached。v1.0.10可）、#117 Animation v1.0.9、#040 ColorPicker（Property色選択）。#020 LabelはUI/Class基準。
責務分離: Composite Shape。重ね数をHTML Classから直接指定せずProperty Editor/Public APIを使用。
Securityとの関係: TYPEはRegistry存在確認、色・数値・enum等はRuntime正規化/Validationを通す。Shape自体は任意コードを実行しない。
WAIT / FIFO / BLOCKEDとの関係: このShapeは独自配送キューを持たない。WAIT/FIFO/BLOCKEDは#002 Bone Jointの接続・配送状態として扱い、Shape GeometryやTYPE意味と混同しない。
似たShapeとの違い: DOCUMENTは1文書、MULTI_DOCUMENTは複数文書。
使い分け: DOCUMENTは1文書、MULTI_DOCUMENTは複数文書。このTYPEの意味が必要な場合だけ選択する。
実際の使用場面: 複数帳票、複数文書セット。
HTML Functional Class指定: 通常利用Classは bf-shape 1つ。data-shape-type="MULTI_DOCUMENT" と本文labelのみHTMLから直接指定する。
コピー可能HTML: 直後の html ブロックをCopyボタンで使用できる: <div class="bf-shape" data-shape-type="MULTI_DOCUMENT">複数ドキュメント</div>
実Shape表示: 直後の shape-live ブロックをDOC専用rendererがShape Listと同じthumbnail値でBoneShape Runtimeへ渡して描画する。IN/OUT文字・Tooltip・Comment・Hover/Animationは図鑑では非表示。
Public API例 / 必要性: new BoneShape.Node(value) / createNode(value) / getOutput() を高度操作で使用。HTMLだけで足りる場合は直接呼ばない。

<div class="bf-shape" data-shape-type="MULTI_DOCUMENT">複数ドキュメント</div>

<div class="bf-shape" data-shape-type="MULTI_DOCUMENT">複数ドキュメント</div>

`COLLECTION` — コレクション

TYPE正式名: COLLECTION
日本語名称: コレクション
English名称: Collection
Shape List上の分類: 複合Shape
Registry category: composite / base=OBJECT
用途: 複数Objectの集合を表す。
Shapeが表す意味: 複数OBJECTの集合を重ねたCompositeとして表す。
実Geometry / 見た目: OBJECTを左下方向へ2〜4枚重ねるComposite。viewBox 240×200。
Default width / height: 240×200 (viewBox [-20, 0, 240, 200])
Port数: 4
Port位置: default compositeCount=3: LEFT=[10, 100], RIGHT=[190, 100], TOP=[90, 27.5], BOTTOM=[90, 160]
IN / OUT方向: horizontal: LEFT=IN / RIGHT=OUT; vertical: TOP=IN / BOTTOM=OUT
Joint接続上の意味: Port座標とroleを#021が提示し、接続可否・線描画・再接続・配送状態は#002 Bone Jointが担当する。
固有Property: compositeCount=2〜4。base=OBJECT、offset=[-10,10]、portSetsは2/3/4別定義。
共通Property: theme, uiNo, displayRate, appearance（#040 ColorPicker）, flowDirection, portLabelVisibility, displayTextStyle, tooltip, comment, hoverBorderEffect（#022）, animation（#117）。TYPE固有で無効になる項目はRuntime正規化/Validationに従う。
Property既定値: theme=dark; uiNo=UI-021-001; displayRate=100%; appearance.enabled=false/fill=#172538/stroke=#45BDF8/text=#F5F9FF; flowDirection=horizontal; port labels=true/true; main font=Meiryo, sans-serif 16px; tooltip=hidden 13px; comment disabled 13px; hover effect disabled; animation=none. compositeCount=3; valid range 2-4.
Enum全値: theme = dark / light / neon; flowDirection = horizontal / vertical; tooltip.mode = hover / select / always / hidden; hover effect = normal / neon / spin / cross / blink; hover direction = clockwise / counterclockwise; hover speed = slow / normal / fast; animation target = whole / visual / label; animation = none / move / bounce / pulse / spin / blink / slide / zoom / flow / shimmer / glow-sweep / breathing-glow; animation direction = forward / reverse; animation axis = horizontal / vertical; animation speed = slow / normal / fast. compositeCount = 2 / 3 / 4.
Boolean ON / OFF: appearance.enabled, portLabelVisibility.in/out, comment.enabled/line, hoverBorderEffect.enabled, animation.loop/respectReducedMotion/autoplay use true/false; false disables that feature while preserving the Shape itself.
数値範囲 / 単位 / default: displayRate: 25-200%, default 100%; displayTextStyle.fontSize: 8-72px, default 16px; tooltip/comment fontSize: 8-72px, default 13px; hover spinWidth: 1-12, default 2; spinGlow: 0-60, default 12; animation distance: 0-10000, default 24; loopWaitMs: 0-60000ms, default 300. compositeCount=2-4 default 3。
依存Component: #002 Bone Joint（接続/WAIT/FIFO/BLOCKED）、#022 Hover Border Effect（min v1.0.5 + attach/detach/getState/isAttached。v1.0.10可）、#117 Animation v1.0.9、#040 ColorPicker（Property色選択）。#020 LabelはUI/Class基準。
責務分離: Composite Shape。
Securityとの関係: TYPEはRegistry存在確認、色・数値・enum等はRuntime正規化/Validationを通す。Shape自体は任意コードを実行しない。
WAIT / FIFO / BLOCKEDとの関係: このShapeは独自配送キューを持たない。WAIT/FIFO/BLOCKEDは#002 Bone Jointの接続・配送状態として扱い、Shape GeometryやTYPE意味と混同しない。
似たShapeとの違い: OBJECTは単一、COLLECTIONは複数。
使い分け: OBJECTは単一、COLLECTIONは複数。このTYPEの意味が必要な場合だけ選択する。
実際の使用場面: 配列、List、Collection、複数Object。
HTML Functional Class指定: 通常利用Classは bf-shape 1つ。data-shape-type="COLLECTION" と本文labelのみHTMLから直接指定する。
コピー可能HTML: 直後の html ブロックをCopyボタンで使用できる: <div class="bf-shape" data-shape-type="COLLECTION">コレクション</div>
実Shape表示: 直後の shape-live ブロックをDOC専用rendererがShape Listと同じthumbnail値でBoneShape Runtimeへ渡して描画する。IN/OUT文字・Tooltip・Comment・Hover/Animationは図鑑では非表示。
Public API例 / 必要性: new BoneShape.Node(value) / createNode(value) / getOutput() を高度操作で使用。HTMLだけで足りる場合は直接呼ばない。

<div class="bf-shape" data-shape-type="COLLECTION">コレクション</div>

<div class="bf-shape" data-shape-type="COLLECTION">コレクション</div>

`TABLE_DETAIL` — テーブル詳細

TYPE正式名: TABLE_DETAIL
日本語名称: テーブル詳細
English名称: Table Detail
Shape List上の分類: 可変詳細Shape
Registry category: detail / renderer=table-detail
用途: テーブル名と可変フィールド行を表示し、フィールド単位接続を表す。
Shapeが表す意味: テーブル本体と可変フィールド行を持ち、フィールド単位接続を表す。
実Geometry / 見た目: 固定Geometryではなくtable-detail rendererが列見出し＋行数に応じた本体を生成。
Default width / height: Dynamic: table-detail renderer determines height from field rows; editor/layout reference width is 420px.
Port数: 4 + 2×field count
Port位置: TABLE LEFT/RIGHT/TOP/BOTTOM plus independent IN/OUT for every field
IN / OUT方向: horizontal: table IN=LEFT/OUT=RIGHT; vertical: table IN=TOP/OUT=BOTTOM; field ports remain per field
Joint接続上の意味: Port座標とroleを#021が提示し、接続可否・線描画・再接続・配送状態は#002 Bone Jointが担当する。
固有Property: logicalName / tableName / fields[]。fields各要素はname / alias / type。tablePorts=true、fieldPorts=true。
共通Property: theme, uiNo, displayRate, appearance（#040 ColorPicker）, flowDirection, portLabelVisibility, displayTextStyle, tooltip, comment, hoverBorderEffect（#022）, animation（#117）。TYPE固有で無効になる項目はRuntime正規化/Validationに従う。
Property既定値: theme=dark; uiNo=UI-021-001; displayRate=100%; appearance.enabled=false/fill=#172538/stroke=#45BDF8/text=#F5F9FF; flowDirection=horizontal; port labels=true/true; main font=Meiryo, sans-serif 16px; tooltip=hidden 13px; comment disabled 13px; hover effect disabled; animation=none. logicalName/tableName are strings; fields[] entries use name / alias / type; field count controls dynamic geometry and field-port count.
Enum全値: theme = dark / light / neon; flowDirection = horizontal / vertical; tooltip.mode = hover / select / always / hidden; hover effect = normal / neon / spin / cross / blink; hover direction = clockwise / counterclockwise; hover speed = slow / normal / fast; animation target = whole / visual / label; animation = none / move / bounce / pulse / spin / blink / slide / zoom / flow / shimmer / glow-sweep / breathing-glow; animation direction = forward / reverse; animation axis = horizontal / vertical; animation speed = slow / normal / fast. このTYPE固有の追加enumなし。
Boolean ON / OFF: appearance.enabled, portLabelVisibility.in/out, comment.enabled/line, hoverBorderEffect.enabled, animation.loop/respectReducedMotion/autoplay use true/false; false disables that feature while preserving the Shape itself.
数値範囲 / 単位 / default: displayRate: 25-200%, default 100%; displayTextStyle.fontSize: 8-72px, default 16px; tooltip/comment fontSize: 8-72px, default 13px; hover spinWidth: 1-12, default 2; spinGlow: 0-60, default 12; animation distance: 0-10000, default 24; loopWaitMs: 0-60000ms, default 300.
依存Component: #002 Bone Joint（接続/WAIT/FIFO/BLOCKED）、#022 Hover Border Effect（min v1.0.5 + attach/detach/getState/isAttached。v1.0.10可）、#117 Animation v1.0.9、#040 ColorPicker（Property色選択）。#020 LabelはUI/Class基準。
責務分離: 可変詳細Shape。HTML ClassではTYPE/label入口のみ。fieldsはProperty Editor/Public APIで設定。
Securityとの関係: fieldsは表示・接続メタデータとして扱い、コード実行やDBアクセスを行わない。
WAIT / FIFO / BLOCKEDとの関係: このShapeは独自配送キューを持たない。WAIT/FIFO/BLOCKEDは#002 Bone Jointの接続・配送状態として扱い、Shape GeometryやTYPE意味と混同しない。
似たShapeとの違い: TABLEは簡易テーブル、TABLE_DETAILはフィールド詳細とField Portを持つ。
使い分け: TABLEは簡易テーブル、TABLE_DETAILはフィールド詳細とField Portを持つ。このTYPEの意味が必要な場合だけ選択する。
実際の使用場面: DB設計、項目マッピング、Field単位のIN/OUT接続。
HTML Functional Class指定: 通常利用Classは bf-shape 1つ。data-shape-type="TABLE_DETAIL" と本文labelのみHTMLから直接指定する。
コピー可能HTML: 直後の html ブロックをCopyボタンで使用できる: <div class="bf-shape" data-shape-type="TABLE_DETAIL">テーブル詳細</div>
実Shape表示: 直後の shape-live ブロックをDOC専用rendererがShape Listと同じthumbnail値でBoneShape Runtimeへ渡して描画する。IN/OUT文字・Tooltip・Comment・Hover/Animationは図鑑では非表示。
Public API例 / 必要性: new BoneShape.Node(value) / createNode(value) / getOutput() を高度操作で使用。HTMLだけで足りる場合は直接呼ばない。

<div class="bf-shape" data-shape-type="TABLE_DETAIL">テーブル詳細</div>

<div class="bf-shape" data-shape-type="TABLE_DETAIL">テーブル詳細</div>

`SCHEDULE_TRIGGER` — スケジュール起点

TYPE正式名: SCHEDULE_TRIGGER
日本語名称: スケジュール起点
English名称: Schedule Trigger
Shape List上の分類: 固定Shape / TIME JOB（同一TYPEをUIで再分類）
Registry category: fixed
用途: TIME JOBのスケジュール起点を表す。
Shapeが表す意味: 時刻・カレンダー・外部トリガ条件からTIME JOBフローを開始する起点。
実Geometry / 見た目: 六角形。viewBox 180×150。既定表示は2行の「スケジュール
Default width / height: 180×150 (viewBox [0, 0, 180, 150])
Port数: 1
Port位置: OUT=RIGHT / vertical:BOTTOM
IN / OUT方向: IN=none; OUT=OUT
Joint接続上の意味: Port座標とroleを#021が提示し、接続可否・線描画・再接続・配送状態は#002 Bone Jointが担当する。
固有Property: schedule.type / triggerMode / month / dayOfMonth / dayOfWeek / hour / minute / cron / text / calendar / enabled。#021はtimerを所有しない。
共通Property: theme, uiNo, displayRate, appearance（#040 ColorPicker）, flowDirection, portLabelVisibility, displayTextStyle, tooltip, comment, hoverBorderEffect（#022）, animation（#117）。TYPE固有で無効になる項目はRuntime正規化/Validationに従う。
Property既定値: theme=dark; uiNo=UI-021-001; displayRate=100%; appearance.enabled=false/fill=#172538/stroke=#45BDF8/text=#F5F9FF; flowDirection=horizontal; port labels=true/true; main font=Meiryo, sans-serif 16px; tooltip=hidden 13px; comment disabled 13px; hover effect disabled; animation=none. schedule: type=daily, triggerMode=CLOCK, month=1, dayOfMonth=1, dayOfWeek=MON, hour=3, minute=0, cron="", calendar="", enabled=true.
Enum全値: theme = dark / light / neon; flowDirection = horizontal / vertical; tooltip.mode = hover / select / always / hidden; hover effect = normal / neon / spin / cross / blink; hover direction = clockwise / counterclockwise; hover speed = slow / normal / fast; animation target = whole / visual / label; animation = none / move / bounce / pulse / spin / blink / slide / zoom / flow / shimmer / glow-sweep / breathing-glow; animation direction = forward / reverse; animation axis = horizontal / vertical; animation speed = slow / normal / fast. schedule.type = daily / weekly / monthly / business-day / cron / once; triggerMode = CLOCK / MANUAL / API / JOINT; dayOfWeek = SUN / MON / TUE / WED / THU / FRI / SAT.
Boolean ON / OFF: appearance.enabled, portLabelVisibility.in/out, comment.enabled/line, hoverBorderEffect.enabled, animation.loop/respectReducedMotion/autoplay use true/false; false disables that feature while preserving the Shape itself. schedule.enabled=true/false。
数値範囲 / 単位 / default: displayRate: 25-200%, default 100%; displayTextStyle.fontSize: 8-72px, default 16px; tooltip/comment fontSize: 8-72px, default 13px; hover spinWidth: 1-12, default 2; spinGlow: 0-60, default 12; animation distance: 0-10000, default 24; loopWaitMs: 0-60000ms, default 300. schedule.month=1-12 default 1、dayOfMonth=1-31 default 1、hour=0-23 default 3、minute=0-59 default 0。
依存Component: #002 Bone Joint（接続/WAIT/FIFO/BLOCKED）、#022 Hover Border Effect（min v1.0.5 + attach/detach/getState/isAttached。v1.0.10可）、#117 Animation v1.0.9、#040 ColorPicker（Property色選択）。#020 LabelはUI/Class基準。
責務分離: Semantic OUT 1個。horizontal=RIGHT、vertical=BOTTOM。UIでは固定ShapeとTIME JOBの両方から選択可能。
Securityとの関係: scheduleのenum・月/日/時/分範囲をRuntimeで検証する。#021自身はtimerや外部呼出しを生成しない。
WAIT / FIFO / BLOCKEDとの関係: trigger後のOUT配送でWAIT/FIFO/BLOCKEDが必要な場合は#002 Joint側が管理する。schedule.enabled=falseや未一致はJoint WAITではない。
似たShapeとの違い: DELAYは遅延工程。SCHEDULE_TRIGGERは実行条件を表すTIME JOB起点。
使い分け: DELAYは遅延工程。SCHEDULE_TRIGGERは実行条件を表すTIME JOB起点。このTYPEの意味が必要な場合だけ選択する。
実際の使用場面: 時刻・カレンダー・Manual/API/Joint条件からJOBフローを開始する起点。
HTML Functional Class指定: 通常利用Classは bf-shape 1つ。data-shape-type="SCHEDULE_TRIGGER" と本文labelのみHTMLから直接指定する。
コピー可能HTML: 直後の html ブロックをCopyボタンで使用できる: <div class="bf-shape" data-shape-type="SCHEDULE_TRIGGER">スケジュール起点</div>
実Shape表示: 直後の shape-live ブロックをDOC専用rendererがShape Listと同じthumbnail値でBoneShape Runtimeへ渡して描画する。IN/OUT文字・Tooltip・Comment・Hover/Animationは図鑑では非表示。
Public API例 / 必要性: matchesSchedule() / triggerSchedule() を使用。timer実行は外部Runtime責務。

<div class="bf-shape" data-shape-type="SCHEDULE_TRIGGER">スケジュール起点</div>

<div class="bf-shape" data-shape-type="SCHEDULE_TRIGGER">スケジュール起点</div>

`JOB` — ジョブ

TYPE正式名: JOB
日本語名称: ジョブ
English名称: Job
Shape List上の分類: 固定Shape / TIME JOB（同一TYPEをUIで再分類）
Registry category: fixed
用途: TIME JOBの単一実行処理を表す。
Shapeが表す意味: 実行定義・入力契約・状態・SUCCESS/ERROR戻りを持つ単一ジョブ。
実Geometry / 見た目: 角丸大矩形。viewBox 260×160。
Default width / height: 260×160 (viewBox [0, 0, 260, 160])
Port数: 3
Port位置: IN=LEFT / vertical:TOP, SUCCESS=RIGHT / vertical:BOTTOM, ERROR=BOTTOM / vertical:RIGHT
IN / OUT方向: IN=IN; OUT=SUCCESS,ERROR
Joint接続上の意味: Port座標とroleを#021が提示し、接続可否・線描画・再接続・配送状態は#002 Bone Jointが担当する。
固有Property: job.processType / processContent / acceptedInputType / status / statusColors / scheduleText / enabled / input / returnPort。
共通Property: theme, uiNo, displayRate, appearance（#040 ColorPicker）, flowDirection, portLabelVisibility, displayTextStyle, tooltip, comment, hoverBorderEffect（#022）, animation（#117）。TYPE固有で無効になる項目はRuntime正規化/Validationに従う。
Property既定値: theme=dark; uiNo=UI-021-001; displayRate=100%; appearance.enabled=false/fill=#172538/stroke=#45BDF8/text=#F5F9FF; flowDirection=horizontal; port labels=true/true; main font=Meiryo, sans-serif 16px; tooltip=hidden 13px; comment disabled 13px; hover effect disabled; animation=none. job: processType=CUSTOM, processContent="", acceptedInputType=ANY, status=WAIT, running=#F59E0B, success=#3B82F6, error=#EF4444, enabled=true; JOBNET additionally uses parallel=false by default.
Enum全値: theme = dark / light / neon; flowDirection = horizontal / vertical; tooltip.mode = hover / select / always / hidden; hover effect = normal / neon / spin / cross / blink; hover direction = clockwise / counterclockwise; hover speed = slow / normal / fast; animation target = whole / visual / label; animation = none / move / bounce / pulse / spin / blink / slide / zoom / flow / shimmer / glow-sweep / breathing-glow; animation direction = forward / reverse; animation axis = horizontal / vertical; animation speed = slow / normal / fast. processType = SQL / BAT / JS / POWERSHELL / EXE / API / SHELL / ETL / FILE_TRANSFER / AI / CUSTOM; acceptedInputType = ANY / JSON / TEXT / FILE / SQL / COMMAND / JOB_REQUEST; status = WAIT / READY / RUNNING / SUCCESS / ERROR / HOLD / SKIPPED.
Boolean ON / OFF: appearance.enabled, portLabelVisibility.in/out, comment.enabled/line, hoverBorderEffect.enabled, animation.loop/respectReducedMotion/autoplay use true/false; false disables that feature while preserving the Shape itself. job.enabled=true/false、JOBNETはparallel=true/false。
数値範囲 / 単位 / default: displayRate: 25-200%, default 100%; displayTextStyle.fontSize: 8-72px, default 16px; tooltip/comment fontSize: 8-72px, default 13px; hover spinWidth: 1-12, default 2; spinGlow: 0-60, default 12; animation distance: 0-10000, default 24; loopWaitMs: 0-60000ms, default 300.
依存Component: #002 Bone Joint（接続/WAIT/FIFO/BLOCKED）、#022 Hover Border Effect（min v1.0.5 + attach/detach/getState/isAttached。v1.0.10可）、#117 Animation v1.0.9、#040 ColorPicker（Property色選択）。#020 LabelはUI/Class基準。
責務分離: Semantic IN/SUCCESS/ERROR。horizontal: IN=LEFT, SUCCESS=RIGHT, ERROR=BOTTOM。vertical: IN=TOP, SUCCESS=BOTTOM, ERROR=RIGHT。#021は処理本文を保持するがSQL等を実行しない。
Securityとの関係: processContentは実行せずTEXTとして保持し、50,000文字超過とASCII制御文字を拒否する。入力Boneはid/type/value構造を検証し、acceptedInputType不一致を拒否する。
WAIT / FIFO / BLOCKEDとの関係: job.status=WAITはTIME JOBの業務状態であり、#002 JointのWAITキューとは別物。Joint WAIT/FIFO/BLOCKEDの配送制御は#002が担当し、#021はその意味を上書きしない。
似たShapeとの違い: PROCESSは一般処理、JOBはTIME JOB固有の入力契約・状態・戻りPortを持つ。
使い分け: PROCESSは一般処理、JOBはTIME JOB固有の入力契約・状態・戻りPortを持つ。このTYPEの意味が必要な場合だけ選択する。
実際の使用場面: SQL/BAT/JS/API等の処理定義、入力契約、実行状態、SUCCESS/ERROR分岐を表す。
HTML Functional Class指定: 通常利用Classは bf-shape 1つ。data-shape-type="JOB" と本文labelのみHTMLから直接指定する。
コピー可能HTML: 直後の html ブロックをCopyボタンで使用できる: <div class="bf-shape" data-shape-type="JOB">ジョブ</div>
実Shape表示: 直後の shape-live ブロックをDOC専用rendererがShape Listと同じthumbnail値でBoneShape Runtimeへ渡して描画する。IN/OUT文字・Tooltip・Comment・Hover/Animationは図鑑では非表示。
Public API例 / 必要性: setJobInput() / applyJobResult() / getOutput() を使用。処理本文の実行は外部Runtime責務。

<div class="bf-shape" data-shape-type="JOB">ジョブ</div>

<div class="bf-shape" data-shape-type="JOB">ジョブ</div>

`JOBNET` — ジョブネット

TYPE正式名: JOBNET
日本語名称: ジョブネット
English名称: Jobnet
Shape List上の分類: 固定Shape / TIME JOB（同一TYPEをUIで再分類）
Registry category: fixed
用途: 複数JOBをまとめる運用グループを表す。
Shapeが表す意味: 複数JOBを1つの運用単位としてまとめるジョブネット。
実Geometry / 見た目: 大型角丸矩形＋上部区切り線。viewBox 300×190。
Default width / height: 300×190 (viewBox [0, 0, 300, 190])
Port数: 3
Port位置: IN=LEFT / vertical:TOP, SUCCESS=RIGHT / vertical:BOTTOM, ERROR=BOTTOM / vertical:RIGHT
IN / OUT方向: IN=IN; OUT=SUCCESS,ERROR
Joint接続上の意味: Port座標とroleを#021が提示し、接続可否・線描画・再接続・配送状態は#002 Bone Jointが担当する。
固有Property: JOB共通Propertyに加えてjob.parallelを使用。status / statusColors / input / returnPortも保持。
共通Property: theme, uiNo, displayRate, appearance（#040 ColorPicker）, flowDirection, portLabelVisibility, displayTextStyle, tooltip, comment, hoverBorderEffect（#022）, animation（#117）。TYPE固有で無効になる項目はRuntime正規化/Validationに従う。
Property既定値: theme=dark; uiNo=UI-021-001; displayRate=100%; appearance.enabled=false/fill=#172538/stroke=#45BDF8/text=#F5F9FF; flowDirection=horizontal; port labels=true/true; main font=Meiryo, sans-serif 16px; tooltip=hidden 13px; comment disabled 13px; hover effect disabled; animation=none. job: processType=CUSTOM, processContent="", acceptedInputType=ANY, status=WAIT, running=#F59E0B, success=#3B82F6, error=#EF4444, enabled=true; JOBNET additionally uses parallel=false by default.
Enum全値: theme = dark / light / neon; flowDirection = horizontal / vertical; tooltip.mode = hover / select / always / hidden; hover effect = normal / neon / spin / cross / blink; hover direction = clockwise / counterclockwise; hover speed = slow / normal / fast; animation target = whole / visual / label; animation = none / move / bounce / pulse / spin / blink / slide / zoom / flow / shimmer / glow-sweep / breathing-glow; animation direction = forward / reverse; animation axis = horizontal / vertical; animation speed = slow / normal / fast. processType = SQL / BAT / JS / POWERSHELL / EXE / API / SHELL / ETL / FILE_TRANSFER / AI / CUSTOM; acceptedInputType = ANY / JSON / TEXT / FILE / SQL / COMMAND / JOB_REQUEST; status = WAIT / READY / RUNNING / SUCCESS / ERROR / HOLD / SKIPPED.
Boolean ON / OFF: appearance.enabled, portLabelVisibility.in/out, comment.enabled/line, hoverBorderEffect.enabled, animation.loop/respectReducedMotion/autoplay use true/false; false disables that feature while preserving the Shape itself. job.enabled=true/false、JOBNETはparallel=true/false。
数値範囲 / 単位 / default: displayRate: 25-200%, default 100%; displayTextStyle.fontSize: 8-72px, default 16px; tooltip/comment fontSize: 8-72px, default 13px; hover spinWidth: 1-12, default 2; spinGlow: 0-60, default 12; animation distance: 0-10000, default 24; loopWaitMs: 0-60000ms, default 300.
依存Component: #002 Bone Joint（接続/WAIT/FIFO/BLOCKED）、#022 Hover Border Effect（min v1.0.5 + attach/detach/getState/isAttached。v1.0.10可）、#117 Animation v1.0.9、#040 ColorPicker（Property色選択）。#020 LabelはUI/Class基準。
責務分離: Semantic IN/SUCCESS/ERROR。flowDirection追従。UIでは固定ShapeとTIME JOBの両方から選択可能。
Securityとの関係: processContentは実行せずTEXTとして保持し、50,000文字超過とASCII制御文字を拒否する。入力Boneはid/type/value構造を検証し、acceptedInputType不一致を拒否する。
WAIT / FIFO / BLOCKEDとの関係: job.status=WAITはTIME JOBの業務状態であり、#002 JointのWAITキューとは別物。Joint WAIT/FIFO/BLOCKEDの配送制御は#002が担当し、#021はその意味を上書きしない。
似たShapeとの違い: JOBは単一実行処理、JOBNETは複数JOBのまとまり。
使い分け: JOBは単一実行処理、JOBNETは複数JOBのまとまり。このTYPEの意味が必要な場合だけ選択する。
実際の使用場面: ジョブネット、夜間バッチ群、複数JOBグループ。
HTML Functional Class指定: 通常利用Classは bf-shape 1つ。data-shape-type="JOBNET" と本文labelのみHTMLから直接指定する。
コピー可能HTML: 直後の html ブロックをCopyボタンで使用できる: <div class="bf-shape" data-shape-type="JOBNET">ジョブネット</div>
実Shape表示: 直後の shape-live ブロックをDOC専用rendererがShape Listと同じthumbnail値でBoneShape Runtimeへ渡して描画する。IN/OUT文字・Tooltip・Comment・Hover/Animationは図鑑では非表示。
Public API例 / 必要性: setJobInput() / applyJobResult() / getOutput() を使用。処理本文の実行は外部Runtime責務。

<div class="bf-shape" data-shape-type="JOBNET">ジョブネット</div>

<div class="bf-shape" data-shape-type="JOBNET">ジョブネット</div>

TIME JOB

SCHEDULE_TRIGGER

SCHEDULE_TRIGGER はOUT semantic portを1個持つ起点Shapeです。schedule.type / triggerMode / month / dayOfMonth / dayOfWeek / hour / minute / cron / calendar / enabled を保持します。#021は独自timerを所有しません。CLOCK 判定は matchesSchedule()、発火OUTは triggerSchedule() を使います。

JOB / JOBNET

JOB / JOBNET は IN / SUCCESS / ERROR semantic portを持ちます。job.processType と job.processContent は処理定義metadataであり、#021自身はSQL/BAT/JS等を実行しません。setJobInput()でBone id/type/value を受け、applyJobResult()でSUCCESS/ERRORを反映します。

ColorPicker

Shape FillとJOB状態色は#040 ColorPicker Callerを利用します。Fill / RUNNING / SUCCESS / ERRORはGradient対応、Stroke/Text/Hover Effect色はSolid規則を維持します。Native color picker経路を別実装しません。

Hover Border Effect

#022 Hover Border Effectへ委譲します。Effect色・方向・速度・Spin幅・Glowを#021内で独自Animationとして再実装しません。

Animation

#117 Animationへ委譲します。#021は独自keyframe/timer/loopを所有しません。targetPart によりShape全体 / visual SVG / 主表示labelを対象にします。

Joint / 接続イメージ

#021 ShapeのPort Geometryは保持しますが、接続線・不存在終端・型不一致の描画判定は#002 Bone Jointの責務です。通常接続、IN Target不存在、OUT Target不存在、IN型不一致、OUT型不一致の5ケースを既存画面で確認します。各UIが独自線や独自色で接続状態を偽装しません。

Security / WAIT / FIFO / BLOCKED

#021 v1.0.35には独立したSecurity Testや#002 Delivery ChannelによるOUT WAIT/FIFO/BLOCKED UIはありません。存在しない責務を追加しません。JOBのIN type契約・processContent validationはRuntime固有Validationとして扱います。

Smoke / Validation

Smoke TestはRegistry、34 Shape、TIME JOB、Property、依存API、HTML Functional Class、DOC Loader / Guide、Joint接続イメージ、Class/Public API実体などを確認します。ValidationはShape固有の無効値、Port、Flow、文字行数、TIME JOB契約等を確認します。テスト期待値を書き換えてPASSにはしません。

Completion

Smoke TestとValidationが両方ALL PASSのときだけCompletion操作が可能です。ユーザーlocalhost確認と「完了」明示後だけDOC統合版を正式Completed / Frozenとして固定します。

Keyboard / Guide

DOC Guideは上部の「操作ガイド DOC-0021」から開きます。左Navigationで章を選択し、右本文をスクロールします。Esc とCloseで閉じます。Property Editorの通常キーボード操作は各HTML controlの標準操作を使用します。

Public API（高度操作）

HTML Functional Class bf-shape と混同しません。v1.0.35 Runtimeが公開する主要入口:

Class: BoneShape.Node, BoneShape.Component
Factory: createNode, attachNode, createInstance, attachInstance
Registry / rendering: load, create, destroy, list, find, output, validate
TIME JOB: setJobInput, applyJobResult, matchesSchedule, triggerSchedule
integration state: getHoverBorderEffectState, getAnimationState, getAnimationOutput, playAnimation
Guide metadata: getClassGuide

BoneShape.Nodeは既存正式Public Classで、render/mount/attach/detach/getValue/setValue/update/getOutput/getState/destroy 等を持ちます。これらをHTML Class名として列挙しません。

Error / Troubleshooting

Shapeが出ない: bone-shape.js、bone-shape-html-class.js、data/bone-shapes.json の読込を確認。
Unknown Shape TYPE: data-shape-type が34 TYPE一覧にあるか確認。
色が反映しない: appearance.enabled と#040 Caller値を確認。
TIME JOBが見えない: Shape ListのTIME JOBタブとRegistry 34件を確認。
DOCが開かない: BoneShapeDocGuide.open()、DOC RegistryのDOC-0021、DOC本文ファイルを確認。共有DOC Loader / Guideは#021から変更しません。
Joint表示が不正: #021独自線を追加せず#002 Bone Joint側の実状態を確認。

#021 Shape

bf-shape

正式ガイド DOC-0021

Bone Flow #021 Shape ガイド

このガイドについて

最初に

Shapeとは

図形を先に確認（実Shape表示）

START — 開始

PROCESS — 処理

DECISION — 条件分岐

INPUT_OUTPUT — 入出力

DATABASE — データベース

DOCUMENT — ドキュメント

TABLE_DETAIL — テーブル詳細

JOB — ジョブ

Shape List 全件対応（省略なし）

HTML Functional Class

最小HTML

HTML指定の意味

使用サンプル（コピー可能・実Shape付き）

1. PROCESSを最小HTMLで表示

2. DECISIONを条件分岐として表示

3. INPUT_OUTPUTを入出力として表示

4. FILE / JSON / XML / CSVを使い分ける

5. MULTI_DOCUMENTを複合Shapeとして使う

6. TABLE_DETAILでフィールド接続を表示

7. SCHEDULE_TRIGGERをTIME JOB起点として表示

8. JOBをSQL処理として設定

9. JOBNETを複数JOBグループとして表示

10. 縦フローへ切り替える

11. 表示率を120%へ変更

12. 後から追加したbf-shapeを自動マウント

Runtime Default / Property Editor

1. type

2. uiNo

3. theme

4. displayRate

5. appearance.enabled

6. appearance.fill

7. appearance.stroke

8. appearance.text

9. flowDirection

10. portLabelVisibility.in

11. portLabelVisibility.out

12. label

13. displayTextStyle.fontFamily

14. displayTextStyle.fontSize

15. compositeCount

16. decisionLabels.positive

17. decisionLabels.negative

18. tooltip.mode

19. tooltip.text

20. tooltip.fontFamily

21. tooltip.fontSize

22. comment.enabled

23. comment.line

24. comment.text

25. comment.fontFamily

26. comment.fontSize

27. uiState.tooltip.x / y

28. uiState.comment.bubbleX / bubbleY

29. uiState.comment.outlineIndex

30. uiState.comment.anchorRate

31. hoverBorderEffect.enabled

32. hoverBorderEffect.effect

33. hoverBorderEffect.color

34. hoverBorderEffect.direction

35. hoverBorderEffect.speed

36. hoverBorderEffect.spinWidth

37. hoverBorderEffect.spinGlow

38. animation.animationUiNo

39. animation.targetPart

40. animation.animation

41. animation.direction

42. animation.axis

43. animation.speed

44. animation.distance

45. animation.loop

46. animation.loopWaitMs

`START` — 開始

`PROCESS` — 処理

`DECISION` — 条件分岐

`INPUT_OUTPUT` — 入出力

`DATABASE` — データベース

`DOCUMENT` — ドキュメント

`TABLE_DETAIL` — テーブル詳細

`JOB` — ジョブ

1. `type`

2. `uiNo`

3. `theme`

4. `displayRate`

5. `appearance.enabled`

6. `appearance.fill`

7. `appearance.stroke`

8. `appearance.text`

9. `flowDirection`

10. `portLabelVisibility.in`

11. `portLabelVisibility.out`

12. `label`

13. `displayTextStyle.fontFamily`

14. `displayTextStyle.fontSize`

15. `compositeCount`

16. `decisionLabels.positive`

17. `decisionLabels.negative`

18. `tooltip.mode`

19. `tooltip.text`

20. `tooltip.fontFamily`

21. `tooltip.fontSize`

22. `comment.enabled`

23. `comment.line`

24. `comment.text`

25. `comment.fontFamily`

26. `comment.fontSize`

27. `uiState.tooltip.x / y`

28. `uiState.comment.bubbleX / bubbleY`

29. `uiState.comment.outlineIndex`

30. `uiState.comment.anchorRate`

31. `hoverBorderEffect.enabled`

32. `hoverBorderEffect.effect`

33. `hoverBorderEffect.color`

34. `hoverBorderEffect.direction`

35. `hoverBorderEffect.speed`

36. `hoverBorderEffect.spinWidth`

37. `hoverBorderEffect.spinGlow`

38. `animation.animationUiNo`

39. `animation.targetPart`

40. `animation.animation`

41. `animation.direction`

42. `animation.axis`

43. `animation.speed`

44. `animation.distance`

45. `animation.loop`

46. `animation.loopWaitMs`

47. `animation.respectReducedMotion`

48. `animation.autoplay`

49. `schedule.type`

50. `schedule.triggerMode`

51. `schedule.month`

52. `schedule.dayOfMonth`

53. `schedule.dayOfWeek`

54. `schedule.hour`

55. `schedule.minute`

56. `schedule.cron`

57. `schedule.text`

58. `schedule.calendar`

59. `schedule.enabled`

60. `job.processType`

61. `job.processContent`

62. `job.acceptedInputType`

63. `job.status`

64. `job.statusColors.running`

65. `job.statusColors.success`

66. `job.statusColors.error`

67. `job.scheduleText`

68. `job.enabled`

69. `job.parallel`

70. `job.input`

71. `job.result`

72. `job.returnPort`