@shibayama/pdgkit 0.1.0 → 0.1.2

package/README.md

@@ -124,79 +124,109 @@ pdgkit の主な使い方は、AI に日本語で頼んで図を作らせるこ
 
 ### AI に自然文で頼む
 
-いちばん手軽な使い方です。**コードを実行できる AI** に、最初に一度だけ「セットアップ依頼」を貼り付ければ、あとは日本語で「〜の図を描いて」と頼むだけで、図のファイルまで作ってくれます。
+pdgkit の主な使い方は、AI に日本語で頼んで図を作らせることです。**コードを実行できる AI**(ChatGPT のコードインタープリタ、Claude Code / Codex などのエージェント)なら、導入から図のファイル生成まで会話内で完結します。確実なのは次の 2 通りです。
 
-使える AI(どれか 1 つ):
+- **明示手順プロンプト(下記・推奨)** — 1 つのプロンプトに「pdgkit を使う手順」と「発明」をまとめて渡す。AI が自前で図を描いてしまうのを防げます。
+- **MCP 登録** — [MCP サーバとして](#mcp-サーバとして) を一度登録すれば、以降どの会話でも「〜を描いて」と頼むだけで pdgkit が呼ばれます(対応クライアント限定)。
 
-- **ChatGPT**(コードインタープリタが使えるもの)
-- **Claude Code / Codex** などのコーディングエージェント
-- pdgkit を登録した **Claude(MCP)** … この場合はセットアップ不要。[MCP サーバとして](#mcp-サーバとして) を参照
+> **注意**: 「図を描いて」とだけ頼むと、AI は pdgkit を使わず**自前で図を生成してしまう**ことがあります(特に ChatGPT のコードインタープリタ)。「pdgkit を使う」ことをプロンプトに含めると確実です。コードを実行できない素のチャットでの使い方は「[C. コードを実行できない素のチャット](#c-コードを実行できない素のチャット)」を参照してください。
 
-> ふつうのチャット(コードを実行できない ChatGPT / Claude)でも使えますが、その場合 AI は `.pdg` テキストを書くところまでで、図にするのは手元で行います。後述の「C. コードを実行できない素のチャット」を参照してください。
+#### 明示手順プロンプト(推奨)
 
-#### ステップ 1: 最初に一度だけ、セットアップを頼む
+次のテンプレの「発明」だけを、図にしたい内容に差し替えて貼り付けます。
 
-新しいチャットを開き、次の文をそのまま貼り付けます。pdgkit の導入(`npm install @shibayama/pdgkit`)と記法の読み込みまで AI が行います。
+```text
+pdgkit を使って特許図面を描いてください。自分で図を描かず、必ず下のコマンドを実行して、pdgkit が出力したファイルを返してください。
+
+1. npm install @shibayama/pdgkit
+2. npx @shibayama/pdgkit guide を実行し、表示された記法ガイドに従う
+3. 下の発明について .pdg を書いて fig.pdg に保存する（図種は内容から最適なものを選ぶ。私が指定したらそれに従う）
+4. npx @shibayama/pdgkit validate fig.pdg がエラーなしになるまで直す
+5. npx @shibayama/pdgkit render fig.pdg -o fig.svg（PNG なら --to png、PDF なら --to pdf）で図を作り、ダウンロードできるようにする
+
+発明:
+撮像装置に関する。本装置は、被写体を撮像して画像信号を出力する撮像部と、
+撮像部からの画像信号にノイズ低減とエッジ強調を行う画像処理部と、
+画像処理部が処理した画像データを格納する記憶部と、
+画像データを外部サーバへ送信する通信部と、これらを制御する制御部と、を備える。
+画像は撮像部から画像処理部、画像処理部から記憶部の順に処理され、
+記憶部の画像は制御部の指示で通信部を介して外部サーバへ送信される。
+```
+
+「発明」は、構成・方法・状態・やりとり・クレーム文など図にしたい内容に置き換えます(書き方は下の「頼み方の例」を参照)。図種を指定したいときは「フローチャートにして」などと一言添え、出力形式は手順 5 を `--to png` / `--to pdf` / `--to pptx`(編集可能版は `--to pptx --editable`)に変えます。
+
+#### 一度セットアップして、続けて頼む(手軽版)
+
+同じ会話で何枚も作るときは、最初に一度だけセットアップを頼み、以降は短い依頼を続けられます。ただし会話が長くなると AI が pdgkit を使うのを忘れて自前描画に戻ることがあります。そうなったら、上の明示手順プロンプトに切り替えてください。
+
+最初に一度だけ、次を貼り付けます。
 
 ```text
-これから特許図面を作ります。次の準備をしてください。
+これから特許図面を作ります。次の準備をして、以降のルールに従ってください。
 1. npm install @shibayama/pdgkit を実行する。
 2. npx @shibayama/pdgkit guide を実行し、表示された PatentDSL(.pdg)の記法に厳密に従う。
-3. 以降、私が日本語で図の内容を伝えます。あなたは .pdg を書いて fig.pdg に保存し、
-   npx @shibayama/pdgkit validate fig.pdg でエラーが無いことを確認してから、
-   npx @shibayama/pdgkit render fig.pdg（既定は SVG。指定があれば --to png / jpeg / pdf / pptx）
-   で図のファイルを作り、私がダウンロードできるようにしてください。
-図種（ブロック図・フローチャートなど）や出力形式は、私が指定しなければ
-内容から最適なものを選んで構いません。準備ができたら「準備完了」とだけ返してください。
+3. 以降この会話では、私が図を頼んだら自分で図を描かず、必ず pdgkit を使うこと。
+   .pdg を書いて fig.pdg に保存し、npx @shibayama/pdgkit validate fig.pdg でエラーが無いことを確認してから、
+   npx @shibayama/pdgkit render fig.pdg（既定は SVG。指定があれば --to png / jpeg / pdf / pptx）で図のファイルを作り、
+   実行したコマンドを短く示して、私がダウンロードできるようにすること。
+図種や出力形式は、私が指定しなければ内容から最適なものを選んで構いません。準備ができたら「準備完了」とだけ返してください。
 ```
 
-`fig.pdg` はファイルの名前です(中身は AI が書きます)。**ファイルの作成・保存・実行はすべて AI が行うので、あなたはファイル名を気にする必要はありません。** 上の文をそのまま貼り付ければ大丈夫です。
+「準備完了」と返ってきたら、作りたい図を伝えます。**各依頼の頭に「pdgkit で」と付ける**と、pdgkit 経由が確実になります(コードボックス 1 つが 1 つの依頼。コピーして送ってください)。
 
-#### ステップ 2: あとは日本語で頼むだけ
+**構成・装置（ブロック図になりやすい）** — 何が何を含み、何がどこへ流れるかを書く:
 
-「準備完了」と返ってきたら、作りたい図を言葉で伝えるだけです。図種も出力形式も、指定しなければ AI が内容から選びます。
+```text
+pdgkit で、制御装置の構成図を描いて。制御装置は CPU、メモリ、I/O インターフェースを内蔵し、I/O インターフェースが外部機器へ信号を送る。
+```
 
-構成・装置(ブロック図になりやすい):
+```text
+pdgkit で、センサ端末の構成図を描いて。検出部（温度センサと加速度センサ）、処理部（取得部と判定部）、通信部を備え、検出部から処理部、処理部から通信部の順にデータが流れ、通信部からゲートウェイへ無線送信する。日英併記で。
+```
 
 ```text
-制御装置が CPU、メモリ、I/O インターフェースを内蔵し、I/O インターフェースが外部機器へ信号を送る図を描いて
-センサ端末の構成図を描いて。検出部（温度センサと加速度センサ）、処理部（取得部と判定部）、通信部を備え、検出部→処理部→通信部の順にデータが流れ、通信部からゲートウェイへ無線送信する。日英併記で
-制御部・駆動部・センサ部・対象装置から成る制御ループの図。指令で駆動し、センサが状態を検出して制御部へフィードバック
+pdgkit で、制御ループの図を描いて。制御システムは制御部・駆動部・センサ部・対象装置から成り、制御部が指令で駆動部を動かし、駆動部が対象装置を駆動し、センサ部が状態を検出して制御部へフィードバックする。
 ```
 
-処理・方法(フローチャートになりやすい):
+**処理・方法（フローチャートになりやすい）** — 手順と分岐・ループを書く:
 
 ```text
-画像取得→前処理→特徴抽出→欠陥あり?（Yes/No）→警告出力／正常記録→終了 のフローチャートにして
-ログイン処理のフローを描いて。入力→認証成功?で分岐、失敗ならリトライ、成功ならホームへ
+pdgkit で、検査方法のフローチャートを描いて。画像取得→前処理→特徴抽出→欠陥あり? と進み、欠陥ありなら警告出力、無しなら正常記録、いずれも終了へ。
 ```
 
-状態・やりとり:
-
 ```text
-待機・動作中・エラーの状態遷移図。起動で動作中、停止で待機、異常でエラー、リセットで待機に戻る
-クライアントとサーバの、認証からリソース取得までのシーケンス図
+pdgkit で、ログイン処理のフローチャートを描いて。入力→認証成功? で分岐し、成功ならホーム画面へ、失敗なら入力へ戻って再試行する。
 ```
 
-クレーム文からの変換:
+**状態・やりとり:**
+
+```text
+pdgkit で、装置の状態遷移図を描いて。待機・動作中・エラーの3状態があり、起動で動作中、停止で待機、異常でエラー、リセットで待機に戻る。
+```
 
 ```text
-次の装置クレームを構成図にして: 撮像部と、前記撮像部が取得した画像を処理する画像処理部と、処理結果を表示する表示部と、を備える撮像装置。
-この方法クレームをフローチャートにして: 画像を取得するステップと、特徴量を抽出するステップと、欠陥の有無を判定するステップと、…を含む検査方法。
+pdgkit で、クライアントとサーバの、認証からリソース取得までのシーケンス図を描いて。認証要求→トークン応答→リソース要求→リソース応答の順。
 ```
 
-出力形式の指定(続けて頼める):
+**クレーム文からの変換** — クレーム本文をそのまま貼って図種を指定する:
 
 ```text
-さっきの図を PDF にして（出願用）
-編集できる PPTX にして
-PowerPoint のスライドにして
-PNG で出して
-日英併記で出して
-符号表（符号の説明）も Markdown で出して
+pdgkit で、次の装置クレームを構成図にして。「撮像部と、前記撮像部が取得した画像を処理する画像処理部と、処理結果を表示する表示部と、を備える撮像装置。」
 ```
 
-> うまくいかないときは、AI に「`npx @shibayama/pdgkit guide` をもう一度読んで、`npx @shibayama/pdgkit validate` のエラーが無くなるまで直して」と伝えてください。PNG / PDF / PPTX は環境により失敗することがありますが、SVG は確実に出ます。
+```text
+pdgkit で、次の方法クレームをフローチャートにして。「画像を取得するステップと、前記画像から特徴量を抽出するステップと、欠陥の有無を判定するステップと、欠陥が有る場合に警告を出力するステップと、を含む検査方法。」
+```
+
+**出力形式を指定したいとき** — 続けて一言頼むだけです（指定しなければ SVG）:
+
+- 出願用の PDF にする → 「さっきの図を PDF にして」
+- 編集できる PowerPoint にする → 「編集できる PPTX にして」
+- 画像（PNG）にする → 「PNG で出して」
+- 日英併記にする → 「日英併記で出して」
+- 符号表（符号の説明）も出す → 「符号表も Markdown で出して」
+
+> **AI が自分で図を描いてしまう**ときは、上の「明示手順プロンプト」に切り替えてください。図がうまく描けないときは、AI に「`npx @shibayama/pdgkit guide` をもう一度読んで、`npx @shibayama/pdgkit validate` のエラーが無くなるまで直して」と伝えます。PNG / PDF / PPTX は環境により失敗することがありますが、SVG は確実に出ます。
 
 ### ライブラリとして（Node / TypeScript）
 
@@ -254,26 +284,9 @@ pdgkit samples
 
 #### A. コードを実行できるチャット（推奨）
 
-ChatGPT のコードインタープリタは、2026 年初頭以降 Node.js と `npm install` に対応しています（一般的なネット接続はオフですが、パッケージのインストールは可能です）。このようなチャットでは、pdgkit を導入して図の生成・ダウンロードまでチャット内で完結できます。**記法ガイドはパッケージに同梱されているので、プロンプトに貼り付ける必要はありません**（`npx @shibayama/pdgkit guide` で読めます）。**図種（ブロック図など）も指定不要で、AI が発明内容から選びます**。次のように依頼するだけです。
-
-```text
-pdgkit を使って特許図面を描いてください。
+ChatGPT のコードインタープリタは、2026 年初頭以降 Node.js と `npm install` に対応しています（一般的なネット接続はオフですが、パッケージのインストールは可能です）。このようなチャットでは、pdgkit を導入して図の生成・ダウンロードまでチャット内で完結できます。**記法ガイドはパッケージに同梱されているので、プロンプトに貼り付ける必要はありません**（`npx @shibayama/pdgkit guide` で読めます）。**図種（ブロック図など）も指定不要で、AI が発明内容から選びます**。
 
-1. npm install @shibayama/pdgkit
-2. npx @shibayama/pdgkit guide を実行し、表示された記法ガイドに従う
-3. 下の発明について .pdg を書いて fig.pdg に保存する（図種は内容から最適なものを選ぶ。私が指定したらそれに従う）
-4. npx @shibayama/pdgkit validate fig.pdg がエラーなしになるまで直す
-5. npx @shibayama/pdgkit render fig.pdg -o fig.svg（PNG なら --to png、PDF なら --to pdf）で図を作り、
-   ダウンロードできるようにする
-
-発明:
-撮像装置に関する。本装置は、被写体を撮像して画像信号を出力する撮像部と、
-撮像部からの画像信号にノイズ低減とエッジ強調を行う画像処理部と、
-画像処理部が処理した画像データを格納する記憶部と、
-画像データを外部サーバへ送信する通信部と、これらを制御する制御部と、を備える。
-画像は撮像部から画像処理部、画像処理部から記憶部の順に処理され、
-記憶部の画像は制御部の指示で通信部を介して外部サーバへ送信される。
-```
+依頼の仕方は、上の「[AI に自然文で頼む](#ai-に自然文で頼む)」の**明示手順プロンプト**をそのまま使ってください（「発明」だけ差し替え）。「図を描いて」とだけ頼むと AI が自前で図を生成してしまうことがあるため、pdgkit を使う手順を明示するこの形が確実です。
 
 注: PNG / JPEG / PDF / PPTX はネイティブ依存（`@resvg/resvg-js`）などを使うため、コンテナ環境に依存します。確実に動くのは依存ゼロの SVG です。Node が使える環境なら全形式が動きます。
 
@@ -500,12 +513,18 @@ command = "pdgkit-mcp"
 
 #### 3. 使う
 
-あとは普通に日本語で頼むだけです。例:
+あとは普通に日本語で頼むだけです（1 つずつ送れます）。例:
+
+```text
+制御装置の構成図を描いて。制御装置は CPU、メモリ、I/O インターフェースを内蔵し、I/O インターフェースが外部機器へ信号を送る。
+```
+
+```text
+さっきの図を PNG で見せて。
+```
 
 ```text
-制御装置が CPU、メモリ、I/O インターフェースを内蔵し、I/O インターフェースが外部機器へ信号を送るブロック図を描いて
-さっきの図を PNG で見せて
-編集できる PPTX にして
+編集できる PPTX にして。
 ```
 
 Claude は内容に応じて次のツールを使い分けます（あなたが意識する必要はありません）。
@@ -655,7 +674,7 @@ src/core  純粋・依存ゼロ（PatentDSL から移植、唯一の真実源）
 
 ## 本家との忠実性
 
-- [src/core](src/core) は PatentDSL のソースをそのまま移植している（唯一の変更は、コンテンツボックス計算で再利用するための `estimateTextWidth` の `export` 追加のみ）。
+- [src/core](src/core) は PatentDSL のソースを基に移植している。本家からの変更は次の 2 点のみ: (1) コンテンツボックス計算で再利用するための `estimateTextWidth` の `export` 追加、(2) フローチャート・状態遷移図で前のランクへ戻る辺（ループ・リトライ）を側方のレーンへ回し、前進線との重なりを避けるレイアウト改良。
 - 本家のテスト（構文解析・レイアウト・レイアウト回帰・ラベル配置）を移植し、すべて合格している。
 - SVG の切り出し余白（3 単位）・表示寸法（長辺 1600px 以上）は本家の定数と一致する。
 
@@ -664,7 +683,7 @@ src/core  純粋・依存ゼロ（PatentDSL から移植、唯一の真実源）
 ```bash
 npm install
 npm run typecheck
-npm test          # vitest（コア移植 + Node 層、計 126 テスト）
+npm test          # vitest（コア移植 + Node 層、計 137 テスト）
 npm run cli -- render --sample block -o /tmp/x.svg
 npm run mcp       # MCP サーバを起動
 npm run build     # tsup で dist/（ESM + CJS + 型定義）を生成

package/dist/core.cjs

@@ -228,6 +228,8 @@ var THICK_ARROW_TERMINAL_CLEARANCE = 5.4;
 var VERTICAL_PORT_RATIO = 0.25;
 var PORT_STUB = 6;
 var MAX_ROUTE_LANES = 18;
+var LOOP_LANE_GAP = 10;
+var LOOP_LANE_STEP = 7;
 var EPS = 1e-3;
 function layout(doc) {
   switch (doc.kind) {
@@ -407,7 +409,6 @@ function layoutFlow(doc) {
   const positions = /* @__PURE__ */ new Map();
   const sortedRanks = [...byRank.keys()].sort((a, b) => a - b);
   let y = MARGIN;
-  let maxX = 0;
   for (const r of sortedRanks) {
     const lane = byRank.get(r);
     const widths = lane.map((id) => shapeOf(id) === "diamond" ? NODE_W * 1.2 : NODE_W);
@@ -419,7 +420,6 @@ function layoutFlow(doc) {
       positions.set(lane[i], { x, y, w: widths[i], h: NODE_H });
       x += widths[i] + H_GAP;
     }
-    if (x > maxX) maxX = x;
     y += NODE_H + V_GAP;
   }
   for (const id of ids) {
@@ -439,7 +439,8 @@ function layoutFlow(doc) {
     });
   }
   const edges = makeEdges(doc.edges, positions);
-  return { nodes: placed, edges, width: maxX + MARGIN, height: y + MARGIN, kind: "flow" };
+  const { width, height } = flowExtent(placed, edges);
+  return { nodes: placed, edges, width, height, kind: "flow" };
 }
 function layoutState(doc) {
   const { byRank } = computeRanks(doc);
@@ -451,7 +452,6 @@ function layoutState(doc) {
   const positions = /* @__PURE__ */ new Map();
   const sortedRanks = [...byRank.keys()].sort((a, b) => a - b);
   let y = MARGIN;
-  let maxX = 0;
   for (const r of sortedRanks) {
     const lane = byRank.get(r);
     const widths = lane.map((id) => shapeOf(id) === "circle" ? 6 : NODE_W);
@@ -463,7 +463,6 @@ function layoutState(doc) {
       positions.set(lane[i], { x, y: y + (NODE_H - heights[i]) / 2, w: widths[i], h: heights[i] });
       x += widths[i] + H_GAP;
     }
-    if (x > maxX) maxX = x;
     y += NODE_H + V_GAP;
   }
   for (const id of doc.nodes.keys()) {
@@ -483,7 +482,8 @@ function layoutState(doc) {
     });
   }
   const edges = makeEdges(doc.edges, positions);
-  return { nodes: placed, edges, width: maxX + MARGIN, height: y + MARGIN, kind: "state" };
+  const { width, height } = flowExtent(placed, edges);
+  return { nodes: placed, edges, width, height, kind: "state" };
 }
 function layoutSeq(doc) {
   const seen = /* @__PURE__ */ new Set();
@@ -602,21 +602,50 @@ function computeRanks(doc) {
   return { byRank };
 }
 function makeEdges(srcEdges, positions) {
-  return srcEdges.map((e) => {
+  const boxes = [...positions.values()];
+  const rightLimit = boxes.length ? Math.max(...boxes.map((b) => b.x + b.w)) : MARGIN;
+  const feedback = srcEdges.map((e, index) => ({ index, a: positions.get(e.from), b: positions.get(e.to) })).filter((r) => !!r.a && !!r.b && r.b.y + r.b.h <= r.a.y + EPS).sort((p, q) => feedbackSpan(p.a, p.b) - feedbackSpan(q.a, q.b));
+  const laneOf = /* @__PURE__ */ new Map();
+  feedback.forEach((r, nest) => laneOf.set(r.index, nest));
+  return srcEdges.map((e, index) => {
     const a = positions.get(e.from);
     const b = positions.get(e.to);
     if (!a || !b) {
       return { from: e.from, to: e.to, points: [], label: e.label, op: e.op };
     }
-    return {
-      from: e.from,
-      to: e.to,
-      points: orthogonalRoute(a, b),
-      label: e.label,
-      op: e.op
-    };
+    const nest = laneOf.get(index);
+    const points = nest === void 0 ? orthogonalRoute(a, b) : feedbackRoute(a, b, rightLimit + LOOP_LANE_GAP + nest * LOOP_LANE_STEP);
+    return { from: e.from, to: e.to, points, label: e.label, op: e.op };
   });
 }
+function feedbackSpan(a, b) {
+  return a.y + a.h / 2 - (b.y + b.h / 2);
+}
+function feedbackRoute(a, b, laneX) {
+  const ay = a.y + a.h / 2;
+  const by = b.y + b.h / 2;
+  return [
+    [a.x + a.w, ay],
+    [laneX, ay],
+    [laneX, by],
+    [b.x + b.w, by]
+  ];
+}
+function flowExtent(placed, edges) {
+  let maxX = MARGIN;
+  let maxY = MARGIN;
+  for (const n of placed) {
+    if (n.x + n.w > maxX) maxX = n.x + n.w;
+    if (n.y + n.h > maxY) maxY = n.y + n.h;
+  }
+  for (const e of edges) {
+    for (const [x, y] of e.points) {
+      if (x > maxX) maxX = x;
+      if (y > maxY) maxY = y;
+    }
+  }
+  return { width: maxX + MARGIN, height: maxY + MARGIN };
+}
 function hasLinearChildFlow(children, edges, childMap) {
   const childSet = new Set(children);
   const pairs = /* @__PURE__ */ new Set();

package/dist/core.js

@@ -189,6 +189,8 @@ var THICK_ARROW_TERMINAL_CLEARANCE = 5.4;
 var VERTICAL_PORT_RATIO = 0.25;
 var PORT_STUB = 6;
 var MAX_ROUTE_LANES = 18;
+var LOOP_LANE_GAP = 10;
+var LOOP_LANE_STEP = 7;
 var EPS = 1e-3;
 function layout(doc) {
   switch (doc.kind) {
@@ -368,7 +370,6 @@ function layoutFlow(doc) {
   const positions = /* @__PURE__ */ new Map();
   const sortedRanks = [...byRank.keys()].sort((a, b) => a - b);
   let y = MARGIN;
-  let maxX = 0;
   for (const r of sortedRanks) {
     const lane = byRank.get(r);
     const widths = lane.map((id) => shapeOf(id) === "diamond" ? NODE_W * 1.2 : NODE_W);
@@ -380,7 +381,6 @@ function layoutFlow(doc) {
       positions.set(lane[i], { x, y, w: widths[i], h: NODE_H });
       x += widths[i] + H_GAP;
     }
-    if (x > maxX) maxX = x;
     y += NODE_H + V_GAP;
   }
   for (const id of ids) {
@@ -400,7 +400,8 @@ function layoutFlow(doc) {
     });
   }
   const edges = makeEdges(doc.edges, positions);
-  return { nodes: placed, edges, width: maxX + MARGIN, height: y + MARGIN, kind: "flow" };
+  const { width, height } = flowExtent(placed, edges);
+  return { nodes: placed, edges, width, height, kind: "flow" };
 }
 function layoutState(doc) {
   const { byRank } = computeRanks(doc);
@@ -412,7 +413,6 @@ function layoutState(doc) {
   const positions = /* @__PURE__ */ new Map();
   const sortedRanks = [...byRank.keys()].sort((a, b) => a - b);
   let y = MARGIN;
-  let maxX = 0;
   for (const r of sortedRanks) {
     const lane = byRank.get(r);
     const widths = lane.map((id) => shapeOf(id) === "circle" ? 6 : NODE_W);
@@ -424,7 +424,6 @@ function layoutState(doc) {
       positions.set(lane[i], { x, y: y + (NODE_H - heights[i]) / 2, w: widths[i], h: heights[i] });
       x += widths[i] + H_GAP;
     }
-    if (x > maxX) maxX = x;
     y += NODE_H + V_GAP;
   }
   for (const id of doc.nodes.keys()) {
@@ -444,7 +443,8 @@ function layoutState(doc) {
     });
   }
   const edges = makeEdges(doc.edges, positions);
-  return { nodes: placed, edges, width: maxX + MARGIN, height: y + MARGIN, kind: "state" };
+  const { width, height } = flowExtent(placed, edges);
+  return { nodes: placed, edges, width, height, kind: "state" };
 }
 function layoutSeq(doc) {
   const seen = /* @__PURE__ */ new Set();
@@ -563,21 +563,50 @@ function computeRanks(doc) {
   return { byRank };
 }
 function makeEdges(srcEdges, positions) {
-  return srcEdges.map((e) => {
+  const boxes = [...positions.values()];
+  const rightLimit = boxes.length ? Math.max(...boxes.map((b) => b.x + b.w)) : MARGIN;
+  const feedback = srcEdges.map((e, index) => ({ index, a: positions.get(e.from), b: positions.get(e.to) })).filter((r) => !!r.a && !!r.b && r.b.y + r.b.h <= r.a.y + EPS).sort((p, q) => feedbackSpan(p.a, p.b) - feedbackSpan(q.a, q.b));
+  const laneOf = /* @__PURE__ */ new Map();
+  feedback.forEach((r, nest) => laneOf.set(r.index, nest));
+  return srcEdges.map((e, index) => {
     const a = positions.get(e.from);
     const b = positions.get(e.to);
     if (!a || !b) {
       return { from: e.from, to: e.to, points: [], label: e.label, op: e.op };
     }
-    return {
-      from: e.from,
-      to: e.to,
-      points: orthogonalRoute(a, b),
-      label: e.label,
-      op: e.op
-    };
+    const nest = laneOf.get(index);
+    const points = nest === void 0 ? orthogonalRoute(a, b) : feedbackRoute(a, b, rightLimit + LOOP_LANE_GAP + nest * LOOP_LANE_STEP);
+    return { from: e.from, to: e.to, points, label: e.label, op: e.op };
   });
 }
+function feedbackSpan(a, b) {
+  return a.y + a.h / 2 - (b.y + b.h / 2);
+}
+function feedbackRoute(a, b, laneX) {
+  const ay = a.y + a.h / 2;
+  const by = b.y + b.h / 2;
+  return [
+    [a.x + a.w, ay],
+    [laneX, ay],
+    [laneX, by],
+    [b.x + b.w, by]
+  ];
+}
+function flowExtent(placed, edges) {
+  let maxX = MARGIN;
+  let maxY = MARGIN;
+  for (const n of placed) {
+    if (n.x + n.w > maxX) maxX = n.x + n.w;
+    if (n.y + n.h > maxY) maxY = n.y + n.h;
+  }
+  for (const e of edges) {
+    for (const [x, y] of e.points) {
+      if (x > maxX) maxX = x;
+      if (y > maxY) maxY = y;
+    }
+  }
+  return { width: maxX + MARGIN, height: maxY + MARGIN };
+}
 function hasLinearChildFlow(children, edges, childMap) {
   const childSet = new Set(children);
   const pairs = /* @__PURE__ */ new Set();

package/dist/index.cjs

@@ -251,6 +251,8 @@ var THICK_ARROW_TERMINAL_CLEARANCE = 5.4;
 var VERTICAL_PORT_RATIO = 0.25;
 var PORT_STUB = 6;
 var MAX_ROUTE_LANES = 18;
+var LOOP_LANE_GAP = 10;
+var LOOP_LANE_STEP = 7;
 var EPS = 1e-3;
 function layout(doc) {
   switch (doc.kind) {
@@ -430,7 +432,6 @@ function layoutFlow(doc) {
   const positions = /* @__PURE__ */ new Map();
   const sortedRanks = [...byRank.keys()].sort((a, b) => a - b);
   let y = MARGIN;
-  let maxX = 0;
   for (const r of sortedRanks) {
     const lane = byRank.get(r);
     const widths = lane.map((id) => shapeOf(id) === "diamond" ? NODE_W * 1.2 : NODE_W);
@@ -442,7 +443,6 @@ function layoutFlow(doc) {
       positions.set(lane[i], { x, y, w: widths[i], h: NODE_H });
       x += widths[i] + H_GAP;
     }
-    if (x > maxX) maxX = x;
     y += NODE_H + V_GAP;
   }
   for (const id of ids) {
@@ -462,7 +462,8 @@ function layoutFlow(doc) {
     });
   }
   const edges = makeEdges(doc.edges, positions);
-  return { nodes: placed, edges, width: maxX + MARGIN, height: y + MARGIN, kind: "flow" };
+  const { width, height } = flowExtent(placed, edges);
+  return { nodes: placed, edges, width, height, kind: "flow" };
 }
 function layoutState(doc) {
   const { byRank } = computeRanks(doc);
@@ -474,7 +475,6 @@ function layoutState(doc) {
   const positions = /* @__PURE__ */ new Map();
   const sortedRanks = [...byRank.keys()].sort((a, b) => a - b);
   let y = MARGIN;
-  let maxX = 0;
   for (const r of sortedRanks) {
     const lane = byRank.get(r);
     const widths = lane.map((id) => shapeOf(id) === "circle" ? 6 : NODE_W);
@@ -486,7 +486,6 @@ function layoutState(doc) {
       positions.set(lane[i], { x, y: y + (NODE_H - heights[i]) / 2, w: widths[i], h: heights[i] });
       x += widths[i] + H_GAP;
     }
-    if (x > maxX) maxX = x;
     y += NODE_H + V_GAP;
   }
   for (const id of doc.nodes.keys()) {
@@ -506,7 +505,8 @@ function layoutState(doc) {
     });
   }
   const edges = makeEdges(doc.edges, positions);
-  return { nodes: placed, edges, width: maxX + MARGIN, height: y + MARGIN, kind: "state" };
+  const { width, height } = flowExtent(placed, edges);
+  return { nodes: placed, edges, width, height, kind: "state" };
 }
 function layoutSeq(doc) {
   const seen = /* @__PURE__ */ new Set();
@@ -625,21 +625,50 @@ function computeRanks(doc) {
   return { byRank };
 }
 function makeEdges(srcEdges, positions) {
-  return srcEdges.map((e) => {
+  const boxes = [...positions.values()];
+  const rightLimit = boxes.length ? Math.max(...boxes.map((b) => b.x + b.w)) : MARGIN;
+  const feedback = srcEdges.map((e, index) => ({ index, a: positions.get(e.from), b: positions.get(e.to) })).filter((r) => !!r.a && !!r.b && r.b.y + r.b.h <= r.a.y + EPS).sort((p, q) => feedbackSpan(p.a, p.b) - feedbackSpan(q.a, q.b));
+  const laneOf = /* @__PURE__ */ new Map();
+  feedback.forEach((r, nest) => laneOf.set(r.index, nest));
+  return srcEdges.map((e, index) => {
     const a = positions.get(e.from);
     const b = positions.get(e.to);
     if (!a || !b) {
       return { from: e.from, to: e.to, points: [], label: e.label, op: e.op };
     }
-    return {
-      from: e.from,
-      to: e.to,
-      points: orthogonalRoute(a, b),
-      label: e.label,
-      op: e.op
-    };
+    const nest = laneOf.get(index);
+    const points = nest === void 0 ? orthogonalRoute(a, b) : feedbackRoute(a, b, rightLimit + LOOP_LANE_GAP + nest * LOOP_LANE_STEP);
+    return { from: e.from, to: e.to, points, label: e.label, op: e.op };
   });
 }
+function feedbackSpan(a, b) {
+  return a.y + a.h / 2 - (b.y + b.h / 2);
+}
+function feedbackRoute(a, b, laneX) {
+  const ay = a.y + a.h / 2;
+  const by = b.y + b.h / 2;
+  return [
+    [a.x + a.w, ay],
+    [laneX, ay],
+    [laneX, by],
+    [b.x + b.w, by]
+  ];
+}
+function flowExtent(placed, edges) {
+  let maxX = MARGIN;
+  let maxY = MARGIN;
+  for (const n of placed) {
+    if (n.x + n.w > maxX) maxX = n.x + n.w;
+    if (n.y + n.h > maxY) maxY = n.y + n.h;
+  }
+  for (const e of edges) {
+    for (const [x, y] of e.points) {
+      if (x > maxX) maxX = x;
+      if (y > maxY) maxY = y;
+    }
+  }
+  return { width: maxX + MARGIN, height: maxY + MARGIN };
+}
 function hasLinearChildFlow(children, edges, childMap) {
   const childSet = new Set(children);
   const pairs = /* @__PURE__ */ new Set();
@@ -3500,7 +3529,7 @@ async function renderToPptx(source, opts = {}) {
 }
 
 // src/node/index.ts
-var VERSION = "0.1.0";
+var VERSION = "0.1.2";
 function toSvgString(source, lang = "ja") {
   return renderToSvg(source, { lang }).svg;
 }