📊 Lieflat Charts が図型を固定して単一 HTML チャートを出す仕組み

データを渡すと、エージェントがチャートを作ってくれる。ここまではよくある話です。問題は、そのチャートが毎回違う顔をしていることです。今日はドーナツ、明日は 3D 棒グラフ、色は虹色、軸は途中で切られている。数字は合っていても、資料として並べられません。

Lieflat Charts は、その「毎回違う」を潰しにきた Agent Skill です。データ形状から使う図型の番号を決め打ちし、リポジトリ内のテンプレートの骨格をそのまま複写して、ビルド不要の単一 HTML を返します。図型の選び方と編集文法をエージェント側に固定する、いわば編集レイヤです。

この記事では、Lieflat Charts の内部構造、参照するカタログとトークンのデータモデル、導入から運用までの手順を扱います。読み終えると、次が分かります。

• どのデータ形状にどの図型番号が割り当てられ、どう絞り込まれるか
• 成果物のどこがローカル完結で、どこが CDN 依存になるか
• 公開ドキュメントと実装のあいだにある差分を、どう読み分けるか

検証は 2026-09-06 時点の main（HEAD eace082、最終 push 2026-09-05）に対して行っています。

この記事の全体像。以下、順に解説します。

Lieflat Charts とは

Lieflat Charts は、データと場面を渡すと単一 HTML のチャート、または 1 ページ完結のレポートを返す Agent Skill です。成果物はビルド不要で、ブラウザでそのまま開けます。形式は SKILL.md 互換なので、制作環境である Moxt 以外に、Claude Code や Codex などの SKILL.md ホストでも動きます。

想定利用者は非プログラマです。書き手、運用担当、資料作成担当が日常語で依頼し、エージェントがデータ形状から図型番号をロックして、テンプレートの骨格で出図します。既定の成果物はチャートです。年報、月報、白書、ポスター、brief、notebook、dashboard レポートといった「1 ページ完結」を示すキーワードがあるときだけ、レポートテンプレート R01–R12 に入ります。dashboard 単独はレポートへの切り替え条件ではなく、Glance の使用を許可する条件です。

位置づけは、図型の選び方と編集文法をエージェントに固定するスキルです。チャートライブラリそのものとは層が違います。描画エンジンは手書き SVG が主で、Glance の一部、F13 Nested Treemap、地図、B1/B2 の大図、レポート R11/R12 だけが Chart.js または Apache ECharts を CDN 経由で呼びます。B3 は手書き SVG です。フォントは Google Fonts の Inter が基本です（レポートテンプレートはこれに CJK と表示用の書体が加わります）。第三者ライセンスは Chart.js が MIT、ECharts が Apache-2.0、Inter が SIL OFL 1.1 です。

図型件数は資料ごとにずれる

最初に注意点をひとつ共有します。「収録図型は何種類か」という基本的な数字が、参照する資料によって変わります。現時点で信頼できる正本は、catalog.md の表と templates/ 配下の gallery 実体です。見出し、README、DeepWiki はそれぞれ別の世代を指しています。

README.md と README.en.md は、どちらも同一ファイル内で世代が混在しています。両方とも Templates 表と Structure 節は 49 図型世代のままです。プレビュー文だけが後から更新されており、README.md は現行の 61 に追随、README.en.md は 63 図型世代で止まっています。

差分が生まれた経緯は、2026-09-03 に連続して打たれた 2 つの commit で説明できます。64 → 63 → 61 と 3 図型が落ち、見出しだけが途中の値で取り残されました。

つまり L18 は「もともと欠番」ではなく、この日に消えたことによる欠番です。現行の見出し「63 张」は bdfdca2 の値がそのまま残ったものです。

もうひとつ、この 2 コミットで削られた 3 図型（G1 / G2 / L18）は catalog の「已移除图型」リストに載っていません。そこに並ぶのは Polar Line、Punch Card、Release Rings、静的 Thread Triptych、Profile Equalizer、Slope Beads、Meridian Dots の 7 件です。G1 に至っては SKILL.md 第 4 節と第 9 節に参照が残っており、OHLC が始値・終値なしの min–max 区間だけのときは G1 を使う、と書かれたままです。

この差分は、開発速度に対してドキュメントの更新が追いついていない状態を示しています。実務上は「catalog.md の表と gallery 実体だけを見る」というルールで回避できますし、番号体系そのもの（G/L/F/M/B の接頭辞と主力・予備の区分）は一貫しています。今後、見出しの枚数と已移除リストが表の実体から自動生成されるようになれば、二次情報との照合コストがなくなり、外部ツールからカタログを機械的に読むこともしやすくなります。ここは期待したいポイントです。

特徴

