メインコンテンツへスキップ

Mermaid 11.15.0

Mermaid 四象限図の書き方・早見表

四象限図は要素を二つの正規化した尺度で配置します。合計に対する割合には円グラフ、日付のある作業計画にはGanttを使います。

Mermaidエディターで作成 →

クイックスタート

座標は0から1です。Xは右、Yは上へ増えます。

Mermaid
エディターで開く → 
quadrantChart
  title 編集の優先順位
  x-axis 低い工数 --> 高い工数
  y-axis 低い価値 --> 高い価値
  quadrant-1 計画
  quadrant-2 先に実行
  quadrant-3 延期
  quadrant-4 再検討
  リンク修正: [0.2, 0.8]
  手引きの改稿: [0.8, 0.7]
  見た目の変更: [0.6, 0.2]

読み込み中…

構文リファレンス

構文リファレンス
構文意味
quadrantChart / title Text図と任意のタイトルを宣言します。
x-axis Left --> Right / x-axis Left横軸の両端、または左端だけを表示します。
y-axis Bottom --> Top / y-axis Bottom縦軸の両端、または下端だけを表示します。
quadrant-1 / quadrant-2 / quadrant-3 / quadrant-41は右上、2は左上、3は左下、4は右下です。
Name: [0.25, 0.75]x,yを両端を含む0–1に正規化します。
radius: 8 / color: #0070f3 / stroke-color: #171717 / stroke-width: 2px点のスタイルです。線色には見える線幅も必要です。
classDef focus color: #0070f3 / Name:::focus: [x, y]再利用するクラスです。直接指定がクラスより、クラスがテーマより優先されます。
config.quadrantChart.chartWidth / chartHeight / pointRadius / pointTextPadding寸法、半径、ラベルとの距離を設定します。
quadrantPadding / quadrantTextTopPadding / quadrantLabelFontSize / quadrantInternalBorderStrokeWidth / quadrantExternalBorderStrokeWidth象限の余白、文字位置、境界の幅を設定します。
xAxisLabelPadding / xAxisLabelFontSize / xAxisPosition / yAxisLabelPadding / yAxisLabelFontSize / yAxisPosition軸を設定します。点がある場合、横軸は下に表示されます。
titleFontSize / titlePadding / pointTextPadding / pointLabelFontSizeタイトルや点の文字の大きさと間隔を設定します。
quadrant1Fill…quadrant4Fill / quadrant1TextFill…quadrant4TextFill象限の背景と文字のテーマ色です。
quadrantPointFill / quadrantPointTextFill点、文字、枠線の既定のテーマ色です。
quadrantXAxisTextFill / quadrantYAxisTextFill / quadrantInternalBorderStrokeFill / quadrantExternalBorderStrokeFill / quadrantTitleFill軸、境界、タイトルのテーマ色です。
%% / accTitle: / accDescr:コメントとアクセシビリティ用の説明です。

軸と象限の番号

Yは下から上です。象限番号は右上から反時計回りに進みます。ラベルが一つでも座標の範囲は変わりません。

Mermaid
エディターで開く → 
quadrantChart
  title 二つの尺度
  x-axis 工数
  y-axis 価値
  quadrant-1 右上
  quadrant-2 左上
  quadrant-3 左下
  quadrant-4 右下
  選択肢: [0.3, 0.7]

読み込み中…

座標と点のスタイル

入力前に数値を正規化します。radiusはピクセル単位です。面積で第三の尺度を表すなら意味を説明しましょう。

Mermaid
エディターで開く → 
quadrantChart
  title 選んだ作業
  x-axis 低い --> 高い
  y-axis 低い --> 高い
  下書き: [0.25, 0.65] radius: 7, color: #0070f3, stroke-color: #171717, stroke-width: 2px
  修正: [0.7, 0.4] radius: 5

読み込み中…

点のクラス

名前の後、座標の前に:::を置きます。直接指定、クラス、テーマの順で優先されます。線色だけでは輪郭は見えません。

Mermaid
エディターで開く → 
quadrantChart
  title レビュー候補
  x-axis 低い工数 --> 高い工数
  y-axis 低い価値 --> 高い価値
  リンク:::focus: [0.2, 0.8]
  改稿:::focus: [0.8, 0.7]
  classDef focus color: #0070f3, radius: 6, stroke-color: #171717, stroke-width: 2px

読み込み中…

寸法とテーマ

形はquadrantChart、色はthemeVariablesで設定します。文字が密集する場合は図を大きくします。pointTextPaddingだけですべての重なりは防げません。

Mermaid
エディターで開く → 
---
config:
  theme: base
  quadrantChart:
    chartWidth: 420
    chartHeight: 360
    pointRadius: 6
    pointTextPadding: 8
  themeVariables:
    quadrant1Fill: "#d3e5ff"
    quadrant2Fill: "#f5f5f5"
    quadrantPointFill: "#0070f3"
---
quadrantChart
  title 計画した作業
  x-axis 工数
  y-axis 価値
  手引き: [0.65, 0.8]

読み込み中…

よくある間違い

百分率をそのまま座標にする

80は入力前に0.8へ変換します。

誤った構文（下に修正例があります）

quadrantChart
  手引き: [80, 60]

縦軸を逆に読む

y-axisの最初は下側のラベルです。quadrant-1は右上です。

制約

  • 範囲は0–1です。Mermaidは入力値を正規化しません。
  • 点のラベルが重なる場合があります。
  • 点をつなぐ矢印や時間軸はありません。

よくある質問 (FAQ)

象限1はどこ？
右上です。2は左上、3は左下、4は右下です。
0から100の値を使える？
使えません。百分率は100で割って0–1にします。
点ごとの見た目を変えられる？
radius、color、stroke-color、stroke-widthや:::のクラスを使えます。