mdmark

記法

印と記法の一覧（書き方・引数・印に対応しない表示での見え方）

文書に書いて、表・注意書き・タブなどの表示を付ける書き方の一覧。 どれも 文書を描く で描いた文書に効く。

印は HTML コメントで書く。 1 か所に付ける印は <!-- 名前: 引数 -->、範囲を持つ印は <!-- 名前: 引数 --> 〜 <!-- /名前 --> で囲む。 引数の無い印はコロンを省いて <!-- 名前 --> と書ける。 引数は空白で区切り、種類・+機能・-機能・キー=値・closed・open を書ける。

一覧

名前 書き方 説明
表 <!-- table: 種類 +機能 -機能 キー=値 closed --> 〜 <!-- /table --> 表に並べ替え・ピン止め・絞り込み・件数・列の表示の切り替え・集計の行・コピー・行へのリンクと折り畳みを付ける
注意書き 引用の 1 行目の [!NOTE] 引用を種類ごとの題・色・アイコンを持つ枠にする
タブ <!-- tabs: group=名前 --> 〜 <!-- /tabs --> 見出しで区切った範囲をタブで切り替えて見せ、同じ組のタブの選択を揃えて覚える
ステップ <!-- steps --> 〜 <!-- /steps --> 番号付きリストを手順に見せる
ファイルツリー 言語 tree のコードブロック 罫線で書いたフォルダ構成を入れ子のツリーにする
バッジ 行内のコードの頭の badge\: 行内のコードを札にする
コードブロックの飾り コードブロックの直前の <!-- code: title=題 lines highlight=行,… --> と、コードの行末の [!code ++]・[!code --]・[!code highlight]。コードブロックの言語（ts・yaml など） コードブロックに題・行番号・行の強調を付け、行末の印で行を足した行・消した行・強調に分け、言語に応じて色分けする
目次 <!-- toc --> h2〜h3 の見出しの目次を置く
見出しのアンカー なし（見出しに付く） 見出しに ID と、その ID へのリンクを付ける
節の開閉 見出しの直後の <!-- section: closed --> 見出しの節を見出しから開閉する
行の詳細 表の直後の <!-- row-detail: 行の位置 --> 〜 <!-- /row-detail --> 表の行の下に詳細を開閉して出す
図と表の番号 <!-- fig: ID --> 図と表に通し番号を付け、リンクの文字を番号にする
用語集の表 <!-- glossary: term=列名 meaning=列名 aliases=列名 --> 〜 <!-- /glossary --> 表の用語・意味・別名の列から用語を入れ、本文の用語にツールチップを付ける
ビュー <!-- view: group=列名 default=board\|table filter=列名:種類,… icons=値:アイコンの名前,… --> 〜 <!-- /view --> 範囲の最初の表を、ボード表示と表形式を切り替えるビューにし、表形式を列で絞り込む
図の部品 <!-- flow -->・<!-- sequence -->・<!-- chart -->・<!-- param --> 〜 閉じの印 範囲の json のコードブロックの定義から、フロー図・シーケンス図・グラフ・操作できる部品を描く
埋め込んだ HTML <!-- html --> 〜 <!-- /html --> 範囲の html のコードブロックを、コードではなくその場の HTML として描き、中の図の部品の custom element を図にする
ヒント 埋め込んだ HTML の要素の data-hint 要素の文をツールチップで出す
拡張の印 <!-- 名前: 引数 --> 使う側が足した印を描く
書き方の警告 なし（読めない指定の箇所に出る） 読めない指定とその直し方を知らせる

表

表に、種類ごとの並べ替え・ピン止め・絞り込みと折り畳みを付ける。 機能の名前は table（設定）。 手順は 表に機能を付ける。

書き方

<!-- table: data filter=名前,更新日:date closed -->

| 名前 | 値 | 更新日 |
| --- | --- | --- |
| りんご | 10 | 2026-10-01 |
| みかん | 2 | 2026-10-02 |

<!-- /table -->

印で囲んだ範囲の表すべてに当たる。 囲まない表は既定の種類で描く。

引数