• Agent Skills 形式です。SKILL.md が図型選定と差し戻し条件の規約になっています。
• 制作の本拠は Moxt です。Claude Code と Codex にも導入できます。
• 成果物はブラウザで直接開ける単一 HTML です。
• 既定はチャートです。1 ページ完結のキーワードがあるときだけ R01–R12 に入ります。
• 視覚を 2 つの速度に分けます。Lupi は 1 件ずつ読ませる細読、Glance は集約を速読させる用途です。Basics は見慣れた輪郭に数えられる単位を載せます。
• 選定順は固定です。Lupi Editorial → Lupi Basics → Glance の順に見ます。地図は明示要求時のみです。
• 主力は L1–L15 と F1–F13、予備は L16–L20、F14–F17、G19–G22 です。
• 点、目盛、ヘアラインは実単位です。面積は平方根で半径に換算します。棒は軸を切らず長さに比例させます。
• カードは結論タイトル、副題、図、出典の 4 点セットです。タイトルには図型名ではなく判断を書きます。
• 色は内蔵 4 系統（既定の Mono + porcelain / palm / wire の 3 プリセット）と、利用者指定の custom の計 5 択です。既定は紙灰と炭黒の Mono で、残る 3 つはデータの意味から自動選択します。custom はブランド色を明示したときだけ作ります。
• 同一 HTML、同一組の成果物では色系統を 1 つに固定します。
• 入場アニメーションは quarticOut です。スクロールで画面に入ったときに再生し、クリックで再演します。prefers-reduced-motion で縮退します。
• インタラクションは実データの記録にだけ付けます。装飾要素には付けません。
• レポート 12 種は中国語版と英語版が独立ファイルです。同じ版式を別業界のデータにも載せられます。
• ライセンスは学習、改変、共有、非商業までです。商業利用は別途許諾が必要です。

関連技術との関係

Lieflat Charts は Chart.js / ECharts の上に載る編集レイヤです。D3 / Observable Plot は図法をその場で組む層なので、目的が違います。姉妹スキルの lieflat-html-design は、プレゼン用デッキと小紅書（Xiaohongshu）向けのカード・長文を扱います。

類似ツールとの比較

起動速度とリソース消費の定量ベンチマークは一次情報に記載がないため、ここでは扱いません。以下は実行モデルと成果物の差です。

ユースケース別の推奨

構造

Lieflat Charts はビルド不要の Agent Skills パッケージです。実行時サーバは持たず、エージェントがリポジトリ内のテンプレートを読んで単一 HTML を組み立てます。gallery は複数カードを 1 ページに並べた参照実装です。成果物は SKILL.md 第 9 節が定める単一 HTML です。templates/color/ は配色の見本であり、構造の正本は templates/ 直下の gallery です。

システムコンテキスト図

利用者はデータと用途を渡し、単一 HTML を受け取ります。外部システムは、ホスト、配布、正本、そしてブラウザが依存する配信役です。

アクター

調査対象と外部システム

コンテナ図

実行時の中核は、ワークフロー文書、2 つのカタログ、gallery、レポート HTML、2 つのトークンです。検証と実例は作者側の品質コンテナです。

コンポーネント図

納品までの経路は、カタログ番号のロック → gallery カードの複写 → 第 9 節の単一 HTML 組み立て、の 3 段です。

gallery とエンジンの対応は次のとおりです。

エンジンの担当範囲は次のとおりです。手書き SVG が Lupi 全図と Basics の大半、Glance の waffle / violin / gheat / rankstrip / sankey、そして B3 を担います。Chart.js は SKILL.md 第 9 節と catalog の脚注が G1 / G3 を対象と記していますが、現行 gallery に実装カードがあるのは G3 Chunky Bars だけです。ECharts は Glance の大半、F13 Nested Treemap、Maps、B1、B2 を担います。

ネットワーク構成

純 SVG の図はローカルで完結します。Chart.js、ECharts、フォント、GeoJSON を残したまま納品すると、ブラウザが外部配信へ出ます。

データ

Lieflat Charts が扱う対象は、実行時のデータベースではなく、スキルが参照するカタログとトークンです。

概念モデル

所有関係はサブグラフの入れ子、利用関係は矢印で表しています。

情報モデル

概念モデルと同じ 12 エンティティです。これは実装のクラス構造そのものではなく、カタログとトークンの関係を読み解くために再構成した説明用のモデルです。型名は string / number / boolean / list / map に限り、実際には関数である rnd と obsReveal だけ注記を添えています。図が大きいので、カタログ側とスタイル側の 2 枚に分けています。まずカタログ側です。

次にスタイルと検証と納品物です。

Skill と出力モード

ChartType の番号体系

