Mermaid フローチャートの書き方・早見表

flowchart LR
  D["手引きの下書き"] --> R{"承認済み？"}
  R -->|はい| P["手引きを公開"]
  R -->|いいえ| D

flowchart TB
  A@{ shape: sl-rect, label: "タイトルを入力" }
  B@{ shape: doc, label: "文書の下書き" }
  C@{ shape: diam, label: "完了？" }
  D@{ shape: cyl, label: "保管先" }
  A --> B --> C
  C -->|はい| D
  C -->|いいえ| A

flowchart LR
  A["構成"] -->|準備完了| B["下書き"]
  B -.-> C["レビュー"]
  C ==> D["公開"]
  A ----> D
  B o--o E["チェックリスト"]
  E x--x D
  C ~~~ E

flowchart LR
  subgraph prep ["準備"]
    direction TB
    A["構成"] --> B["下書き"]
  end
  subgraph review ["レビュー"]
    direction TB
    C["確認"] --> D["承認"]
  end
  prep --> review

flowchart LR
  A["`**手引き**の下書き`"]:::focus e1@--> B["レビュー"]
  B --> C["公開する"]
  classDef focus fill:#d3e5ff,stroke:#0070f3,color:#171717
  class B focus
  style C stroke-width:2px
  linkStyle 1 stroke:#0070f3,stroke-width:2px
  classDef edge stroke:#0070f3
  class e1 edge

---
config:
  flowchart:
    nodeSpacing: 35
    rankSpacing: 60
---
flowchart LR
  A["書く"] --> B["レビュー"] --> C["公開する"]