引数 説明
種類 data か plain。省くと既定の種類
+機能 / -機能 種類の機能に足す・外す。機能は sort（並べ替え）・pin（ピン止め）・filter（絞り込み）・count（件数の表示）・columns（列の表示の切り替え）・total（集計の行）・copy（表のコピー）・rowlink（行へのリンク）
filter=列名:種類,… 絞り込みを付ける列と種類。列名は表の見出しの文字で、複数の列はコンマで区切る。種類は select・text・date で、省くと select
hide=列名,… 最初から隠す列。+columns を書いた表にだけ当たる。先頭の列は隠せない
total=列名:計算,… 集計の行で集計する列と計算。+total を書いた表にだけ当たる。計算は sum（合計）・avg（平均）・count（空でないセルの数）
closed / open 表を折り畳みに入れ、既定で閉じる・開く。折り畳みの見出しは 表を開く

種類ごとの機能は次のとおり。

種類 付く機能
既定 ピン止め
data 並べ替え・ピン止め・絞り込み
plain なし。外側の枠・縦の罫線・面を外す

count・columns・total・copy・rowlink はどの種類の既定にも入らず、+機能 を書いた表にだけ付く。

機能の動きは次のとおり。

機能 動き
並べ替え 列の見出しを押すたびに、昇順・降順・元の並びを繰り返す。数値だけの列は数の大きさ、それ以外は文字の順で並べる
ピン止め 表が幅からはみ出すときだけ、各列の見出しにボタンを出す。押した列までを表の左端に留め、押し直すと外す
絞り込み filter= で指定した列の見出しにだけボタンを出す。押すと絞り込みのドロワーが開き、外を押すか Esc で閉じる。列ごとの絞り込みは重ねて当たる
件数の表示 表の上に {表示している行の数} / {全ての行の数} 件 を出す。絞り込みで行が減ると表示している行の数が変わる
列の表示の切り替え 表の上の 列の表示 のボタンで、列名のチェックボックスを並べたメニューを開き、列ごとに表示・非表示を切り替える。hide= の列は最初から隠す。先頭の列のチェックボックスは外せず、メニューに 先頭の列は隠せません を出す。「既定に戻す」で hide= の状態に戻す
集計の行 total= の列を表の末尾の行で集計する。題は計算ごとに 合計・平均・個数。集計するのは表示している行で、絞り込みに合わせて計算し直し、並べ替えでは動かない。sum・avg は数として読めないセルを除く
表のコピー 表の上の 表をコピー のボタンで、見出しの行と表示している行の、表示している列を、セルをタブで、行を改行で区切ったテキスト（TSV）にしてクリップボードへ写す。写せたらボタンが コピーしました、写せなかったら コピーできませんでした になる
行へのリンク 各行の先頭のセルに、その行を指す #ID のリンクを置く。URL の #ID が行を指すとき、その行へ移って強調する。閉じた表・閉じた節の中の行は開いてから、絞り込みで隠れた行はその表の絞り込みを外してから移る

行へのリンクの #ID は、先頭の列の文字から見出しのアンカーと同じ規則で作り、同じ文書の中で重なれば -1・-2 を付ける。

絞り込みの種類は次のとおり。

種類 絞り方
select 値をチェックボックスで選ぶ。候補を検索できる
text 入れた文字を含む行に絞る
date 開始日と終了日の期間に絞る。日付として読めないセルの行は、期間を指定すると合わない

見出し行は面の色で本文の行と分け、表の中で縦にスクロールしても表の上端に留める。 本文の行は地の色のままで、表の外側は角丸の 1px の枠で囲む。 表の高さの上限は --mdmark-table-max-height（テーマの CSS 変数）。

印に対応しない表示

印は HTML コメントのため見えず、表は普通の表として読める。

注意書き

引用を、種類ごとの題・色・アイコンを持つ枠にする。 枠の面は種類の色の薄い色、枠の線は淡い色になる（テーマの CSS 変数）。 機能の名前は callout。 手順は 本文を部品で組む。

書き方

> [!WARNING]
> 守らないと壊れる内容を書く。

