Swimlane Diagram Preview

VS Code の標準Markdownプレビューで、```swimlane フェンスコードブロックをその場でスイムレーン図（業務フロー図）として描画する拡張機能です。Mermaidのコードブロックが標準プレビューでそのまま図になるのと同じ感覚で使えます。

swimlane
    title "使用イメージ"
    direction LR

    lane you "あなた"
    node n1 "```swimlane を書く" lane=you shape=start
    node n2 "プレビューを開く (Ctrl+Shift+V)" lane=you
    node n3 "図が見える" lane=you shape=end

    n1 -> n2
    n2 -> n3

使い方

1. この拡張機能をインストールする
2. Markdownファイル（.md）に ```swimlane フェンスで .swim 記法のコードを書く
3. プレビュー（Ctrl+Shift+V / Cmd+Shift+V）を開くと、その場で図が描画される

​```swimlane
swimlane
    title "受注フロー"
    direction LR

    lane sales "営業部"
    node n1 "申込を受ける" lane=sales shape=start
    node n2 "内容を確認"   lane=sales

    n1 -> n2 "確認依頼"
​```

構文エラーがある場合は、図の代わりにエラー内容（何行目のどこが問題か）がプレビュー上に表示されます。

.swim 記法そのものの仕様（レーン・フェーズ・図形の種類・開始/終了記号など）は Swimlane GUI Studio の ❓ ボタンにまとまっています。手で書くのがつらい場合は、そちらのGUIで組み立てて .swim を書き出し、貼り付けて使うこともできます。

しくみ

VS Codeの markdown.markdownItPlugins 拡張ポイントを使い、標準プレビューが使っている markdown-it の fence レンダラーを横取りしています。swimlane 言語のフェンスだけを swimlane.js（外部依存ゼロの描画ライブラリ）でSVGに変換し、それ以外の言語は通常どおり（シンタックスハイライト等）に描画します。

swimlane.js はDOMに依存せず解析・レイアウト計算・SVG生成ができる作りになっているため、Webview側で追加のスクリプトを実行する必要がなく、拡張機能ホスト（Node.js）側で同期的に変換しています。

開発

npm install
npm test          # markdown-it を使った変換ロジックのテスト

VS Code上で動作確認する場合は、このフォルダを開いて F5（拡張機能開発ホストを起動）し、開いたウィンドウで .md ファイルのプレビューを表示してください。

ライセンス

MIT License. 外部通信は一切行いません。