Swimlane GUI Studio

スイムレーン図（業務フロー図）を GUI で組み立てられる VS Code 拡張です。 「誰が（レーン）」「どの工程で（フェーズ）」「何をするか」を、フォームに項目を足していくだけで図にできます。 既存の .swim コードを読み込んで、続きを GUI で編集することもできます。

Web版（ブラウザだけで動く同じツール）は https://tossie85.site/tools/swimlane-gui-studio.html で公開しています。

スイムレーン図とは

レーン（横帯＝担当）とフェーズ（縦の区切り＝工程）の交点にタスクを置いて、業務の流れを整理する図です。 稟議書・要件定義書・引き継ぎ資料などで使われます。Mermaid には対応する記法が無いため、 このツール専用の記法（.swim）とレンダラー（swimlane.js）で描画しています。

使い方

インストール後、次のいずれかで開きます。

• レーン・フェーズ・図形・接続をフォームで足していくと、右にプレビュー、下に .swim コードが出ます。
• プレビュー上の図形や矢印をクリックすると、その項目が編集状態になります。
• 図は .svg または .html（単独で開ける埋め込みSVG）として保存でき、 .swim ファイルからコードを読み込めます。
• 色の指定には ↩ 戻す（ひとつ前の色に戻す）と 既定に戻す（色の指定をやめる）があります。
• ヘッダーの キャンバス でプレビューの地の色を選べます（自動 / 明るい / 暗い / 任意の色）。 「自動」はエディタのテーマに追従します。この設定は保存物には含まれません。

Markdown に貼り付ける

Markdownとしてコピー を押すと、コードを ```swimlane で囲んだ形でコピーします。

この形で図として表示するには、拡張機能「Swimlane Diagram Preview」が必要です。 これを入れると、VS Code 標準の Markdown プレビュー（Ctrl+Shift+V）で ```swimlane ブロックが図になります。 Mermaid と違い swimlane は Markdown プレビューが標準で知らない言語名なので、 入れていないとコードブロックのまま表示されます。

自分のサイトの Markdown で使いたい場合は、レンダラー swimlane.js を組み込みます （手順はツール内の ℹ️「このツールについて」にあります）。

特徴

• 外部通信なし — 解析も描画もすべてローカルで完結します（CSP で通信を遮断）。
• テーマ追従 — UI の配色はライト / ダーク / ハイコントラストに合わせて切り替わります。 図そのものの配色は、保存物の見た目が変わらないよう固定にしています。
• 往復できる記法 — lane= phase= のような名前付き属性なので、項目が増えても古いファイルをそのまま読み込めます。

ライセンス

MIT