データ形状から候補への圧縮は次のとおりです。矢印の順序は優先度ではありません。実際の選択は Lupi Editorial と Lupi Basics を先に見ます。

Glance のトリガーである「週報」は、第 0 節 0.1 のレポートキーワードではありません。週報で 10 秒の速読を求めれば Glance、1 ページ完結の週報レポートを求めれば R12 になります。

図型契約インベントリ

catalog.md の表は 61 行です。姉妹図型は同じ主題を別構造で表す候補であり、両方を同時に生成することはしません。

主力を検討せずに予備を直接使ってよいのは、次の 5 形状だけです。

GalleryCard の必須 id

validate.mjs が必須とする id は、新規図型の分だけです。

B 系は 1 ファイル 1 図なので、コンテナ id はどれも ch です。Glance の G17 と Basics の F16 は別ファイルでどちらも id stream ですが、同一 HTML 内の重複ではありません。

ExtraCatalogTranslation

catalog 番号の外にある図です。SKILL.md 第 6 節の翻案フローで作ります。examples/lenny-2026-survey.html の Hundred Faces と Ballot Rings が実例です。同ファイル内の他 6 図は L12、L15、F5、L13、L7、L5 に対応します。

ReportTemplate

スロットに入る図は catalog.md の ChartType を再利用します。レポートテンプレートのレイアウトがデータ契約を迂回することはありません。

ColorPreset の実キー

CAT という単一キーはありません。実在するのは CAT4 / CAT3 / CAT3L です。porcelain に CAT3L はありません。

INK_BOOST は strokeScale が 1.8、opacityFloor が 0.85、例外は dot heat です。wire の HERO は蛍光オレンジ #F5572F で、1 図に 1 要素だけ使います。wire のインタラクティブ大図は用意されておらず、大図の彩色は porcelain / palm のみで、wire の場合は元の Mono を使います。なお porcelain のコメントは「分類 4 超で Mono へ戻す」、第 6.5 節は「分類 6 超で Mono」と書いています。運用の正本は SKILL.md 側です。

TokenSet の主要値

custom の必須ロールは BG TXT MUT GRID DATA です。HERO / RAMP / CAT は条件付きです。成果物へ CUSTOM としてインライン化し、color-presets.js へは書き戻しません。

DeliveryHTML のカード 4 点セット

1 図は 1 つの独立した結論です。1 ページの既定上限は 6 枚です。

導入方法

Lieflat Charts は npm ライブラリではありません。ルートに SKILL.md を置く Agent Skills なので、ビルド工程はありません。

前提

• Agent Skills 対応ホストが必要です。README が挙げる対象は Moxt、Claude Code、Codex、その他 SKILL.md 互換エージェントです。
• 推奨経路の Moxt はハブからスキルを読むため、ローカルへの clone は必須ではありません。
• npx skills add を使う場合は Node.js と npm が必要です。
• CLI の npm パッケージ名は skills で、リポジトリは vercel-labs/skills です。
• 公開パッケージ skills@1.5.23 の engines 宣言は node: ">=22.20.0" です。ドキュメントの Installation は「Node.js 18 or higher」と書いており、記述が食い違っています。ただし npm の engines は既定では警告（EBADENGINE）止まりなので、これより古い Node でも実行自体は通ります（v22.17.0 で npx skills --version と --list が動くことを確認）。挙動が怪しいときに最初に疑う箇所として覚えておく程度で十分です。
• ライセンスは PolyForm Noncommercial 1.0.0 です。

ホスト
  ├─ Moxt（推奨・制作環境。ローカル clone 不要）
  ├─ Claude Code（~/.claude/skills/lieflat-charts）
  ├─ Codex（~/.codex/skills/lieflat-charts）
  └─ その他 SKILL.md 互換エージェント
インストール手段
  ├─ npx skills add（vercel-labs/skills CLI）
  └─ git clone + 必須ファイル検査

バージョン確認

GitHub には Release v1.1.0（2026-08-05、彩色対応）と v1.2.0（2026-08-14、レポートモード）があります。HEAD eace082（2026-09-05）はタグより新しいので、日常の確認は git log -1 で行います。Skills CLI は npx skills --version です。調査時点の npm latest は 1.5.23 でした。

node --version
npx skills --version
npm info skills version

git -C ~/.claude/skills/lieflat-charts log -1 --oneline

Moxt での利用

README は Moxt を「ネイティブな制作環境」かつ「手順がより短い推奨利用方法」としています。ハブの URL は 中国語版と英語版があります。

npx skills add

README が示す 1 行コマンドです。パッケージの解決先は npm の skills です。CLI はリポジトリ内の SKILL.md を発見するので、--skill lieflat-charts でその 1 件に絞ります。

