Mermaid カタログ
konoma は Mermaid の図をすべて自分で解析し、配置し、描いています。ブラウザも
Node も外部レンダラも要りません。Markdown の ```mermaid フェンスは
端末の中で本物の絵になり、単体の .mmd ファイルは全画面で開きます。
以下の絵はすべてそのレンダラの出力です。元は
samples/mermaid.ja.md
のフェンスで、設定は出荷時の既定（ui.mermaid_theme = "dark"・ui.mermaid_curve = "basis"）。
背景は透過です — 端末では自分の背景の上に乗ります。ここでは暗い板の上に置いています。
2 つの見え方、設定は 1 行
Section titled “2 つの見え方、設定は 1 行”既定の見え方は mermaid そのものです。何も指定しなければ何も変わりません。 1 行足すと、flowchart と状態図が konoma 自身の直交ルーティングと配色に切り替わります:
[ui]mermaid_routing = "konoma-orthogonal"このモードでは辺は直角にしか曲がらず（角も丸めません）、判断のひし形は面取り矩形に
なって辺が平らな面に着地し、ランクを貫く直進辺は 1 本のまっすぐなレーンに整列します。
配色も konoma 自身のものになります — 暗いノード塗り・破線のサブグラフ枠・classDef /
style の色をノードの枠と辺とラベルへ一貫して適用（したがって ui.mermaid_theme は
このモードでは効きません）。
効くのは flowchart と stateDiagram-v2 だけです。この 2 種は下で 2 枚ずつ
（konoma-orthogonal を先に、次に既定の splines）、残り 21 種は 1 枚ずつ掲載しています
＝ルーティングはそもそも届きません。
Mermaid 関連の設定は設定リファレンス、 ズーム・パン・全画面のキーはプレビューを使い倒すを参照してください。
設定で変わる見え方
Section titled “設定で変わる見え方”図の描かれ方を変える [ui] の設定は 3 つあり、さらに図が自分のソースの中から
そのうち 1 つを上書きできます。この節の絵はどれも、このページの下にあるサンプルを
1 つだけ動かして描き直したものです。違って見えるものは、キャプションが示すものだけが
原因です。
どの図にも共通する決まりがいくつかあります。mermaid_curve を読むのは flowchart
自身の辺だけです。mermaid_curve と mermaid_theme は konoma-orthogonal では
どちらも無効です — そのモードに曲線は無く直角の区間だけがあり、配色も専用のものを
持っているためです。テーマの背景は常に透過なので、図は端末の背景に馴染みます。
01 — キー入力の flowchart
Section titled “01 — キー入力の flowchart”3 つの中でいちばん素直な図です。角丸・判定のひし形・2 本の分岐・合流だけででき ていて、基本の形がいちばんよく読めます。
mermaid_routing
Section titled “mermaid_routing”
konoma 独自のルータ。辺は 90° でしか曲がらず枠へは必ず垂直に入射し、判定ノードは面取り矩形になります。配色も konoma 独自の設計配色に切り替わります。
出荷時の既定。従来の mermaid のレイアウトで、辺は mermaid_curve が指す曲線に従います。
flowchart はヘッダの語で向きを指定します（flowchart LR / TB / RL / BT）。
配線の規則はどの向きでも同じです — RL と BT はそれぞれ LR と TB を流れの
軸に沿って鏡映しにしたもので、分岐がどちら側に出るかは変わりません。
konoma-orthogonal の設計参照 2b と 2c が同じグラフの LR 版と TB 版なのは、
まさにそのためです。
mermaid_curve
Section titled “mermaid_curve”
図側の上書き
Section titled “図側の上書き”設定を既定の basis のままにしても、図の側から別の曲線を要求できます。弱い順に、
この設定 < 図側の %%{init: {"flowchart": {"curve": "..."}}}%% ディレクティブ <
特定の辺だけを指す linkStyle <n> interpolate <curve>。どちらも
konoma-orthogonal では無効です。
mermaid_theme
Section titled “mermaid_theme”
02 — 色の flowchart
Section titled “02 — 色の flowchart”classDef / ::: / style で図が自分の色を指定しています。テーマと作者が選んだ色の
関係が見える図です — テーマは図が塗らなかった部分を塗り、作者の色はその上に残ります。
mermaid_routing
Section titled “mermaid_routing”
mermaid_curve
Section titled “mermaid_curve”
mermaid_theme
Section titled “mermaid_theme”
03 — 大きさの flowchart
Section titled “03 — 大きさの flowchart”中身の多い図で、下の曲線の一覧が 1 列なのはこの図だからです。辺がいくつものランクを またいで伸びており、13 種の曲線が実際に差を見せるのはこうした長い辺の上です。
mermaid_routing
Section titled “mermaid_routing”
mermaid_curve
Section titled “mermaid_curve”
mermaid_theme
Section titled “mermaid_theme”
04 — 状態図
Section titled “04 — 状態図”mermaid_routing は状態図にも効きます（2 枚の比較は下の
stateDiagram-v2 にあります）が、mermaid_curve
は届きません。残るのは、テーマごとの状態機械の配色と、並べる向きです。
mermaid_theme
Section titled “mermaid_theme”
状態図は本文中の direction 行で向きを指定し、書かなければ上から下です。配線の規則は
どちらでも同じです — konoma-orthogonal の設計参照 2b と 2c が同じグラフの LR 版と
TB 版なのは、まさにそのためです。
flowchart — 箱と矢印
Section titled “flowchart — 箱と矢印”いちばん使われる図種で、実際に見かける mermaid の 4 分の 3 はこれです。向きの指定
（LR）、角丸とひし形の形の違い、矢印に乗るラベルに注目してください。
Mermaid ソース
flowchart LR
K([キー入力]) --> S{どの面か}
S -->|ツリー| M[移動・開く]
S -->|プレビュー| P[スクロール・検索]
M --> R[再描画]
P --> R色 — classDef / ::: / style / linkStyle
Section titled “色 — classDef / ::: / style / linkStyle”flowchart は色で「どれが同じ仲間か」を語ります。classDef が宣言に名前を付け、
class（短縮形は :::）がノードに割り当て、style は 1 つのノードを直接塗り、
linkStyle は宣言順の添字で辺を塗ります。
Mermaid ソース
flowchart LR
F[ファイル] --> R{ルールに一致?}
R -->|画像| I[デコード]:::media
R -->|Markdown| M[ブロックモデル]:::text
R -->|なし| X[プレビュー不可]
I --> K[kitty 転送]:::media
M --> K
classDef media fill:#132a3a,stroke:#1f6feb,color:#c9d1d9
classDef text fill:#12291c,stroke:#2da44e,color:#c9d1d9
style X fill:#2d2418,stroke:#d4a017,color:#c9d1d9
linkStyle 0 stroke:#8b949e
linkStyle 1,4 stroke:#1f6feb
linkStyle 2,5 stroke:#2da44e
linkStyle 3 stroke:#d4a017大きさ — 図は必要なだけの大きさで描かれる
Section titled “大きさ — 図は必要なだけの大きさで描かれる”konoma は図を周囲の文字と同じ大きさで組み、拡大はしません。中身の多い図は 本当に横に長いので、その分だけ画面を使います — これは konoma 自身のプレビューの 振り分けで、扱える全形式と、絵が端末に届く 3 通りの経路です。
Mermaid ソース
flowchart LR
F[ファイル] --> C{設定のルール}
C -->|テキスト| T[窓読み]
C -->|コード| S[構文強調]
C -->|Markdown| MD[ブロックモデル]
C -->|CSV / TSV| TB[表]
C -->|画像| IM[デコード]
C -->|PDF| PD[ページ描画]
C -->|SVG| SV[usvg]
C -->|動画| VD[キーフレーム]
C -->|書庫| AR[一覧]
C -->|なし| NA[プレビュー不可]
MD --> MM[mermaid]
MD --> MA[数式]
MM --> RS[ラスタライズ]
MA --> RS
SV --> RS
PD --> RS
IM --> FIT[セルに合わせる]
RS --> FIT
VD --> FIT
FIT --> K{端末}
K -->|kitty| KT[圧縮転送]
K -->|sixel / iTerm2| RI[画像プロトコル]
K -->|それ以外| HB[ハーフブロック]
classDef pix fill:#132a3a,stroke:#1f6feb,color:#c9d1d9
classDef txt fill:#12291c,stroke:#2da44e,color:#c9d1d9
class IM,PD,SV,VD,MM,MA,RS,FIT,KT,RI,HB pix
class T,S,MD,TB,AR txt
style NA fill:#2d2418,stroke:#d4a017,color:#c9d1d9stateDiagram-v2 — モードと遷移
Section titled “stateDiagram-v2 — モードと遷移”konoma の UI は 2 つのモードと、その間の行き来だけでできています。[*] は開始と終了の
印です。状態の中に状態機械を入れられ、枠は入れ子から導かれます（指示ではありません）。
Mermaid ソース
stateDiagram-v2
[*] --> ツリー
ツリー --> プレビュー : Enter
プレビュー --> ツリー : q
state プレビュー {
[*] --> デコード中
デコード中 --> 表示 : 画像が届く
}
ツリー --> [*] : QclassDiagram — 型と、その持ちもの
Section titled “classDiagram — 型と、その持ちもの”クラスの箱は区画に分かれます。名前・フィールド・メソッドの順で、+/- が可視性です。
<|-- が継承、--> がただの関連です。
Mermaid ソース
classDiagram
class Preview {
+PathBuf path
+DisplayMode mode
+render(width) Lines
}
class Renderer {
+draw(source) Svg
}
class MermaidRenderer {
+DiagramKind kind
+draw(source) Svg
}
Preview --> Renderer : 委譲する
Renderer <|-- MermaidRenderermermaid_theme
Section titled “mermaid_theme”どの図種もテーマに従います。暗い板と明るい板の両方で示しています。
erDiagram — 実体と、その個数
Section titled “erDiagram — 実体と、その個数”鳥の足のような記号が要点です。|| はちょうど 1 つ、o{ は 0 個以上を表します。実体には
型と PK/FK を並べた属性表を持たせられます。
Mermaid ソース
erDiagram
TAB["タブ"] {
int index PK
string root
string cursor
}
MARK["ブックマーク"] {
string key PK
string path
}
ROOT["ルート"] {
string path PK
}
TAB ||--|| ROOT : 起点にする
TAB ||--o{ MARK : 覚えるmermaid_theme
Section titled “mermaid_theme”
sequenceDiagram — 誰が何を、どの順で
Section titled “sequenceDiagram — 誰が何を、どの順で”時間は上から下へ流れます。棒人間の登場人物、ワーカーが動いている間を示す活性化バー
（+ … deactivate）、端末ごとに分かれる alt ブロックを使っています。
Mermaid ソース
sequenceDiagram
actor U as あなた
participant K as konoma
participant W as ワーカー
U->>K: .png で Enter
K->>+W: UI とは別スレッドで復号
alt kitty graphics
W-->>K: 圧縮した RGBA
else 非対応
W-->>K: ハーフブロック
end
deactivate W
K-->>U: 全画面プレビューmermaid_theme
Section titled “mermaid_theme”
zenuml — 同じ話を、コードのように書く
Section titled “zenuml — 同じ話を、コードのように書く”ZenUML は矢印ではなく入れ子の呼び出しとしてやりとりを書きます。{ … } の中は呼ばれた
側の仕事で、if/else はプログラムそのままの読み方になります。
Mermaid ソース
zenuml
title ファイルを開く
@Actor You
You->konoma: Enter
konoma->Resolver.resolve(path) {
return kind
}
if(kind == "image") {
konoma->Decoder: 復号する
} else {
konoma->Window: 1 画面ぶん読む
}
konoma->You: 全画面プレビューmermaid_theme
Section titled “mermaid_theme”
木と board
Section titled “木と board”mindmap — 1 つの考えから枝分かれ
Section titled “mindmap — 1 つの考えから枝分かれ”字下げだけで書きます。konoma は放射状ではなく左から右へ並べます。放射状だと端末では ラベルの半分が線の反対側に来て読めなくなるからです。
Mermaid ソース
mindmap
root((konoma のプレビュー))
テキスト
Markdown
ソースコード
メディア
画像
PDF と動画
データ
CSV の表
書庫mermaid_theme
Section titled “mermaid_theme”
kanban — カードの並ぶ列
Section titled “kanban — カードの並ぶ列”字下げの 1 段目が列、2 段目がカードです。@{ … } でカードに担当・優先度・チケットを
付けられます。
Mermaid ソース
kanban
未着手
k1[sixel の色を調整する]
作業中
k2[mermaid ギャラリーを書く]@{ assigned: 'konoma', priority: 'High' }
完了
k3[レンダラの依存を外す]@{ ticket: 'v0.27.0' }mermaid_theme
Section titled “mermaid_theme”
journey — その作業が実際どう感じられたか
Section titled “journey — その作業が実際どう感じられたか”各手順に 1〜5 の点数が付き、顔として描かれます。点数のあとに関わった人が並びます。
section が 1 日を帯に区切ります。
Mermaid ソース
journey
title AI と組んで書く午前
section 読む
差分をながめる: 4: 私, AI
落ちている所を開く: 5: 私
section 直す
真因を見つける: 2: 私
テストが緑になる: 5: 私, AImermaid_theme
Section titled “mermaid_theme”
timeline — 何がいつ起きたか
Section titled “timeline — 何がいつ起きたか”左に期間、右に出来事。section で帯に分けます。1 つの期間に : 区切りで複数の出来事を
書けます。
Mermaid ソース
timeline
title プレビュー種別とリリース
section 2026 年前半
v0.4 : CSV の表 : 行の範囲選択
v0.11 : キャレット行でエディタを開く
section 2026 年後半
v0.15 : mermaid を画像として描く
v0.27 : 全図種を自前で描くmermaid_theme
Section titled “mermaid_theme”
gantt — 暦に対する棒
Section titled “gantt — 暦に対する棒”section の帯、前の棒の終わりに繋ぐ after の依存、crit タグ、棒ではなくひし形で
描かれる milestone に注目してください。
Mermaid ソース
gantt
title レンダラを出すまで
dateFormat YYYY-MM-DD
axisFormat %m/%d
section 作る
パーサ :p1, 2026-08-01, 6d
レイアウト :after p1, 5d
section 出す
監査 :crit, a1, 2026-08-12, 2d
リリース :milestone, m1, after a1, 0d
告知 :after m1, 1dmermaid_theme
Section titled “mermaid_theme”
requirementDiagram — 満たすべきことと、それを示すもの
Section titled “requirementDiagram — 満たすべきことと、それを示すもの”要件は id・本文・リスク・検証方法を持ち、element がそれを満たす／検証する側です。
Mermaid ソース
requirementDiagram
requirement 描画は止まらない {
id: 1
text: 再描画は必ず 60ms 以内に終わる
risk: high
verifymethod: test
}
element 速度テスト {
type: simulation
}
速度テスト - verifies -> 描画は止まらないmermaid_theme
Section titled “mermaid_theme”
gitGraph — 枝と合流
Section titled “gitGraph — 枝と合流”コミットがレーンに並び、branch で枝が増え、checkout で移り、merge で戻ります。
タグは対象のコミットの脇に出ます。
Mermaid ソース
gitGraph
commit id: "v0.26.5"
branch renderer
commit id: "解析"
commit id: "配置"
checkout main
merge renderer tag: "v0.27.0"mermaid_theme
Section titled “mermaid_theme”
C4Context — 人・システム・境界
Section titled “C4Context — 人・システム・境界”C4 の語彙です。Person（人）、自分たちの System、外部の System_Ext、そして自分たちの
範囲を囲む境界。関連には技術名を 2 つ目のラベルとして添えられます。
Mermaid ソース
C4Context
title AI と組むときの konoma
Person(dev, "開発者", "左で読み、右で指示する。")
Enterprise_Boundary(term, "1 つの端末") {
System(konoma, "konoma", "ツリーと全画面プレビュー。")
System(agent, "コーディング AI", "ファイルを編集する。")
}
System_Ext(editor, "エディタ", "必要なときに行を指定して開く。")
Rel(dev, konoma, "閲覧する")
Rel(agent, konoma, "配下を書き換える", "fs イベント")
Rel(konoma, editor, "委譲する", "$EDITOR")mermaid_theme
Section titled “mermaid_theme”
block-beta — 置き場所としての格子
Section titled “block-beta — 置き場所としての格子”flowchart と違い、形を決めるのは columns です。1 行に入る枡の数を指定し、:n で横に
広げ、block: の枠で枡の中にさらに格子を入れます。
Mermaid ソース
block-beta
columns 2
ui["ツリーとプレビュー"]:2
block:workers:1
columns 1
img["画像の復号"]
git["git status"]
end
cache[("キャッシュ")]
ui --> workers
workers --> cachemermaid_theme
Section titled “mermaid_theme”
architecture-beta — サービスと、線が出る辺
Section titled “architecture-beta — サービスと、線が出る辺”辺ごとにどちら側から出てどちら側に入るかを書きます（R 右・L 左・T 上・B 下）。
推測ではなく指定された絵になります。
Mermaid ソース
architecture-beta
group term(cloud)[端末]
service tree(server)[ツリー] in term
service prev(server)[プレビュー] in term
service repo(database)[git リポジトリ]
service cache(disk)[画像キャッシュ]
tree:R --> L:prev
tree:B --> T:repo
prev:B --> T:cachemermaid_theme
Section titled “mermaid_theme”
pie — 全体に対する割合
Section titled “pie — 全体に対する割合”showData を付けると、割合に加えて元の数値もラベルの脇に出ます。
Mermaid ソース
pie showData
title 全画面 1 回の再描画の内訳（ms）
"端末への転送" : 31
"画像の復号" : 12
"レイアウト" : 4
"その他" : 3mermaid_theme
Section titled “mermaid_theme”
xychart-beta — 同じ軸に棒と折れ線
Section titled “xychart-beta — 同じ軸に棒と折れ線”1 つの x 軸に 2 系列。実測を棒で、目標を折れ線で重ねています。
Mermaid ソース
xychart-beta
title "図のレイアウト時間"
x-axis [flow, state, class, er, seq]
y-axis "マイクロ秒" 0 --> 1200
bar "実測" [90, 140, 260, 300, 880]
line "目標" [1000, 1000, 1000, 1000, 1000]mermaid_theme
Section titled “mermaid_theme”
quadrantChart — 2 軸 4 象限
Section titled “quadrantChart — 2 軸 4 象限”点は [x, y] で単位正方形の中に置かれ、各象限に名前が付きます。
Mermaid ソース
quadrantChart
title 手間と需要で見たプレビュー種別
x-axis 安い --> 高い
y-axis まれ --> よくある
quadrant-1 やる価値あり
quadrant-2 すぐ効く
quadrant-3 いつか
quadrant-4 よく考える
Markdown: [0.62, 0.78]
画像: [0.8, 0.62]
CSV: [0.34, 0.3]
書庫: [0.2, 0.12]mermaid_theme
Section titled “mermaid_theme”
radar-beta — 同じ軸で複数を比べる
Section titled “radar-beta — 同じ軸で複数を比べる”軸を共有して、対象ごとに閉じた曲線を 1 本ずつ。形そのものが比較になります。
Mermaid ソース
radar-beta
title 端末にできること
axis img["画像"], vid["動画"], spd["速度"], col["色"]
curve k["kitty graphics"]{5, 5, 5, 4}
curve s["sixel"]{4, 3, 3, 4}
curve h["ハーフブロック"]{2, 2, 4, 3}
max 5
min 0mermaid_theme
Section titled “mermaid_theme”
treemap-beta — 値の大きさが面積になる入れ子の箱
Section titled “treemap-beta — 値の大きさが面積になる入れ子の箱”面積が数値です。字下げで入れ子になり、節の箱は葉の合計ぶんの大きさになります。
Mermaid ソース
treemap-beta
"src"
"preview": 21
"app": 14
"docs"
"PRD": 9
"STATUS": 5mermaid_theme
Section titled “mermaid_theme”
packet-beta — ビット位置で並ぶフィールド
Section titled “packet-beta — ビット位置で並ぶフィールド”範囲はビットの位置なので、幅の広いフィールドは本当に広く描かれます。
Mermaid ソース
packet-beta
0-7: "マジック"
8-11: "版"
12-15: "フラグ"
16-47: "本体の長さ"
48-63: "チェックサム"mermaid_theme
Section titled “mermaid_theme”
sankey-beta — 分かれても幅を保つ流れ
Section titled “sankey-beta — 分かれても幅を保つ流れ”source,target,value をカンマ区切りで書きます。流れが分かれても帯の幅は比例したままです。
Mermaid ソース
sankey-beta
リポジトリ,テキスト,62
リポジトリ,メディア,21
テキスト,Markdown プレビュー,38
テキスト,コードプレビュー,24
メディア,画像プレビュー,15
メディア,動画サムネイル,6mermaid_theme
Section titled “mermaid_theme”
描けないときは
Section titled “描けないときは”でっち上げません。konoma が知らない図種や構文エラーは、ソースをテキストとして表示します。
mermaid = "text"
Section titled “mermaid = "text"”ui.mermaid = "text" を指定すると、常に Unicode の罫線による描画になります。
グラフィックプロトコルを持たない端末で表示されるのもこれです。画像ではなく文字なので、
ここに置いてあるのはスクリーンショットではなく描画そのものです:
┌────────────┐
▸│ 移 動 ・ 開 く │────────────┐
│└────────────┘ │
╭────────────╮ ╱──────────╲───プ─レ┘ビ ュ ー ▸┌────────┐
( キ ー 入 力 )──────▸│ ど の 面 か │ ツ リ ー │ 再 描 画 │
╰────────────╯ ╲──────────╱──────┐ ▸└────────┘
│┌──────────────────┐ │
▸│ ス ク ロ ー ル ・ 検 索 │──────┘
└──────────────────┘ ┌──────────┐ ┌──────────┐ ┌────────────┐
│ あ な た │ │ konoma │ │ ワ ー カ ー │
└──────────┘ └──────────┘ └────────────┘
┆ .png で Enter ┆ ┆
──────────────────────────────▸ ┆
┆ ┆ UI と は 別 ス レ ッ ド で 復 号 ██
┆ ──────────────────────────────────────▸█
┆ ┆ ██
┆ ╔═[alt]══[kitty graphics]════════════════════════════╗
┆ ║░░░░░░┆░圧░縮░し░た░░RGBA░░░░░░░░░░░░░░░░░░░░░░░██░░░░░░║
┆ ║░░░░░░◂┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄█░░░░░░║
┆ ║░░░░░░┆░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░██░░░░░░║
┆ ╠┄[非┄対┄応┄]┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄╣
┆ ║░░░░░░┆░ハ░ー░フ░ブ░ロ░ッ░ク░░░░░░░░░░░░░░░░░░░░░░░██░░░░░░║
┆ ║░░░░░░◂┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄█░░░░░░║
┆ ║░░░░░░┆░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░┆░░░░░░░║
┆ ╚════════════════════════════════════════════════════╝
┆ 全 画 面 プ レ ビ ュ ー ┆ ┆
◂┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄ ┆
┆ ┆ ┆
┌──────────┐ ┌──────────┐ ┌────────────┐
│ あ な た │ │ konoma │ │ ワ ー カ ー │
└──────────┘ └──────────┘ └────────────┘