Mermaidでスイムレーンを描く方法
編集者： Edraw
フローチャート How-Tos
業務において、多くの【プロセス】は複数の部署が協力して完了させる必要があります。各部署の役割を明確にするために、スイムレーン図を活用するのは賢明な選択です。
部門や担当者ごとにレーンを分け、プロセスの流れを示すことで、業務の分担や情報の流れが一目で把握できるようになります。それで、業務フローの標準化や改善、チーム間のコミュニケーション強化にも役立ちます。
この記事では、人気なMermaid記法でスイムレーンを描く方法や事例について、紹介します。
1.Mermaidでスイムレーンを描く理由
1.1 従来のツールの欠点
ある販売チームがパワポで注文のスイムレーンを作成した際に、以下の問題に直面しました：
- 修正の手間：物流部門に新たに品質検査の手順が追加されると、全ての接続線を再配置しなければならなかった。
- 協力の衝突：バージョン管理が不十分で、カスタマーサポート部門は期限切れのプロセス図を使用していた。
- 印刷の問題：印刷時タイトルと内容がずれてしまう問題。
1.2 Mermaidの強み
Mermaidはテキストベースの図表ツールであり、スイムレーンの分野において次の革新的な機能を提供します：
- バージョン追跡：Gitを活用し、スイムレーンの変更履歴を可視化できます。
- コストなし：Mermaid editor は無料で使えます。
1.3 Mermaidの弱み
しかし、Mermaidを使用してスイムレーンを描くことにも欠点があります。例えば、下の図のように「スイムレーン」を完全に整然と配置することができませんが、それでも「プロセス」と「部署」を同時に1枚の図に表示することは可能です。また、コードを基にした作図方法ですので、習得するには時間がかかります。
スイムレーンのテンプレート
コードに詳しい方にはおすすめですが、習得が面倒だと思った方には、テンプレートや素材をドラッグアンドドロップしてスイムレーンを作成するツールがおすすめです。例えば、EdrawMax、Visioなど人気な作図ソフトがあります。
2.Mermaidでスイムレーンを描く方法
2.1 記述方法の基本
flowchart LR
subgraph 部署1
A[Step1]
end
subgraph 部署2
B[Step2]
end
subgraph 部署3
subgraph 部署4
C[Step3]
end
subgraph 部署5
D[Step4]
end
end
A --> B --> C
D --> B
①最初に flowchart LR を使用して、図の種類をフローチャートとして宣言し、全体の流れを 左から右（LR👉left→right） に設定します。最後に end を記述してサブグラフを閉じます。
②ノード（処理ステップ）は以下のように定義します。
subgraph 部署1 A[Step] End
要注意：subgraph とその名称の間には半角スペースが必要です。また、階層構造に応じて適切にインデントを入れることで、読みやすいコードになります。
③各ノードは --> を使って接続し、処理の流れを示します。
2.2 さらなる仕様の設定
flowchart LR subgraph 部署1 A[Step1] style A fill:#e6f3ff end subgraph 部署2 B[Step2] style B fill:#fffbe6 end A --> |線に文字を追加|B style 部署1 stroke:#1890ff style 部署2 stroke:#faad14
① style 指令を使用して、サブグラフの背景色や枠線の色を変更できます。
② 接続線のスタイルは以下のように設定できます：
-.-> ：破線（点線）
==> ：太線の矢印
③ 接続線に説明を追加するには、以下のように |説明テキスト| を使用します。
A -->|処理A| B
B -.->|条件分岐| C
C ==> D
これにより、矢印の途中に説明を表示できます。
2.3Mermaid Editorの導入
スイムレーン図のコードを正しく作成した後、エディターを使用して画像として表示する必要があります。以下、おススメのMermaid Editorを紹介します。
- Mermaid Live Editor
- Markdown Preview Enhanced (Vscodeのプラグイン)
- EdrawMax（ドラッグアンドドロップ式の作図にも対応）
3.Mermaid記法で作成されたスイムレーンの例2選
3.1 医療診察フロー
デザインするポイント：
① 各診療科の明確な区分
- 救急科、放射線科、心臓内科を subgraphとして明確に区別させる
- 診療プロセスごとに異なる色（赤・青・緑）を設定し、視覚的に分かりやすく整理する
② 診療の流れを直感的に可視化
- 緊急対応の流れを 左から右へ（LR方向）に配置し、一目で診療の進行を把握できるようにデザインする
- 循環フロー（B → C → D → E → B）を用いて、検査・診断・治療のサイクルが繰り返されることを表現する
3.2 経費に落ちむフロー
デザインするポイント：
①部門ごとの明確な区分
- 経理部、総務部、申請者を subgraphとして分け、それぞれの責任範囲を明示する
②経費精算プロセスの可視化
- 申請から承認、支払いまでの流れを 左から右へ（LR方向） に整理する
- 承認プロセスの フィードバックループ を設け、不備があれば申請者に戻る仕組みを表現する
4.よくある質問
Q1.Mermaidでスイムレーン図をカスタマイズできますか？
A1.Mermaid自体には細かい装飾の機能は少ないですが、CSSを適用することでカスタマイズ可能です。また、SVGとしてエクスポートし、後から編集する方法もあります。
Q2.Mermaid以外にスイムレーンを簡単に描けるツールはありますか？
A2.もし専用のスイムレーン機能が必要なら、以下のツールもおすすめです。
EdrawMax：豊富なテンプレートとカスタマイズ性の高さが特徴。
Draw.io（diagrams.net）：ドラッグ＆ドロップで直感的に作成可能。
Microsoft Visio：ビジネス向けの詳細なスイムレーン図を作成できる。
Q3.Mermaidで条件分岐のあるスイムレーン図を作成できますか？
A3.はい、【{ }】を使って、条件分岐(ひし形)を表現することが可能です。
Q4.Mermaidで作成したスイムレーン図をPowerPointに挿入できますか？
A4.はい、Mermaid Live Editorなどを使ってSVGやPNG形式でエクスポートし、それをPowerPointに貼り付けることができます。SVG形式なら拡大しても劣化せず、編集もしやすいのでおすすめです。
関連記事