npx skills add https://github.com/larashero3-dotcom/lieflat-charts --skill lieflat-charts

README の 1 行には -g がありません。既定はプロジェクト配下の ./<agent>/skills/ です。ホームの Claude / Codex 経路と揃えるときは -g を足します。

npx skills add https://github.com/larashero3-dotcom/lieflat-charts --skill lieflat-charts -g -a claude-code -a codex -y
npx skills list
npx skills ls -g

git clone で入れる

README はエージェントに次の文面を渡す方法も示しています。パスは Skills CLI の Claude Code グローバル経路と一致します。

帮我安装 lieflat-charts。请把 https://github.com/larashero3-dotcom/lieflat-charts
克隆到 ~/.claude/skills/lieflat-charts，安装完成后检查 SKILL.md、templates/、
catalog.md 和 mono-tokens.js 是否存在。

同じことをシェルで行うなら次のとおりです。

git clone https://github.com/larashero3-dotcom/lieflat-charts.git ~/.claude/skills/lieflat-charts
test -f ~/.claude/skills/lieflat-charts/SKILL.md \
  && test -d ~/.claude/skills/lieflat-charts/templates \
  && test -f ~/.claude/skills/lieflat-charts/catalog.md \
  && test -f ~/.claude/skills/lieflat-charts/mono-tokens.js \
  && echo OK

Codex は同じ手順でパスだけ差し替えます。プロジェクトスコープの Codex は .agents/skills/ ですが、README の clone 文はグローバル側の ~/.codex/skills/ を指しています。

git clone https://github.com/larashero3-dotcom/lieflat-charts.git ~/.codex/skills/lieflat-charts

更新

clone した場合はディレクトリで git pull します。npx skills add で入れた場合の公式手順は npx skills update です。

git -C ~/.claude/skills/lieflat-charts pull
git -C ~/.claude/skills/lieflat-charts log -1 --oneline
npx skills update lieflat-charts -g -y

利用方法

スキルに CLI 引数はありません。エージェントへの依頼文がそのまま入力です。

必須パラメータ

毎回たどる 6 ステップ

1. データ形状を判定します。
2. 主力の L1–L15 と F1–F13 を先に監査します。少なくとも 3 候補を比較します。
3. Lupi と Basics が全滅したとき、または Glance の明示があるときだけ Glance を見ます。
4. catalog の番号と gallery の実体をロックしてから 1 ページを組みます。
5. 図数ルールで回数を決めます。テンプレートは重複させません。
6. テンプレートの骨格で描き、色系統を 1 つにロックして自己点検します。

依頼
  ├─ レポートキーワードなし → チャートモード
  │     Lupi Editorial → Lupi Basics → Glance
  │     Maps は明示時のみ
  └─ レポートキーワードあり → レポートモード
        report-catalog.md で R01–R12 を 1 つ選び、スロットは catalog の実図型

チャートモードの依頼例

README が示す例はいずれも中国語です。各例の下に意味を添えます。

把这份调研数据做成适合公众号长文的 5 张中文版图表。
默认先比较 Lupi Editorial 和 Lupi Basics 候选；两组都不适配时，再使用 Glance。

この調査データを、長文記事に合う中国語版のチャート 5 枚にしてください。まず Lupi Editorial と Lupi Basics の候補を比較し、どちらも合わないときだけ Glance を使ってください。

帮我用 lieflat charts 给这些数据做个彩色风格的图表。

lieflat charts で、このデータを彩色スタイルのチャートにしてください。

这是一份周报数据，要求 10 秒内看懂排名、变化和异常。

これは週報のデータです。10 秒で順位、変化、異常が読み取れるようにしてください。

用青瓷蓝预设重做这张图，用明度深浅表示数值大小，不改变原图的结构。

このチャートを porcelain（青瓷蓝）プリセットで作り直してください。数値の大小は明度で表し、元の構造は変えないでください。

日本語で依頼した場合、SKILL.md は「利用者が言語を指定しないときは入力言語に従う」と定めています。ただしレポートテンプレートに実在するのは report-NN.zh.html と report-NN.en.html だけなので、レポートモードでは版面として中国語版か英語版のどちらかを選ぶことになります。

レポートモードへの切り替えキーワード

既定はチャートです。SKILL.md 第 0 節 0.1 は、レポートキーワードがない依頼をレポートへ格上げすることを禁じています。曖昧なときはチャートの最も強い 1 枚、または 2–3 枚の根拠図を出し、いきなりレポートにはしません。

第 1.1 節が定めるレポートモードの 7 手順は次のとおりです。