> [!NOTE]-
> 閉じた状態で始める補足を書く。

引数

書き方 題
[!NOTE] 補足
[!TIP] ヒント
[!IMPORTANT] 重要
[!WARNING] 警告
[!CAUTION] 注意

引用の 1 行目に書く。 [!NOTE]- のように末尾に - を付けると、題だけを出す閉じた折り畳みにする。 知らない種類は NOTE として出す。 種類は題の文字でも分かる。

印に対応しない表示

印ではない書き方のため、引用のまま読める。 引用の中に [!NOTE] などの文字が残る。

タブ

範囲を、最初に出る見出しの階層で区切り、見出しの文字をタブ名にしたタブで切り替えて見せる。 機能の名前は tabs。 手順は 本文を部品で組む。

書き方

<!-- tabs: group=os -->

### macOS

macOS の手順。

### Windows

Windows の手順。

<!-- /tabs -->

引数

引数 説明
group=名前 タブの組の名前。同じページで同じ組のタブ群は、選んだタブ名を揃え、読む人が選んだタブ名を覚える。省くと組を持たないタブ群になる

範囲の中で最初に出る見出しの階層で区切り、その見出しの文字がタブ名になる。 タブ名にした見出しは、本文の見出しとして残らない。 組を持たないタブ群は、描いた直後に最初のタブを選ぶ。 組を持つタブ群は、描いた直後に覚えたタブ名のタブを選び、覚えていないかそのタブ名が無いときは最初のタブを選ぶ。 タブは押すか、フォーカスがあるときの左右の矢印・Home・End で選ぶ。

組を持つタブ群の動きは次のとおり。

動き 内容
揃える 読む人がタブを選ぶと、同じページの同じ組のタブ群のうち、同じタブ名を持つものを同じタブ名へ切り替える。そのタブ名を持たないタブ群は今の選択のまま
覚える 読む人が押すかキーで選んだタブ名を、組ごとに localStorage のキー mdmark-tabs:{組の名前} へ残す。描いたときの選択と、揃えて切り替わった選択は残さない。読み直しや update で描き直したときも、覚えたタブ名で選ぶ

localStorage を取り出す・読み書きするときに例外が出ると、残さず・読まずに、揃える動きと切り替えを続ける。 値の無い group= は組を持たないタブ群にし、group= 以外のキーと キー=値 の形でない指定は当てずに、どれも 書き方の警告 を出す。

印に対応しない表示

印は見えず、見出しと本文が順に並ぶ。

ステップ

番号付きリストを、番号と項目をつなぐ線を持つ手順に見せる。 機能の名前は steps。 手順は 本文を部品で組む。

書き方

<!-- steps -->

1. 依存を入れる。
2. ビルドする。

<!-- /steps -->

引数

なし。 範囲の最初の番号付きリストを手順にする。 項目の中の入れ子の番号付きリストは手順にしない。

印に対応しない表示

印は見えず、普通の番号付きリストとして読める。

ファイルツリー

罫線で書いたフォルダ構成を、フォルダとファイルの入れ子のツリーにする。 機能の名前は tree。 手順は 本文を部品で組む。

書き方

```tree
mdmark/
├── src/
│   └── index.ts
└── package.json
```

引数

なし。 言語 tree のコードブロックに、├──・└──・│ の罫線で書く。 名前の末尾が / の項目か、子を持つ項目をフォルダにし、それ以外をファイルにする。

印に対応しない表示

罫線で書いたコードブロックとして読める。

バッジ

頭に badge\: を付けた行内のコードを、頭を外した文言の札にする。 機能の名前は badge。 手順は 本文を部品で組む。

書き方

この版は `badge:v0.1.0` です。

引数

なし。 頭の後ろの文言が札の文言になる。 札にせず頭ごと見せるときは、頭の : の前に \ を入れて打ち消す。

`badge\:v0.1.0`

打ち消した行内のコードは、\ を外したコードのまま出す。

印に対応しない表示

頭が付いた行内のコードとして読める。

コードブロックの飾り

