← 所有版型

鱼骨图 <Fishbone />

右边是鱼头写问题，鱼骨上下交替伸出 4 或 6 根，每根一个原因类别和 1–3 条具体原因。骨头斜向鱼头，和脊柱相接。

版型與風格的說明目前僅提供簡體中文。

分組
分析 · 一个问题的成因
元件
Fishbone · #fishbone

適合

  • 排查问题、复盘事故
  • 原因能归成 4–6 类

不適合

  • 原因有层层因果：用 IssueTree
  • 少于 4 类

內容上限

1problem ≤ 10 字
2bones 4 或 6 根：label ≤ 6 字，causes 1–3 条各 ≤ 12 字

欄位

欄位型別
kicker · 必填string小节名，2–8 字
title · 必填string | string[]标题；数组手动断行
leadstring一两句导语，≤ 60 字
sourcestring事实出处
problem · 必填string鱼头
bones · 必填{ label, causes }[]上下交替

範例程式碼

<Fishbone kicker="排查" title="…" problem="页面看起来乱" bones={[{ label: '文字', causes: ['…'] }, …]} />