1. report-catalog.md で少なくとも 3 候補を比較します。
2. 言語と R0N ファイルを 1 つに固定します。
3. 主結論を既存のタイトル、リード文、KPI、図表、注記、末尾のスロットへ割り当てます。
4. スロットごとに catalog.md で図型を選定します。
5. 対応する HTML を複製し、デモデータ、デモ出典、Moxt リンク、元の結論をすべて置換します。
6. 色系統はテンプレートの現行色、または全体を Mono / 単一プリセット / custom へ置換します。部分的な混在はしません。
7. 版面幅、章順、定尺、中英フォントを点検します。

図数ルール

枚数は独立した結論の数です。データの列数ではありません。

1 ページの既定上限は 6 枚です。超えたら分割するか章単位にします。examples/lenny-2026-survey.html は規則が確定する前の 8 図構成で、現行のスキルは同種の記事を 4–6 枚に絞ります。

単一 HTML の骨格

納品物は常に単一 HTML です。gallery はカードを並べた参照実装なので、丸ごとコピーしません。ここで踏みやすいのがコンテナの取り違えです。Chart.js は <canvas>、ECharts は <div class="ch"> です。次は第 9 節の骨格の抜粋で、警告コメントは原文どおり残しています。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Mono — {図名}</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@6/dist/echarts.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="{MONO.FONT.link}" rel="stylesheet">
<style>/* MONO.CARD_CSS をインライン化 */</style>
</head>
<body>
<div class="grid2">
  <div class="card">
    <h2>{結論を述べるタイトル}</h2>
    <div class="sub">{説明} · {凡例} · {時間範囲}</div>
    <div class="ch" id="ch"></div>
    <!-- ⚠️ Chart.js 必须挂 <canvas>，套 <div class="ch"> 会报 can't acquire context -->
    <div class="src">{図型名} · {系統} · {データ出典}</div>
  </div>
</div>
<script>
const DATA = [ /* ... */ ];
MONO.obsReveal('ch', el => { /* ... */ });
</script>
</body>
</html>

Chart.js のコンテナは次のとおりです。

<div class="wrap"><canvas id="ch"></canvas></div>
<style>.wrap{position:relative;height:320px}</style>

図型の探し方

1. catalog.md で図型番号をロックします。
2. 対応する gallery を開きます。
3. カード内タイトルで <div class="card"> を探します。
4. <script> 内の同名の // ════ コメントブロックから描画コードを取ります。

catalog.md の番号
  → templates/{lupi|basics|glance|maps}-gallery.html または big-*.html
    → <div class="card">（カード内タイトル）
      → // ════ 図型名 ════

templates/color/ は配色見本であり、構造の正本ではありません。

色の指定

利用者が「彩色」と言わなくても、データの意味から自動選択します。不明確なら Mono です。同一 HTML または同一組では 1 色系統だけを使います。

// 役割キーは SKILL.md 第 6.5 節の必須セット。色値は一次情報に無い実装例
const CUSTOM = {
  BG: '#FAF7F2',
  TXT: '#1A1814',
  MUT: 'rgba(26,24,20,.60)',
  GRID: 'rgba(26,24,20,.16)',
  DATA: '#3D5A3A',
  HERO: '#B85C38'
};

テンプレートをブラウザで開く

ローカルでは templates/ の HTML を直接開きます。ビルドは不要です。インタラクティブな公開例は GitHub Pages にあります。

https://larashero3-dotcom.github.io/lieflat-charts/templates/big-force.html
https://larashero3-dotcom.github.io/lieflat-charts/templates/lupi-gallery.html
https://larashero3-dotcom.github.io/lieflat-charts/templates/reports/index.html

agents/openai.yaml の default_prompt

interface:
  display_name: "Lieflat Charts"
  short_description: "Template-driven charts and bilingual HTML reports"
  default_prompt: "Use $lieflat-charts to turn this data into polished HTML charts by default. Only generate a complete bilingual-ready report when the user explicitly asks for a report, annual/monthly report, white paper, poster, brief, or similar narrative deliverable. Reuse the closest chart or report templates with one coherent color system."

運用

テンプレートの更新

更新方法は導入経路で分かれます。git clone で入れた場合は再インストールではなく git pull です。npx skills add で入れた場合、Skills CLI はコピー時に .git を除外するため git pull は使えず、npx skills update lieflat-charts -g -y を使います。更新後は必須ファイルの確認に加えて、公開前検証を回します。図型数は README の表、catalog.md の見出し、gallery 実体で食い違うため、二次情報の古い件数は判断材料にしません。

cd ~/.claude/skills/lieflat-charts
git pull
git log -1 --oneline
node scripts/validate.mjs

公開前検証