コードブロックに、題・行番号・行の強調を付ける。 行末の印で、行を足した行・消した行・強調に分ける。 言語を書いたコードブロックは、言語に応じて色分けする。 機能の名前は code（設定）。 色分けの機能の名前は syntax（設定）。 手順は 本文を部品で組む。

書き方

題・行番号・行の強調は、コードブロックの直前の印に書く。

<!-- code: title=app.ts lines highlight=2,4-6 -->

```ts
import { mount } from "mdmark";
const doc = await fetch("/README.md");
mount(document.querySelector("#doc"), await doc.text());
```

足した行・消した行・強調は、コードの行末の行コメントに印を書く。

```ts
let count = 0; // [\!code --]
let count = 1; // [\!code ++]
count += 1; // 数える [\!code highlight]
```

色分けは、コードブロックの言語を書くだけで付く。 印は要らない。

```yaml
name: mdmark # 名前
version: 1
```

引数

コードブロックの印の直後に、コードブロックを置く。 引数は空白で区切って書く。

引数 説明
title=題 コードブロックの上に出す題。ファイル名などを書く。引数は空白で区切るため、題に空白は書けない
lines 各行の左に、1 から始まる行番号を出す
highlight=行,… 強調する行。2・4-6 のように、行の番号と範囲をコンマで並べる。行の番号はコードブロックの 1 行目が 1

title=My App.ts と書くと、題は My になり、空白の後ろの App.ts は使えない指定として 書き方の警告 を出す。

コードの行の印は次のとおり。

印 行の見え方
[!code ++] 足した行。足した行の色と、行頭の + で分ける
[!code --] 消した行。消した行の色と、行頭の - で分ける
[!code highlight] 強調する行。強調の色で分ける

印は行末の行コメントに書く。 印を外した後の行末の空白も外す。 行コメントが印だけのときは、印の直前の行コメントの頭（//・#・--・;・<!-- 〜 -->・/* 〜 */）も外す。 行コメントに印のほかの文字があるときは、その文字を残す。

書いた行 出る行
let count = 1; // [!code ++] let count = 1;
count += 1; // 数える [!code highlight] count += 1; // 数える

