文章6行でフローチャートが完成。Mermaid Live Editorを実際に使って分かった速さと癖

サムネイルはイメージ写真。写真の配布元：Unsplash（利用許諾）。本文の画面は実際の操作時に撮影した。

会議の流れや問い合わせ手順を図にしたいが、図形を一つずつ並べるのは面倒だ。そこでMermaid Live Editorを実際に開き、次の6行を入力した。

flowchart LR
  A[相談内容を書く] --> B{急ぎか}
  B -->|はい| C[電話で確認]
  B -->|いいえ| D[メールで送る]
  C --> E[回答を記録]
  D --> E

操作は「左へ入力、右で確認」だけだった

1. Mermaid Live Editorを開く。
2. 左上のCode欄を選び、既存の例を全選択して消す。
3. 上の6行を貼り付ける。
4. 右側へ出た図を見ながら文言や順番を直す。

flowchart LRは左から右へ流す指定だ。四角い処理は[]、判断のひし形は{}、矢印上の「はい」「いいえ」は| |で囲む。図形を選ぶより、文章の構造を直す感覚に近い。

実際に使って分かった良い点と癖

入力直後に図が更新されるので、分岐のつなぎ忘れが目で分かる。日本語もそのまま表示された。一方、横長の図は画面幅を超え、最後の「回答を記録」が右端で一部見切れた。これは図が壊れたのではなく表示倍率の問題で、右上の縮小やReset viewを使えば全体を追いやすい。

公式文書ではLRのほか、上から下のTDなども案内されている。最初から複雑な図を作るより、処理・判断・合流だけで骨組みを作り、必要な箇所だけ追加する方が速かった。

向いている用途

社内手順、問い合わせ対応、申請フロー、記事の構成案に向く。自由配置のイラストより、順番と分岐を伝える図が得意だ。コードも本文へ残せるため、後から文言を直す作業も軽い。

出典・確認先

• Mermaid公式サイト
• Flowcharts Syntax（公式）
• Mermaid Live Editor