入口は scripts/validate.mjs だけです。GitHub Actions のワークフローは 2026-09-06 時点で存在しないため、検証は手元で回す前提になります。失敗時は process.exit(1) です。.git、.playwright-cli、node_modules、output は走査対象外です。

node scripts/validate.mjs

スモークテスト

Playwright はリポジトリに同梱されていません。グローバルの npm root -g 配下の playwright を ESM から明示的に import します。対象は gallery / porcelain / palm / wire の 4 サフィックス、つまり元の gallery と色板 3 種です。basics / lupi / glance で合計 12 gallery を回します。maps は対象外です。

各ページは初期状態で 2.5 秒待ちます。gallery は IntersectionObserver による遅延描画なので、各 id へ scrollIntoView({ block: 'center' }) してから 1.2 秒待ちます。失敗条件はコンテナ不在、幅 50 未満または高さ 30 未満、描画された子要素 3 未満、console.error / pageerror の発生です。

npm install -g playwright
npx playwright install chromium
node scripts/smoke-new-charts.mjs

成果物の配布

納品物はビルド不要の単一 HTML です。オープンな配布時は mono-tokens.js の全文と、選んだ 1 種の color-presets.js を HTML へインライン化します。既定テンプレートはフォントをインライン化しません。純 SVG は依存をインライン化するか除去すればオフラインで動きます。レポートでオフラインを優先するなら R01–R10 です。R11/R12 は Chart.js + ECharts の CDN 対応が追加で必要になります。ただし R01–R10 もチャートライブラリが不要なだけで、CJK フォントの通信は残ります（report-catalog.md の依存欄が「字体联网」と書いているのはこれです）。R04 は Oswald、R05 / R08 / R09 は Inter + Noto Sans SC のみと、テンプレートによって読む書体の数が違います。唯一 R11 だけがフォントの <link> を持たず、ローカル書体の指定だけで組まれています。完全オフラインにするならフォントもインライン化するか、ローカル書体に差し替えます。

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/echarts@6/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>

GitHub Pages での gallery 閲覧

Pages は main のリポジトリルートを legacy ビルドしています。公開 URL は https://larashero3-dotcom.github.io/lieflat-charts/ です。gallery は IntersectionObserver による遅延描画なので、画面外のカードはスクロールするまで空に見えます。

ライセンス運用

本リポジトリの正本は PolyForm Noncommercial License 1.0.0 です。GitHub API の license は Other / NOASSERTION を返すので、MIT ではありません。許可されるのは非営利目的、個人の研究、学習、趣味、および慈善、教育、公的研究、公衆安全・公衆衛生の組織、環境保護、政府機関の利用です。商業利用は README のとおり別途許可が必要です。

Chart.js は MIT、Apache ECharts は Apache-2.0、Inter は SIL OFL 1.1 で、これらは PolyForm の対象外です。THIRD_PARTY_NOTICES.md に同じ 3 件と、jsDelivr / Google Fonts 経由の読み込みが記載されています。署名は推奨扱いで、納品成功時に作者名への言及を促しますが、成果物への強制挿入はしません。

ベストプラクティス

納品前の自己点検

納品前に次を全部通します。1 つでも落ちたら差し戻しです。

• 数値と視覚が比例しているか。面積は平方根か。棒の軸を切っていないか。
• 色板が 1 系統か。
• ラベルが重なっていないか。
• 最小文字サイズを割っていないか（半幅 6.5px、全幅 5.5px）。
• デモデータが rnd の決定論的な値か。
• reveal がスクロールで再生され、クリックで再演し、タイマーが重ならず、prefers-reduced-motion で縮退するか。
• カード 4 点セットが揃っているか。タイトルが図型名になっていないか。
• 副題だけで凡例が読めるか。
• <script> を抜き出して node --check 相当の構文検査が通るか。
• 全候補の監査を書いたか。少なくとも 3 候補と、それぞれの不採用理由があるか。
• 1 ページ多図ならテンプレートを全体に配分したか。同形の繰り返しや暗色カードの多用がないか。
• 各図に図型番号、gallery ファイル、カード内タイトルを記録し、中核構造がそのテンプレート由来か。
• Glance を使うなら、Lupi Editorial と Lupi Basics が不適合な理由を書いたか。
• 最後に、gallery の対応カードの隣に置いて同じ家族に見えるか。

断る依頼のリスト

受けない方が信頼できる依頼があります。断ったら代替案を出します。

