オンラインでフローチャートを作る方法 – ステップバイステップガイド

ステップ1 – 方向を選ぶ

上から下へのフローチャートにはgraph TD、左から右へのレイアウトにはgraph LRでMermaidコードを始めます。縦長のプロセスにはtop-downが、横長のワークフローにはleft-rightが適しています。

graph TD

ステップ2 – ノードを追加する

各ノードはIDに続いて角括弧内のラベルで構成されます。IDはコネクションでノードを参照するために使用され、ラベルはダイアグラムに表示される文字です。

graph TD
    A[Start]
    B[Process data]
    C[End]

ステップ3 – 矢印でノードを繋ぐ

-->を使って一方のノードからもう一方へ矢印を引きます。パイプ文字の間にテキストを置くことで、任意の矢印にラベルを追加できます。

graph TD
    A[Start] --> B[Process data]
    B --> C{Success?}
    C -->|Yes| D[Done]
    C -->|No| E[Retry]
    E --> B

ステップ4 – 適切なノード形状を使う

Mermaidは意味を伝えるいくつかの形状をサポートしています：

[ラベル] – 矩形（プロセスステップ）

{ラベル} – ダイアモンド（意思決定 / はい・いいえ分岐）

(ラベル) – 角丸矩形（開始または終了）

[(ラベル)] – シリンダー（データベースやストレージ）

((ラベル)) – 円（接続点）

graph TD
    A(Start) --> B[Validate input]
    B --> C{Valid?}
    C -->|Yes| D[(Save to DB)]
    C -->|No| E[Show error]
    D --> F(End)

フローチャートをエクスポートする

フローチャートが完成したら、「SVGをダウンロード」をクリックして任意のドキュメントに埋め込めるクリアなベクター画像を取得するか、「PNGをダウンロード」でプレゼンテーションやWikiに貼り付けられるラスター画像を取得します。

共有リンクをコピーすることもできます。ダイアグラムコードがURLにエンコードされているため、リンクを持つ誰でもアカウントなしで同じダイアグラムを見ることができます。

フローチャートのコツ

ラベルは短く – 各ノードに1行にすると一目で読みやすくなります。

チャートが大きくなったら、subgraphブロックを使って関連するステップをグループ化します。

正常フロー（通常の流れ）から始めて、その後エラー分岐を追加します。

一貫した方向（常にTDまたは常にLR）により、混乱するレイアウトを防ぎます。