印そのものを本文で見せるときは、[ の後ろに \ を入れて打ち消す（[\!code ++]）。 打ち消した印は行の種類にせず、\ を外した文字のまま出す。

色分けする言語は、コードブロックの情報文字列の最初の語で決める。 語は大文字と小文字を区別しない。

言語 情報文字列の語
TypeScript typescript・ts・tsx
JavaScript javascript・js・jsx・mjs・cjs
JSON json
YAML yaml・yml
Python python・py
Bash bash・sh・shell・zsh
HTML html・xml
CSS css
Markdown markdown・md
SQL sql

言語の無いコードブロックと、この表に無い言語（text など）のコードブロックは、色分けせずに描く。

見え方は次のとおり。

項目 内容
題 コードブロックの枠の上の帯に、ファイルのアイコンと並べて出す。長い題は帯の中で折り返す
行番号 各行の左に出す。2 桁以上の行数でも桁を揃える
色以外の見分け 強調した行・足した行・消した行は、色に加えて行の左端に 2px の線を引く。足した行・消した行は行頭に +・- も出す
印の無い行 足した行か消した行を持つコードブロックでは、印の無い行も +・- の幅を空けて、文字の頭を揃える
写す中身 行番号と行頭の +・- は、文字を選んで写す中身に入れない
横に長い行 ブロックの中で横にスクロールし、行の色は最も長い行の右端まで敷く
色 強調は --mdmark-color-code-highlight-bg・--mdmark-color-code-highlight-line、足した行・消した行は --mdmark-color-diff-add-*・--mdmark-color-diff-del-*（テーマの CSS 変数）
色分け キーワード・文字列・数値・型・名前・コメントの 6 種類を色で分け、変数名・引数・記号は本文の色のまま出す。コメントは斜体でも示す。題・行番号・行の種類を持つコードブロックも、行の分け方と行番号・行頭の +・- を保ったまま、行の中身を色分けする。文字を選んで写した中身は、色分けの前と同じ文字
色分けの色 --mdmark-color-syntax-keyword・--mdmark-color-syntax-string・--mdmark-color-syntax-number・--mdmark-color-syntax-type・--mdmark-color-syntax-name・--mdmark-color-syntax-comment。ライトとダークの両方を持つ（テーマの CSS 変数）
色分けの読み込み 色分けのライブラリ（highlight.js）は配布物に含めない。色分けする言語のコードブロックがある文書でだけ、バージョンを固定した URL から本体と使う言語の分を読み、描いた後に色を付ける。読み込み先は設定の syntax.url（設定）
色分けを読めないとき 本体を読めないときは全てのコードブロックを、言語の分を読めないときはその言語のコードブロックを、色分けせずに残す。コードは欠けず、知らせの枠は出さず、読めなかった URL をブラウザのコンソールに出す
書き出した HTML 文書が使う言語の分だけを埋め、外へ要求せずに色分けする（文書を書き出す）
render 色分けしない。色分けは mount が描いた後に付ける
印刷 題・行番号・強調・足した行・消した行・色分けの色と +・- をそのまま出す（印刷する）

次のコードブロックには、題・行番号・行の種類も色分けも当てない。

文書に書いた生の HTML の pre・code は、language-* の class を持っていても色分けしない。

題も行番号も行の種類も持たず、色分けの対象でもないコードブロックは、今までどおりに描く。

code をオフにした文書では、印を取り除いて、題・行番号・行の強調を付けない。 コードの行の印は、書いた文字のまま出す。

syntax をオフにした文書では、色分けのライブラリを読まず、色分けしない。 code と syntax は別々にオン・オフできる。

印に対応しない表示

コードブロックの印は HTML コメントのため見えず、普通のコードブロックとして読める。 コードの行の印は、行末の行コメントとして読める。

目次

印の場所に、h2〜h3 の見出しを階層どおりに入れ子にした目次を置く。 機能の名前は toc。 手順は 本文を部品で組む。

書き方

<!-- toc -->

引数

なし。 各項目は、その見出しの ID へのリンクになる。 h4 以降の見出しは載せない。

印に対応しない表示

印は見えず、何も出ない。

見出しのアンカー

見出しに GitHub と同じ規則の ID と、その ID へのリンクを付ける。 機能の名前は anchors。

書き方

印は無い。 全ての見出しに付く。

引数

なし。 見出しの文字から ID を作り、同じ ID の 2 つ目からは -1・-2 を付ける。

見出し ID
Hello, World! hello-world
使い方 使い方
2 つ目の 使い方 使い方-1

見出しの ID は、anchors がオフでも付く。 オンのときだけ、見出しの中に ID へのリンクを付ける。 リンクの読み上げの名前は 「{見出しの文字}」へのリンク。

印に対応しない表示

印は無く、普通の見出しとして読める。

節の開閉

見出し（h2〜h4）の節を、見出しから開閉する。 機能の名前は sections。 手順は 本文を部品で組む。

書き方

## 補足

<!-- section: closed -->

補足の本文。

引数

引数 説明
closed その節を閉じた状態で始める
open その節を開いた状態で始める

印は見出しの直後に書く。 印を書かない節は開いた状態で始める。 見出しの文字は開閉のボタンになる。 URL の #ID が閉じた節の中を指すとき、またはページ内検索が閉じた節の中に当たったときは、その節を開く。 h1・h5・h6 の見出しは節にせず、ID とアンカーだけを付ける。

印に対応しない表示

印は見えず、節は常に開いている。

行の詳細

表の行の下に、詳細を開閉して出す。 機能の名前は row-details。 手順は 本文を部品で組む。

書き方

| 名前 | 値 |
| --- | --- |
| りんご | 10 |
| みかん | 2 |

<!-- row-detail: 2 -->

みかんの詳細。

<!-- /row-detail -->

引数

引数 説明
行の位置 詳細を付ける表の行。見出し行を除いて 1 から数える

表の直後に書く。 詳細を持つ行の先頭のセルに開閉のボタンを置き、描いた直後は閉じる。 並べ替えと絞り込みでは、詳細はその行に付いて動く。

印に対応しない表示

印は見えず、詳細の本文が表の後ろに並ぶ。

図と表の番号

図と表に、種類ごとの通し番号の題を付け、本文のリンクの文字をその番号にする。 機能の名前は figures。 手順は 図と表に番号を付ける。

書き方

<!-- fig: arch -->

![全体の構成](./arch.png "全体の構成")

本文から [図](#fig-arch) を参照する。

引数

引数 説明
ID 図表の id を fig-{ID} にする。本文のリンクは #fig-{ID} で指す

印の直後の画像の段落と表に番号を付ける。 番号は文書の頭から、図と表で別に数える。 図は下に 図 1 と画像の title、表は上に 表 1 を置く。 本文の #fig-{ID} へのリンクの文字は、その図表の 図 1・表 1 に替わる。

印に対応しない表示

印は見えず、画像と表がそのまま出る。 リンクの文字は書いたままになる。

用語集の表

表の用語・意味・別名の列から用語を入れ、本文に出たその語に意味のツールチップを付ける。 機能の名前は glossary。 手順は 索引と用語集を書く。

書き方

<!-- glossary: term=用語 aliases=別名 meaning=意味 -->

| 用語 | 別名 | 意味 |
| --- | --- | --- |
| 印 | マーク、オン・オフの印 | HTML コメントで書く指定 |

<!-- /glossary -->

引数

引数 説明
term=列名 必須。用語の列。列名は表の見出しの文字
meaning=列名 必須。意味の列
aliases=列名 任意。別名の列。別名のセルは「、」か「,」で区切る。「・」は別名の中の文字として扱う
avoid=列名 任意。やめた言い方の列。セルの区切りは別名と同じ。描いた文書の本文の言い方に波線のマーカーと、その行の用語を代わりの用語にしたツールチップを付け（glossary がオンのとき）、索引の文書の本文に出ると点検が avoided_term で知らせる（点検が返すずれ）

用語か意味が空の行は飛ばす。 表は表の機能を持つ普通の表として描き、表の中の語には下線を付けない。 索引を渡したときは、ほかの文書の用語集の表から入れた用語も効く（参照の表を作る）。 同じ語が複数あるときは、索引の terms、描く文書の表、ほかの文書の表（索引の docs で先に並ぶ文書）の順に優先する。 同じ語かどうかは、NFKC・英字の小文字化・前後の空白の除去で正規化した後で比べる。

印に対応しない表示

印は見えず、表は普通の表として読める。

ビュー

範囲の最初の表を項目にして、列ごとに分けたボード表示と、表形式のビューを切り替えて見せる。 表形式のビューは、filter= で指定した列を絞り込める。 機能の名前は views。 手順は ビューとコメントを使う。

書き方

<!-- view: group=状態 default=table filter=担当,題:text icons=未着手:inbox -->

| 題 | 状態 | 担当 |
| --- | --- | --- |
| 配色の変数を洗い出す | 未着手 | 佐藤 |
| 余白の変数を決める | 進行中 | 鈴木 |

<!-- /view -->

範囲の最初の表の見出しの行が列名、本文の行が項目、セルの文字が値になる。

引数

引数 説明
group=列名 ボード表示で列に分ける列名。表の見出しの文字で書く。省くと、切り替えを置かず、表形式のビューだけを描く
default=board / default=table 描いた直後に出すビュー。省くと、group= があればボード表示
filter=列名:種類,… 表形式のビューで絞り込みを付ける列と種類。書き方は 表 の filter= と同じ（種類は select・text・date で、省くと select）
icons=値:アイコンの名前,… ボードの列の見出しのアイコンを、group= の列の値ごとに上書きする

ビューの動きは次のとおり。

項目 動き
切り替え ビューの頭の「ボード」「表」のボタンで切り替える。今のビューは aria-pressed で示す
ボード表示 group= の列の値ごとの列を、表に出た順に横に並べる。列の見出しにアイコン・値・項目の数を出す。項目は表の行の順に並び、先頭の列の値が題になり、group= の列を除く残りの列を列名と値の組で出す。空の値は出さない。幅に収まらない列はボードの中で横にスクロールする
表形式 範囲の表をそのまま使い、表 の並べ替えと、filter= の列にだけ同じ絞り込みを付ける
絞り込み 表形式にだけ当てる。ボード表示は常に全ての項目を出し、表形式に戻すと絞り込みは残っている。ビューの上に、検索欄と件数は置かない
印刷 今のビューを出し、切り替えと絞り込みのボタンは出さない

ボードの列の見出しのアイコンは lucide のもの。 既定の対応は、未着手 が circle-dashed、進行中 が circle-dot、保留 が circle-pause、完了 が circle-check、中止 が circle-x、対応に無い値が circle。 使えるアイコンは、この 6 つと inbox・archive・clock・flag・star・bug・eye・lock・zap・ban。 アイコンは読み上げに含めず、列の見出しは値と項目の数だけが読み上げられる。

印に対応しない表示

印は見えず、範囲の表は普通の表として読める。 views がオフのときも同じ。

図の部品

範囲に置いた部品の定義（JSON）から、図と操作できる部品を描く。 機能の名前は diagrams。 手順は 図を描く と 操作できる部品を作る。

書き方

<!-- chart -->

```json
{
  "title": "返信までの時間",
  "scope": "10 月の第 2 週",
  "updated": "2026-10-18",
  "x": { "label": "曜日", "ticks": ["月", "火", "水", "木", "金"] },
  "y": { "label": "分", "min": 0, "max": 60, "step": 15 },
  "series": [{ "name": "自動返信", "points": [12, 9, 14, 8, 10] }]
}
```

<!-- /chart -->

引数

印に引数は無い。 範囲に言語 json のコードブロックを 1 つだけ置く。

印 描くもの 定義の型
flow フロー図。システムの枠と 3 層、箱と線を定義の座標に置く MdmarkFlowDefinition
sequence シーケンス図。相手を左から右へ、メッセージを上から下へ並べる MdmarkSequenceDefinition
chart 折れ線・棒・円・散布図のグラフ。系列は 4 つまで MdmarkChartDefinition
param スライダー・今の値を写すボタン・グラフを組み合わせた操作できる部品 MdmarkParamDefinition

定義の項目:

印 項目
共通 title（題名）・scope（範囲）・updated（更新日。YYYY-MM-DD）。param は title と knob・chart・table
flow width・height・frame・lanes・nodes・wires。箱は kind（llm・dm・script・mcp・data・external）、線は line（flow・read・write・reply・loop）と端の箱の from・to
sequence participants・steps・loop。steps の reply が true のメッセージは返す線
chart type（line・bar・pie・scatter。省くと line）・x（label・ticks）・y（label・min・max・step）・series（name・points）。line・bar の points の数は x.ticks と同じ。scatter の points は [x, y] の組で、x に ticks を書かない。pie は x・y・series の代わりに items（name・value）と、凡例の値の単位 unit を書く。y の min・max・step は 3 つとも書くか 3 つとも省き、省くとデータから切る
param knob（key・label・min・max・step・value）・chart（グラフの題と軸）・table（スライダーの値ごとの点）

型は dist/index.d.ts に書き出して配布物と一緒に配る。 描いた図は figure.mdmark-diagram で、data-diagram が印の名前になる。 範囲のコードブロック以外の Markdown と、定義の JSON は描いた文書に残らない。 見た目の決まりは 構成図の決まり と フローチャートの決まり。

印に対応しない表示

印は見えず、定義が json のコードブロックのまま読める。 diagrams がオフのときも同じ。 同じ名前の拡張を registerExtension で登録していると、拡張を優先して図の部品は描かない。

埋め込んだ HTML

範囲に置いた html のコードブロックの中身を、コードではなくその場の HTML として描く。 中に置いた図の部品の custom element は、図にして描く。 機能の名前は html。 手順は コードブロックのHTMLを描く。

書き方

<!-- html -->

```html
<div style="display: flex; gap: 12px">
  <div style="padding: 12px">受け取り</div>
  <div style="padding: 12px">分類</div>
</div>
<mdmark-chart>
{
  "type": "pie",
  "title": "返信の種類の割合",
  "scope": "10 月の第 2 週",
  "updated": "2026-10-17",
  "unit": " 件",
  "items": [
    { "name": "よくある質問で答えた", "value": 186 },
    { "name": "担当者へ回した", "value": 92 }
  ]
}
</mdmark-chart>
```

<!-- /html -->

引数

印に引数は無い。 範囲に言語 html のコードブロックを 1 つだけ置く。

項目 内容
描き方 コードブロックの中身を <div class="mdmark-html"> の中に HTML として描く。範囲のコードブロック以外の Markdown は、描いた文書に残らない。範囲の外の html のコードブロックはコードのまま出る
落とすもの script 要素・on で始まる属性・javascript: の URL。button は type="button" に固定して残し、押しても何も起きない。style は一部の宣言だけが残る（埋め込んだ HTML で残るもの）
図の部品 <mdmark-flow>・<mdmark-sequence>・<mdmark-chart>・<mdmark-param> の中の JSON を、flow・sequence・chart・param と同じ定義として読み、同じ図に置き換える。要素の属性は読まない。diagrams がオフのときは、要素を中身ごと落とす
用語 中の文章にも、本文と同じ用語と文書の別名の下線とツールチップを付ける
横幅 幅が本文の列より広い間だけ、中で横にスクロールする
拡大・縮小 中の図の部品だけに付く。部品でない HTML には付けない

印に対応しない表示

印は見えず、html のコードブロックがコードのまま読める。 html がオフのときも同じ。

ヒント

埋め込んだ HTML の要素に data-hint を書くと、その文をツールチップで出す。 機能の名前は hints。 手順は コードブロックのHTMLを描く。

書き方

<div data-hint="返信の種類を 1 つ選ぶ">分類の結果</div>
<p>問い合わせは <span data-hint="本文を読んで返信の種類を決める処理">分類</span> してから返す。</p>

引数

項目 内容
data-hint ツールチップに出す文。文字として出し、Markdown として読まない
ブロックの要素 右上に情報のアイコンを付け、アイコンの上でだけ開く。要素の上では開かない
行内の要素 span・a・abbr・b・strong・em・i・code・small・mark・sub・sup・time・kbd・q・s・u。破線の下線を付け、要素そのものの上で開く

ホバーとフォーカスの両方で開き、Esc で消え、ツールチップの上に乗っても消えない。 ポインターの形は変わらない。 図の部品の定義の箱の hint と io、線の tip も、同じ見た目のツールチップで出る。 hints をオフにすると、data-hint・hint・io・tip のツールチップの中身と印を出さない（線のラベルと箱の名前は出す）。

印に対応しない表示

html のコードブロックがコードのまま読めるため、data-hint は書いたまま読める。 hints がオフのときは、埋め込んだ HTML は描かれ、data-hint の文は出ない。

拡張の印

使う側が registerExtension で足した印を、その拡張のモジュールが描く。 手順は 拡張を登録する。

書き方

<!-- greet: world lang=ja -->

引数

引数は、拡張が登録した directive の印に書く。 キー=値 でない引数を書いた順に args、キー=値 を keys にして、拡張の schema が検査し、draw が受け取る。 文書にその印があるときだけ、拡張のモジュールを読む。 印を範囲（<!-- greet --> 〜 <!-- /greet -->）で書き、範囲に言語 json のコードブロックを 1 つ置くと、その JSON を読んだ値が definition として schema と draw に渡る。

印に対応しない表示

印は見えない。

書き方の警告

記法の印に読めない指定を書いても、本文の描画は止まらない。 読めた指定だけを当てて描き、読めない指定とその直し方を、その箇所に題 書き方の警告 の枠で出す。

次の場合に警告が出る。

features の印の知らない機能名は、知らせずに無視する。 外部ライブラリや拡張のモジュールを読めない印の場所は、書き方の警告ではなく 知らせの枠 に替わる。