• 軸を切った棒グラフ → 突き抜け / 拡大鏡 / 棒だけ切って軸は切らない、の 3 案
• 発光、ガラス質、3D → 既存の視覚文法を維持
• 多色相で単系列を塗る → porcelain / wire / Mono
• 分類 6 超で彩色 → Mono のグレースケール
• 利用者が地図を明示していない → 地域フィールドがあっても M1/M2 を自動起動しない
• 地図範囲が M1/M2 の外 → 誤った境界を流用しない
• 純装飾要素への hover → 断って理由を説明する
• レーダーチャートの再発明 → ECharts 標準のレーダー + Mono トークンで着せ替え
• データが図型を支えられない → より単純な図へ落とす

同一納品は単一色系統

1 つの HTML、または同一組の姉妹図は Mono / porcelain / palm / wire / custom のどれか 1 つだけを使います。ある 1 枚が選んだ系統をサポートしないときでも、その 1 枚だけ色を変えることはしません。custom は利用者が色値やブランド色を明示したときだけ作ります。big-circular / big-force / big-threads の彩色は porcelain と palm だけです。

棒の軸切り禁止、面積は平方根

棒の契約は「長さ ∝ 数値」です。軸切りは契約破壊なので第 7 節で拒否します。面積エンコードは Math.sqrt(v) で半径にします。例外は F13 Nested Treemap だけで、面積は ECharts の treemap に任せ、値を再度平方根にしません。その場合は副題に area = ... を書きます。

デモデータは rnd

デモデータは mono-tokens.js の rnd(i, k) だけを使います。validate.mjs は実行コード中の Math.random() を検出して落とします。実データを納品するときは rnd の残留を切ります。

const rnd = (i, k) => Math.abs(((i * 73856093) ^ (k * 19349663)) % 1000) / 1000;

レポートはテンプレートの骨格を維持

レポートモードは利用者がレポートキーワードを明示したときだけ入ります。1 つの言語版と 1 つの R0N ファイルを複製し、版面幅、章順、スロットの関係を保ちます。デモデータ、デモ出典、Moxt リンク、テンプレート元の結論は残しません。ページ内のチャートは catalog.md で別途選定します。R04 の財務化見本は examples/reports/r04-financial-report.zh.html です。

主力と予備と Glance 降格

主力は L1–L15 と F1–F13 で、既定はここから出します。予備は L16–L20、F14–F17、G19–G22 です。「新しい方が綺麗」は採用理由になりません。Glance は降格であり、Lupi Editorial と Lupi Basics が両方不適合なとき、または利用者が Glance / dashboard / 3 秒速読を明示したときだけ使います。Maps は明示要求時のみです。

実例から読み取れる運用規約

examples/lenny-2026-survey.html は現行の図数ルールより前の 8 枚構成ですが、運用の勘所が詰まっています。

• 端数処理は認めます。掲載値を整数に丸めて合計が 100 に届かないとき、この例は脚注で rounding ate 2 people と断り、辻褄合わせの単位を足しません。丸めだけで差が埋まらない場合もあるので、実データで使うときは元の集計範囲まで確認します。
• 無いデータは作りません。Brand Spectrum の競合対照点は元データに無いので空にします。
• 正確なシェアを示す図では rnd の残留を切ります。Radial Convergence にあった約 8% の hub 誤差は、調査データでは無効にします。
• Dot Cascade の縦組みは長いラベルが読めません。該当データは Dot Cascade をやめ、横並びの Tick Rows（F5）へ替えます。
• prefers-reduced-motion の縮退を落としません。

reduced-motion の現状

ここは 2 層に分けて理解する必要があります。

納品物側は、CSS アニメーションだけ縮退が入ります。 mono-tokens.js の CARD_CSS は末尾で MOTION.css を連結しており、その中に @media (prefers-reduced-motion: reduce) で .pop / .fade / .draw を止める指定が入っています。SKILL.md 第 9 節の骨格どおり MONO.CARD_CSS をインライン化して納品すれば、ここまでは自動でついてきます。

逆に、CSS 以外は縮退しません。 obsReveal の ECharts 版である eReveal は matchMedia を見ず、animationDuration: 900 をそのまま ECharts へ渡します。Glance のタイマー駆動の更新（race / stream）も同様です。つまり Chart.js / ECharts / タイマーで動く部分は、利用者側で個別に止めるか、静的な図型へ差し替える必要があります。

落ちているのは gallery の参照実装側です。 各 gallery は mono-tokens.js を読み込まず CSS を自前で展開しているため、prefers-reduced-motion を持つのは lupi-gallery.html と maps-gallery.html の 2 つだけです。basics-gallery.html、glance-gallery.html、big-circular.html、big-force.html、big-threads.html には縮退指定がありません。.pop を使っている basics-gallery でも入っていないので、ギャップは「Glance の動的 3 図」より広い範囲に及びます。

