ここにプレビューが表示されます
スイムレーン図は Mermaid に相当する記法が無いため、このツール専用の記法（.swim）で表現しています。図はブラウザ内で直接SVGとして描画しており、外部ライブラリは使いません。
swimlane
title "受注フロー"
direction LR
lane sales "営業部" #FFF9C4
phase p1 "受付"
node n1 "申込を受ける" lane=sales phase=p1 shape=start
node n2 "内容を確認" lane=sales phase=p1
n1 -> n2 "確認依頼"
lane= や phase= のような名前付き属性にしているため、後から項目を増やしても古いファイルをそのまま読み込めます。direction は LR（左から右）と TB（上から下）が指定でき、TD は TB と同じ扱いです。2行目以降のインデントは Mermaid の記法にならった見た目上の調整で、あってもなくても図の内容には影響しません。
接続の from に [*] を選ぶと開始（●）、to に選ぶと終了（◉）が、相手と同じレーン・同じフェーズに作られます。開始は接続先の手前（LRなら左／TBなら上）、終了は先（右／下）に、位置を揃えて描かれます。そのあとは普通の図形として位置や所属を変更できます。図形の「形」から直接追加することもできます。
一覧の ⠿ をドラッグすると並べ替えできます。プレビュー上の図形や矢印をクリックすると、対応する項目が編集状態になります。図形以外の場所をクリックすると編集を解除します。
スイムレーン図（業務フロー図）をGUIで組み立てるツールです。入力内容はブラウザの外に送信されません。
swimlane.js（下記）で行っています。サードパーティ製ライブラリ・外部通信ともにありません。Mermaidと同じように、自分のサイトのMarkdown記法に ```swimlane フェンスコードブロックを組み込みたいサイト管理者向けの手順です（tossie85 lab自体もこの方式で記事内に埋め込んでいます）。
marked.js や markdown-it など多くのMarkdown変換ライブラリは、既定で ```swimlane ブロックを <pre><code class="language-swimlane"> として出力します（CommonMark準拠）。ページ読み込み後に以下のスクリプトを実行すれば、それらを図に置き換えられます。
<script src="swimlane.js"></script>
<script>
document.querySelectorAll('pre code.language-swimlane').forEach(function(codeEl){
var pre = codeEl.closest('pre');
var result = Swimlane.render(codeEl.textContent);
if(result.ok){
pre.outerHTML = result.svg;
}else{
pre.textContent = '記法エラー:\n' + result.errors.join('\n');
}
});
</script>
自作のMarkdownパーサーでフェンスの言語ごとに出力先タグを変えられる場合（PHPのParsedownなど）は、<pre class="swimlane">元のコード</pre> のように直接出力し、上と同じ要領で pre.swimlane を対象に Swimlane.render() を呼ぶ方がシンプルです。
この解析・描画エンジンは swimlane.js 1ファイルに切り出してあり、ダウンロードして他のWebサイトにそのまま組み込めます（外部通信なし・依存ライブラリなし）。
<script src="swimlane.js"></script>
<div id="diagram"></div>
<script>
Swimlane.renderTo('#diagram', `swimlane
title "受注フロー"
direction LR
lane sales "営業部"
node n1 "申込を受ける" lane=sales shape=start
node n2 "内容を確認" lane=sales
n1 -> n2 "確認依頼"
`);
</script>
主なAPI：
Swimlane.renderTo(el, code)render() と同じです。Swimlane.render(code){ ok, svg, width, height, errors, state } を返します。SVG文字列を自分で使いたいときに。Swimlane.parse(code) / .generate(state)記法（.swim）はこのツールの ❓ ボタンの説明と共通です。