そのうえで、Glance の morph / race / stream については、reduced-motion 対応の PR #4 が「最終状態だけ出すと意味が変わる」という理由で未マージのまま閉じられています。これは放置ではなく設計判断です。アニメーションが情報の一部になっている図で「最終状態だけ見せる」のが正解とは限らない、という指摘には筋があります。

実務としては、アクセシビリティ要件のある納品なら、まず gallery のコードをそのまま流用せず MONO.CARD_CSS 経由の骨格に載せ替え、そのうえで手書き SVG の図型を選ぶのが安全です。ライブラリ描画やタイマー駆動の図を使うなら、縮退は自前で用意することになります。今後、参照実装側にもトークンの縮退が行き渡り、eReveal が prefers-reduced-motion を見るようになり、Glance の動的図には静的代替（G21 Rank Strip のような）と組み合わせた縮退が用意されると、使える場面が広がります。ここも今後に期待したいところです。

トラブルシューティング

まず要点です。Chart.js は <canvas> に掛けます。<div class="ch"> は ECharts 専用です。彩色後のヘアラインは INK_BOOST の線幅 1.8 と不透明度の下限 0.85 を守ります。地図の空白は GeoJSON のネットワーク依存です。gallery の下側が空なのは IntersectionObserver の遅延描画です。ライセンスは PolyForm Noncommercial であり、MIT ではありません。

Chart.js のコンテナ取り違え

<div class="wrap"><canvas id="ch"></canvas></div>
<style>.wrap{position:relative;height:320px}</style>

彩色後にヘアラインが消える

const INK_BOOST = {
  strokeScale: 1.8,
  opacityFloor: 0.85,
  exempt: ['dot heat'],
};

地図と GeoJSON

fetch('https://cdn.jsdelivr.net/gh/apache/echarts-examples@gh-pages/public/data/asset/geo/USA.json')
fetch('https://cdn.jsdelivr.net/npm/echarts@4.9.0/map/json/world.json')

遅延描画と検証失敗

document.getElementById(chartId)?.scrollIntoView({ block: 'center' });

二次情報とライセンスの取り違え

gh api "repos/larashero3-dotcom/lieflat-charts/issues?state=all&per_page=100" \
  --jq '{open:[.[]|select(.pull_request==null and .state=="open")]|length,
         closed:[.[]|select(.pull_request==null and .state=="closed")]|length}'

PR を除いた実 issue は次の 2 件です。

まとめ

Lieflat Charts は、チャート生成を「何を描くか」ではなく「どの番号の図型をロックするか」の問題に置き換えた Agent Skill です。要点を 3 つに絞ります。

• 選定順が固定されている。Lupi Editorial → Lupi Basics → Glance の順で監査し、Glance は降格扱い、Maps は明示要求時のみです。少なくとも 3 候補を比較して不採用理由を残すところまでが手順に入っています。
• 納品物は単一 HTML で、依存の境界が明確。純 SVG の Lupi / Basics はローカル完結、Glance / F13 / 地図 / B1・B2 / R11・R12 は CDN 依存です。オフライン配布を狙うなら図型の選択段階で決まります。
• 公開ドキュメントと実装には差分がある。運用ルールとしては「正本は catalog.md の表と gallery 実体、納品物の骨格は MONO.CARD_CSS 経由」の 2 つを押さえれば実務は回ります。差分の解消は今後に期待したい部分です。

導入は npx skills add か git clone の 2 択で、ビルド工程はありません。まずは GitHub Pages の gallery を開いて、L 系・F 系・G 系がそれぞれどんな見え方をするか確かめるのが早いと思います。ライセンスは PolyForm Noncommercial なので、商用利用を考えている場合は最初に確認してください。

この記事が少しでも参考になった、あるいは改善点などがあれば、ぜひリアクションやコメント、SNSでのシェアをいただけると励みになります！

参考リンク

• larashero3-dotcom/lieflat-charts
• README.md
• README.en.md
• Moxt ハブ
• 作者 GitHub
• lieflat-html-design
• SKILL.md
• catalog.md
• report-catalog.md
• agents/openai.yaml
• templates/lupi-gallery.html
• templates/basics-gallery.html
• templates/glance-gallery.html
• templates/maps-gallery.html
• templates/big-force.html
• GitHub Pages Force Graph
• mono-tokens.js
• color-presets.js
• templates/color/README.md
• examples/README.md
• examples/lenny-2026-survey.html
• vercel-labs/skills README
• npm package skills
• Skills CLI Installation
• Agent Skills 仕様
• scripts/validate.mjs
• scripts/smoke-new-charts.mjs
• LICENSE
• THIRD_PARTY_NOTICES.md
• PolyForm Noncommercial 1.0.0
• DeepWiki
• Issue #2
• Issue #7
• PR #1
• PR #4