pom-slide

name	pom-slide
description	Generate or incrementally edit pom presentation slides from natural language. Use for creating a pom XML deck, updating selected slides while preserving the rest, replacing all slides, or inserting a slide. Applies design principles, honors pom-theme.json, validates the full deck, performs a rendered self-review loop, and reuses or launches a pom-cli preview.
license	MIT
allowed-tools	Write,Edit,Read,Bash
metadata	{"version":"1.4.0"}

自然言語の指示から pom XML スライドを新規生成または部分編集し、ファイルに保存する。デザイン原則（配色・タイポグラフィ・余白・アーキタイプ）に基づいて初版の質を高め、既存デッキの編集では対象外 slide と theme を保持する。/pom-theme skill が生成したテーマファイル（pom-theme.json）があればブランド配色・フォントを適用する。strict validation とレンダリング結果のセルフレビューを行ったうえで、pom-cli の既存 preview server を再利用または起動する。

手順

1. 入力の解釈

ユーザーの指示からスライドの内容・枚数・テーマを把握する。既存の pom XML が指定されている、またはデフォルトの slides.pom.xml が存在し、ユーザーが更新・やり直し・追加を求めている場合は、Step 2 の既存 XML 編集フローへ進む。既存ファイルがあっても、ユーザーが新しいデッキの作成を求めているなら上書きせず、保存先を確認または別名にする。

明示されていない場合のデフォルト:

• 枚数: 指示の内容量に適した枚数（3〜8 枚程度）
• ファイル名: slides.pom.xml

2. 既存 slides.pom.xml の編集（incremental edit）

既存の pom XML を編集するときは、最初に対象ファイル全体を Read し、トップレベルの <Theme> と各 <Slide> の現在の順序・内容を把握する。ユーザーの指示を次の 3 ケースのいずれかに分類してから編集する。曖昧な場合は、対象 slide や挿入位置を勝手に広げず確認する。

N 枚目だけ更新

• 指定された 1-based の N 枚目の <Slide> だけを書き換える
• 対象外の <Slide> は内容も順序も保持し、トップレベルの <Theme> 宣言もそのまま保持する
• ユーザーが明示していない限り、デッキ全体の配色・フォント・共通レイアウトを再設計しない。更新 slide は既存デッキのデザイントークンと視覚言語に合わせる

全体をやり直す

• 全 <Slide> を再生成する
• ユーザーが指定した入力ファイル名・保存ファイル名は維持する
• 既存の theme 利用方針を維持する。トップレベルの <Theme> を使っているデッキではその宣言とトークン参照方針を引き継ぎ、pom-theme.json を使っている場合は再度読み込み、theme を使っていない場合はユーザーの指示なしに利用方針を切り替えない
• ユーザーが theme やファイル名の変更も明示した場合だけ、その指定を優先する

1 枚追加

• ユーザーが位置を指定した場合はその 1-based の位置へ、指定がなければ末尾へ新しい <Slide> を 1 つ挿入する
• 既存の <Slide> の内容と相対順序、およびトップレベルの <Theme> 宣言を保持する
• 追加 slide は既存デッキのデザイントークン、タイポグラフィ、外周余白、共通ヘッダなどに合わせる

共通の validation・自己修正ループ

編集後は部分的な XML 断片ではなく、保存したファイル全体を strict validator に通す。

1. pom build <ファイル名> -o /tmp/pom-validation.pptx を実行する。pom-cli を使えないがライブラリを呼べる環境では、同等の buildPptx(xml, slideSize, { strict: true }) を使ってよい
2. diagnostics の slide 番号とノード情報を確認し、変更対象に起因する diagnostics がなくなるまで再検証する
3. validation が変更・追加した slide の問題で失敗した場合は、該当する <Slide> だけを自己修正し、ファイル全体を再検証する。対象外 slide や <Theme> をついでに変更しない
4. 全体再生成では diagnostics が示す slide だけを順に修正し、strict validation が成功するまで再検証する。部分更新で対象外 slide の既存問題だけが残った場合は、無断で修正せず、全体 validation は失敗した旨と残った diagnostics を記録する
5. 変更対象の diagnostics がなくなったら Step 6 のセルフレビューへ進む。初版生成では従来どおり全 slide を、incremental edit では変更・追加した slide を中心にレンダリングする。ただし validator は常にファイル全体へ実行する

このセクションは編集対象と機械検証の範囲を決める。デザイン原則は Step 3、XML の仕様は Step 4、画像による見た目の確認は Step 6 に従う。

3. デザイン方針の決定

新規生成または全体再生成では、XML を書き始める前にデッキ全体のデザイントークン（配色・タイポグラフィ・余白）を決める。場当たり的に色やサイズを選ばず、ここで決めた値だけを使ってデッキ全体を組む。N 枚目だけの更新または 1 枚追加ではトークンを選び直さず、Step 2 で読み取った既存デッキの方針を引き継ぐ。

テーマファイルの確認

最初にカレントディレクトリ（またはユーザーが指定したディレクトリ）に pom-theme.json があるか確認する。あれば Read ツールで読み込み、以下のとおりデザイントークンとして採用する。pom-theme.json は /pom-theme skill が生成するテーマファイルで、ブランドに合わせた配色・フォントが定義されている。

• トーン: tone フィールドの値を採用する（下記「トーン」の選択をスキップ）
• 配色パレット: colors の base / surface / ink / muted / accent を 5 ロールにそのまま使う（下記プリセットからの選択をスキップ）。Chart の chartColors には colors.charts を使う
• フォント: typography.fontFamily を本文の fontFamily に、typography.headingFontFamily（あれば）を見出しに使う
• 背景: slideMaster.background.color があればスライド背景色として使う（通常は colors.base と同じ）

テーマで決まるのは配色・フォント・トーンのみ。タイポグラフィスケール・余白システム・アーキタイプは下記のとおり通常どおり適用する。ユーザーが指示で明示的に色やトーンを指定した場合は、その指定をテーマより優先する。pom-theme.json が無い場合は、以下のとおり自分でトーンと配色を決める。

トーン

内容と聞き手に合わせてトーンを 1 つ選び、配色とレイアウトの選択に一貫して反映する（例: 堅実なコーポレート / モダンなテック / ミニマル / ウォームなエディトリアル / エネルギッシュ）。生成のたびに同じ見た目へ収束させないこと。「白背景 + 既定の青 + 純黒テキスト」という、いかにも自動生成な見た目をそのまま使わない。

配色パレット

デッキごとに以下の 6 ロールの色を決める。アクセントは accent と accent2 の 2 トーン併走で、使用面積はスライドの 1 割以下に抑える（見出し脇のバー、強調数字、アイコン、装飾アークなど）。accent2 は accent と同じ色相をずらした、または明度を下げた近傍色を選ぶ。linear-gradient(accent → accent2) でグラデーション装飾に使うので、極端な反対色は避ける。

ロール	役割
base	スライド背景。真っ白 FFFFFF 固定にしない（オフホワイトやダークも検討する）
surface	カード・パネルの背景
ink	本文テキスト。純黒 000000 は避ける
muted	補助テキスト・キャプション
accent	強調 1 色。多用しない。アクセントバー / 強調数字 / アイコン
accent2	accent と組み合わせる近傍色。linear-gradient(accent → accent2) で装飾バー / カード縁取り

プリセット例（そのまま使ってよいが、テーマに合わせて調整する）:

トーン	base	surface	ink	muted	accent	accent2
コーポレート	F8F9FB	FFFFFF	1F2937	6B7280	1E3A8A	3B82F6
ウォーム・エディトリアル	FAF6F0	FFFFFF	292524	78716C	C2410C	F59E0B
ダーク・テック	0F172A	1E293B	F1F5F9	94A3B8	38BDF8	A78BFA
フレッシュ	F6FBF9	FFFFFF	1A2E2A	5F7470	0D9488	84CC16

pom-theme.json には accent2 フィールドは無いので、デッキで accent2 を使うときは <Theme> で独自トークンとして宣言する。<Theme> の属性値は 6 桁 hex のみ（$tokenName は色属性での 参照側 でのみ展開されるので、<Theme> の宣言側には書けない）。pom-theme.json がある場合は colors.accent の実 hex を読み取り、accent2 はそれに近い色相 / 明度違いを 手動で 1 色選んで <Theme accent="0052CC" accent2="3B82F6" ... /> のように hex を直接書く。colors.charts[1] は反対色や任意の調和色のこともあり、そのまま accent2 に流用すると linear-gradient が暴れる（blue → green 等）ため自動転記しない。

linear-gradient(accent → accent2) の代表的な使い所:

• 表紙アクセントバー — タイトル直下の細い帯を Shape backgroundGradient="linear-gradient(90deg, $accent, $accent2)" で塗る
• セクション分割線 — Shape shapeType="rect" h="3" を横いっぱいに置き、同じグラデーションで塗る
• カードボーダー — カードの上端や左端だけ細 Shape を Layer で重ね、グラデーションで縁取る
• 装飾アーク — Layer 内の Shape shapeType="ellipse" をスライド外にはみ出させ、グラデーションで塗って柔らかい背景装飾にする

タイポグラフィスケール

デッキ全体で以下の 5 段階だけを使う。中間サイズを場当たりで増やさず、1 枚のスライドに使うのは最大 3 段階まで。

段階	fontSize	用途
display	44〜60, bold	表紙タイトル、KPI の数字
title	28〜32, bold	スライドタイトル
heading	18〜20, bold	カード見出し・小見出し
body	14〜16	本文・箇条書き
caption	11〜12, muted 色	補足・出典・ページ番号

• タイトルと本文のジャンプ率（サイズ差）をはっきりつける。中途半端な差（例: 24 と 20 の併用）は階層を曖昧にする
• bold は display / title / heading と強調語のみ。本文全体を bold にしない
• 本文の lineHeight は 1.4〜1.5

余白システム

スペーシングは 8 の倍数だけを使う: 8 / 16 / 24 / 32 / 48 / 64。

• スライド外周の padding は 48〜64 とし、全スライドで統一する
• 関係が近い要素ほど小さい gap、遠いほど大きい gap（例: 見出しと本文は 8〜16、セクション間は 32〜48）
• 余白は「余り」ではなく設計対象。埋めるために要素を足さない
• 1 スライド 1 メッセージ。箇条書きは 5 項目以内・1 項目 2 行以内とし、超えるなら 2 枚に分割する

スライドアーキタイプ

デッキは以下のアーキタイプの組み合わせで構成する。全スライドを同じレイアウトにせず、アーキタイプを切り替えてリズムを作る。

アーキタイプ	構成
表紙	display タイトル + サブタイトル + アクセントの細いバー。要素を絞り、余白を大胆に取る
アジェンダ	accent 色の番号 + 項目名の縦リスト
セクション扉	章番号と章タイトルのみ。表紙と同系の構成にして本編スライドと区別する
キーメッセージ	title + 本文 or 箇条書き。最も基本の 1 カラム
比較	見出し付きカード 2〜3 枚を HStack で均等幅に並べる
タイムライン / プロセス	Timeline / ProcessArrow ノードを使う
データ	Chart / Table + そこから言えるインサイト 1 行（heading）
KPI	display サイズの数字 2〜4 個 + caption のラベル
まとめ / CTA	キーメッセージの再掲 + 次のアクション

縦方向の揃え: アクセントバー・番号・アイコンなど高さの異なる要素をテキストと HStack で並べるときは alignItems="center" を基本にする。Text のレイアウトボックスは fontSize × lineHeight の高さを持つが、グリフは行ボックス内で上下中央に描画されるため、center で揃えると隣接要素も視覚的にテキストの中央に揃う。文字の baseline と合わせたいときは end を使う。

代表例（パレット: コーポレート）。デッキの先頭に必ず <Theme> を置き、$accent / $accent2 / $base ... をデッキ全体から参照する。色 hex を各ノードに散らさない:

<Theme base="F8F9FB" surface="FFFFFF" ink="1F2937" muted="6B7280" accent="1E3A8A" accent2="3B82F6" />

<!-- 表紙 -->
<Slide>
  <VStack w="100%" h="max" padding="64" backgroundColor="$base" justifyContent="center" gap="24">
    <Shape shapeType="rect" w="56" h="6" backgroundGradient="linear-gradient(90deg, $accent, $accent2)" />
    <Text fontSize="52" bold="true" color="$ink">プレゼンタイトル</Text>
    <Text fontSize="16" color="$muted">サブタイトル — 2026-06-10 / 発表者名</Text>
  </VStack>
</Slide>

<!-- アジェンダ -->
<Slide>
  <VStack w="100%" h="max" padding="64" backgroundColor="$base" gap="32">
    <Text fontSize="32" bold="true" color="$ink">アジェンダ</Text>
    <VStack gap="16">
      <HStack gap="16" alignItems="center">
        <Text fontSize="20" bold="true" color="$accent">01.</Text>
        <Text fontSize="16" color="$ink">背景と課題</Text>
      </HStack>
      <HStack gap="16" alignItems="center">
        <Text fontSize="20" bold="true" color="$accent">02.</Text>
        <Text fontSize="16" color="$ink">提案内容</Text>
      </HStack>
    </VStack>
  </VStack>
</Slide>

<!-- 比較 -->
<Slide>
  <VStack w="100%" h="max" padding="48" backgroundColor="$base" gap="24" alignItems="stretch">
    <Text fontSize="28" bold="true" color="$ink">プラン比較</Text>
    <HStack gap="24" alignItems="stretch">
      <VStack w="50%" padding="24" backgroundColor="$surface" borderRadius="8" gap="16">
        <Text fontSize="18" bold="true" color="$accent">プラン A</Text>
        <Ul fontSize="14" color="$ink">
          <Li>特徴 1</Li>
          <Li>特徴 2</Li>
        </Ul>
      </VStack>
      <VStack w="50%" padding="24" backgroundColor="$surface" borderRadius="8" gap="16">
        <Text fontSize="18" bold="true" color="$accent">プラン B</Text>
        <Ul fontSize="14" color="$ink">
          <Li>特徴 1</Li>
          <Li>特徴 2</Li>
        </Ul>
      </VStack>
    </HStack>
  </VStack>
</Slide>

<!-- 本編スライド共通の見出し（アクセントバー + タイトル）。glyph は行ボックス内中央配置なので center が自然に揃う -->
<HStack gap="16" alignItems="center">
  <Shape shapeType="rect" w="6" h="32" fill.color="$accent" />
  <Text fontSize="32" bold="true" color="$ink">スライドタイトル</Text>
</HStack>

<Theme> ヘッダから始めるメリット: hex 値の散らばりを 1 箇所にまとめられるため、トーン変更がヘッダ書き換えだけで全スライドに波及する。AI 自身もデッキ後半で同じ色を再現する負担が消える。代表例のとおり、backgroundColor / color / fill.color / backgroundGradient 内の hex はすべて $tokenName 参照に置き換える。

装飾要素の置き方（Layer を背景レイヤとして使う）

スライドの密度を上げず装飾度だけ上げたいときは、Layer を「コンテンツの背後に置く装飾だけのレイヤ」として使う。Slide 直下を Layer にし、その中で

1. 装飾要素を絶対座標で先に配置（薄い色 / グラデーション / Shape ellipse のアーク / 細 Shape rect のバー）
2. その上に通常の VStack をフルサイズで重ね、本文を組む

…の 2 段構成にする。装飾はスライド外にはみ出してよく、四隅を「半分だけ」覗かせるのが視覚的に効く。

<Slide>
  <Layer w="1280" h="720">
    <!-- 装飾レイヤ: グラデーション円アーク + 細バー + コーナー装飾 -->
    <Shape shapeType="ellipse" x="-200" y="-200" w="520" h="520"
           backgroundGradient="linear-gradient(135deg, $accent, $accent2)" opacity="0.18" line.width="0" />
    <Shape shapeType="rect" x="980" y="540" w="320" h="200"
           backgroundGradient="linear-gradient(45deg, $accent2, $accent)" opacity="0.10" line.width="0" />
    <Shape shapeType="rect" x="64" y="56" w="56" h="4"
           backgroundGradient="linear-gradient(90deg, $accent, $accent2)" line.width="0" />

    <!-- コンテンツレイヤ: スライド全面に VStack を置く -->
    <VStack x="0" y="0" w="1280" h="720" padding="64" justifyContent="center" gap="24">
      <Text fontSize="11" bold="true" color="$accent" letterSpacing="2">SECTION 01 · OVERVIEW</Text>
      <Text fontSize="52" bold="true" color="$ink">プレゼンタイトル</Text>
      <Text fontSize="16" color="$muted">サブタイトル — 2026-06-10 / 発表者名</Text>
    </VStack>
  </Layer>
</Slide>

使い分けのコツ:

• 装飾アーク: Shape shapeType="ellipse" をスライド外にはみ出させ opacity="0.10〜0.25" で塗る。accent のソフトな滲み代わりになる
• グラデーションバー: 細い Shape rect を backgroundGradient="linear-gradient(90deg, $accent, $accent2)" で塗る。表紙のアクセント帯 / セクション分割 / カード上端の縁取りに使える
• コーナー装飾: 右下や右上に小さい Shape rect / Layer 内の三角形を仕込むと、画面全体に「設計された感じ」が出る
• 装飾レイヤは opacity を低めに（0.08〜0.20）。文字に被っても可読性が落ちないことを優先する
• 装飾と本文の重なりは Layer の中なので NODE_OVERLAP は出ない。安心して被せてよい

ヘッダブロックを 5 スライド以上で再利用する

デッキ全体で視覚言語を揃えるには、本編スライドの上部に同じ構造の 共通ヘッダブロック（eyebrow + h1）を置く。eyebrow は SECTION 0X · TOPIC のような letterSpacing 付きの小文字アクセント、h1 は title サイズの ink 色。eyebrow の番号と章タイトルだけスライドごとに差し替え、構造・サイズ・色・余白は同一にする。

<!-- 02 / 課題 -->
<Slide>
  <VStack w="100%" h="max" padding="64" backgroundColor="$base" gap="32" alignItems="stretch">
    <VStack gap="8">
      <Text fontSize="11" bold="true" color="$accent" letterSpacing="2">SECTION 02 · CHALLENGE</Text>
      <Text fontSize="32" bold="true" color="$ink">現状の 3 つの課題</Text>
    </VStack>
    <Ul fontSize="16" color="$ink" lineHeight="1.6">
      <Li>属人化したオペレーション</Li>
      <Li>データの分断</Li>
      <Li>意思決定の遅延</Li>
    </Ul>
  </VStack>
</Slide>

<!-- 03 / 提案 -->
<Slide>
  <VStack w="100%" h="max" padding="64" backgroundColor="$base" gap="32" alignItems="stretch">
    <VStack gap="8">
      <Text fontSize="11" bold="true" color="$accent" letterSpacing="2">SECTION 03 · PROPOSAL</Text>
      <Text fontSize="32" bold="true" color="$ink">統合プラットフォームの導入</Text>
    </VStack>
    <Text fontSize="16" color="$ink" lineHeight="1.6">3 つの課題に一括で対処する単一基盤を提案する。</Text>
  </VStack>
</Slide>

<!-- 04 / 体制、05 / 効果、06 / リスク — 同じヘッダ構造を使い回す -->

ヘッダ再利用のチェックポイント:

• eyebrow の fontSize / letterSpacing / color は 5 スライドで完全同一にする
• h1 の fontSize / color も同一。スライドごとに 28 / 32 を揺らさない
• VStack の gap (eyebrow と h1 の縦距離) と外周 padding も統一する
• eyebrow の文言は SECTION 0X · {大文字 1 語} か 0X · {章タイトル} のどちらかに固定し、書き分けない
• 章番号（01 02 ...）は A9 回避策 として常に 01. や #01 のように非数字を 1 文字混ぜる。LibreOffice 経由の fallback / legacy PNG 化では純数字の leading 0 が消える（"01" -> "1"）ことがあるため

制約と回避（PPTX 原理限界）

CSS / HTML で出来ても PPTX 仕様にない表現がいくつかある。次のいずれも 代替表現で十分実用に耐えるので、無理に再現しようとせず以下のレシピに置き換える:

HTML / CSS でやりがちな表現	不可な理由	代替レシピ
backdrop-filter: blur(10px) (ガラス調)	PPTX に blur フィルタは無い	半透明 surface + drop shadow で擬似ガラスを作る。VStack backgroundColor="$surface" opacity="0.7" border.color="FFFFFF" border.width="1" borderRadius="16" shadow.type="outer" shadow.blur="16" shadow.offset="4" shadow.color="0F172A"
box-shadow: 0 0 60px ...（外側拡散グロー）	pptxgenjs の shadow は内側 / 外側オフセット系	shadow.type="outer" + 大きい blur で近似。shadow.type="outer" shadow.blur="40" shadow.offset="0" shadow.color="$accent"。HTML の柔らかい滲みとは違うが、装飾としては成立する
任意 TTF をウェブから読み込む	PPTX は同梱フォントしか確実にレンダリングできない	pom-theme.json の typography.fontFamily で 環境にあるシステムフォント（"Carlito" / "Noto Sans CJK JP" / "Noto Sans JP" など）を指定する。デッキ単位で <Theme> を切り替えるのではなく pom-theme.json で固定する
background-clip: text（文字グラデーション）	OOXML の text fill にグラデは取れるが pptxgenjs 未対応	文字自体は単色のまま、直後に細グラデーションバーを置く / glow を $accent で軽くかける ことで装飾感を出す
radial-gradient 背景	現状 backgroundGradient は linear- のみ	Layer 内に大きな Shape shapeType="ellipse" を opacity="0.10〜0.25" で重ねる（上述「装飾要素の置き方」参照）
mask-image / 任意 SVG マスク	PPTX は shape geometry でのみ近似可能	装飾を弱める方向で再設計するか、複雑なマスクは Image ノードで PNG 書き出しを使う

これらは pom-slide で「無理に再現しようとして崩れる」より「最初から代替レシピで組む」方が結果が綺麗になる。

4. pom XML の生成

Step 3 で決めたデザイントークンとアーキタイプを全スライドに適用しつつ、以下のリファレンスに従って有効な pom XML を生成する。

---

pom XML Reference

A compact reference for the pom XML format, designed to be pasted into LLM prompts.

Basics

• Slide size: { w: 1280, h: 720 } (px)
• Colors: 6-digit hex (no # prefix) e.g. FF0000
• Attribute values are written as strings. Numbers and booleans are auto-converted
• Nested object attributes use dot notation (e.g. fill.color="1D4ED8")
• For shorthand + dot-notation attributes (e.g. padding + padding.top), both can be mixed on the same node. Shorthand sets defaults; dot-notation keys override per side/property.

Top-Level Structure

The top level of every pom XML document is one or more <Slide> elements, optionally preceded by a single <Theme> element (see "Theme (Design Tokens)"). Each <Slide> wraps the content of a single slide.

<Slide>
  <VStack w="100%" h="max" padding="48" gap="24">
    <Text fontSize="32" bold="true">Slide 1</Text>
  </VStack>
</Slide>
<Slide>
  <VStack w="100%" h="max" padding="48" gap="24">
    <Text fontSize="32" bold="true">Slide 2</Text>
  </VStack>
</Slide>

• Top-level elements other than <Slide> and <Theme> are an error.
• A <Slide> must contain at least one child element.
• <Slide> does not currently take attributes; per-slide properties (background, notes, etc.) are tracked separately.

Theme (Design Tokens)

Declare a color palette once at the top level and reference each token from any color attribute as $tokenName. This keeps the palette in one place instead of repeating hex values on every node.

<Theme surface="0F172A" accent="38BDF8" textMain="F8FAFC" textMuted="94A3B8" />
<Slide>
  <VStack w="100%" h="max" padding="48" gap="16" backgroundColor="$surface">
    <Text fontSize="28" color="$textMain" bold="true">Title</Text>
    <Timeline dateColor="$textMuted" titleColor="$textMain" w="1000" h="120">
      <TimelineItem date="Q1" title="Phase 1" color="$accent" />
    </Timeline>
  </VStack>
</Slide>

• Each <Theme> attribute declares a token: the attribute name is the token name (letters, digits, _, -; must start with a letter), the value is a 6-digit hex color (# prefix optional).
• At most one <Theme> per document; it applies to all slides regardless of position. Child elements are not allowed.
• $tokenName references are resolved in color attributes (attributes ending in Color/Colors, color keys in object/JSON attributes, highlight) and inside backgroundGradient / textGradient strings. Other attributes and text content are never substituted.
• Referencing an unknown token (or using $token without a <Theme>) is a validation error with a "did you mean" suggestion.

Common Attributes (All Nodes)

Attribute	Type	Description
id	string	Unique identifier within the slide (used by Arrow connectors)
w	number / "max" / "50%"	Width
h	number / "max" / "50%"	Height
grow	positive number	Flex grow ratio among siblings (CSS flex-grow). grow="2" and grow="1" produce a 2:1 split. Along the parent's main axis w="max" / h="max" behave as grow="1"; when both are specified, grow takes precedence
minW maxW	number	Min / max width
minH maxH	number	Min / max height
padding	number / padding.top="8" padding.bottom="8"	Padding (shorthand + dot notation can be mixed)
backgroundColor	hex	Background color
backgroundGradient	linear-gradient(135deg, #667EEA 0%, #764BA2 100%) or radial-gradient(circle at center, #1D4ED8 0%, #38BDF8 100%)	Gradient background. linear: angle (<n>deg or to right etc., default 180deg) + 2 or more stops. radial: optional <shape> (circle / ellipse, default ellipse) + optional <size> (closest-side / closest-corner / farthest-side / farthest-corner, default farthest-corner) + optional at <position> (at center / at top right / at 25% 75%, default center) + 2 or more stops. PowerPoint's radial fill does not visually distinguish circle / ellipse or the size keyword (only the center position affects output). Takes precedence over backgroundColor. On the slide root node it becomes the slide background
backgroundImage	backgroundImage.src="url" backgroundImage.sizing="cover"	Background image
border	border.color="333" border.width="1"	Border (shorthand + dot notation can be mixed)
borderTop borderRight borderBottom borderLeft	borderLeft.color="1D4ED8" borderLeft.width="6"	Per-side border with the same fields as border. Overrides border for that side (field-by-field). Useful for accent bars / underlined headings. Combinable with borderRadius: borderTop paints both upper corners in its color, borderBottom paints both lower corners. borderLeft / borderRight only draw the straight segment between the corners — they do not wrap into the arcs, so borderLeft + borderRadius reads as a clean left accent bar with neutral rounded corners
borderRadius	number	Border radius (px)
opacity	0-1	Background opacity
margin	number / margin.top="8" margin.bottom="8"	Margin (shorthand + dot notation can be mixed)
zIndex	number	Stacking order (higher = on top)
position	relative / absolute	Positioning mode
top	number	Top offset (when using position)
right	number	Right offset (when using position)
bottom	number	Bottom offset (when using position)
left	number	Left offset (when using position)
alignSelf	auto / start / center / end / stretch	Override parent's alignItems for this node
shadow	shadow.type="outer" shadow.blur="4" shadow.offset="2" shadow.color="000"	Drop shadow (shorthand + dot notation can be mixed; not supported on Line)

Leaf Rotation

Text, Shape, Image, and Icon support rotate="<number>" in degrees clockwise. Rotation is applied only during PowerPoint rendering; yoga layout still uses the unrotated bounding box, so sibling placement and parent size are unchanged.

Layout Nodes

VStack / HStack

Arranges children vertically (VStack) / horizontally (HStack).

<VStack gap="16" alignItems="stretch" justifyContent="start">
  <Text>A</Text>
  <Text>B</Text>
</VStack>

Attribute	Values
gap	number (spacing between children)
alignItems	start / center / end / stretch
justifyContent	start / center / end / spaceBetween / spaceAround / spaceEvenly
flexWrap	nowrap / wrap / wrapReverse

Note: Children of VStack / HStack default to flexShrink=1 (same behavior as CSS Flexbox). Even when combining % widths with gap, children automatically shrink to fit within the parent.

Tip — empty container as transparent spacer: An empty <VStack /> / <HStack /> renders nothing. Combined with grow="1", it works like CSS <div style="flex:1"></div> to push siblings apart without a visible rectangle.

<VStack h="300">
  <Text>Top</Text>
  <VStack grow="1" />
  <Text>Bottom</Text>
</VStack>

Layer

Positions children using absolute coordinates. Children require x and y. Source order determines stacking.

<Layer w="600" h="400">
  <Shape shapeType="roundRect" x="50" y="50" w="120" h="80" fill.color="1D4ED8" text="A" color="FFFFFF" />
  <Line x1="170" y1="90" x2="300" y2="90" endArrow="true" />
</Layer>

Content Nodes

Text

<Text fontSize="24" bold="true" color="333333" textAlign="center">Title</Text>

Attribute	Type / Values
fontSize	number (default: 24)
color	hex (text color)
textGradient	linear-gradient(90deg, #38BDF8 0%, #A78BFA 100%) (native PPTX gradient text fill; overrides color; applies to all runs)
textAlign	left / center / right
bold italic strike	true / false
subscript superscript	true / false
underline	true / underline.style="wavy" underline.color="FF0000"
highlight	hex (highlight color)
fontFamily	string (default: Noto Sans JP)
lineHeight	number (default: 1.3)
letterSpacing	number in px (letter spacing, converted to pt on output)
glow	glow.size="8" glow.opacity="0.5" glow.color="FF3399"
outline	outline.size="2" outline.color="0088CC"
rotate	number (degrees clockwise, render-only)

Font size guide: Title 28-40 / Heading 18-24 / Body 13-16 / Caption 10-12

textGradient accepts the same syntax as backgroundGradient (angle in <n>deg or to <direction>, 2+ hex stops with optional % positions). Useful for cover-page titles, KPI numerals, and pull quotes. Exported as a native PowerPoint gradient text fill (editable, not rasterized).

<Text fontSize="64" bold="true" textGradient="linear-gradient(90deg, #38BDF8 0%, #A78BFA 100%)">Gradient title</Text>

Text effects (glow / outline): glow adds a glow around the characters (size in px, opacity 0-1, color hex; defaults: 8 / 0.75 / FFFFFF). outline draws a border along the character edges (size in px, color hex; defaults: 1 / FFFFFF). Both export as native PowerPoint text effects (editable, not rasterized) and are useful for keeping titles legible on top of background images. They apply per text node; with inline formatting the node-level effect applies to all runs.

Beyond titles, the same effects work well as decorative accents:

• Oversized quotation marks — make a large " or 「 glow in the accent color and place it behind a quote block (use Layer + absolute coordinates).
• Headline numerals — give big KPI digits a subtle accent glow so they pop above the rest of the slide without changing color.
• Outlined display titles on photos — pair outline with a low-opacity glow of the same dark color to keep light-on-photo titles legible.

<!-- Generic title effects -->
<Text fontSize="40" bold="true" color="FFFFFF" glow.size="8" glow.opacity="0.5" glow.color="1D4ED8">Glowing title</Text>
<Text fontSize="40" bold="true" color="FFFFFF" outline.size="2" outline.color="0F172A">Outlined title</Text>

<!-- Decorative oversized quotation mark behind a pull-quote -->
<Layer w="600" h="240">
  <Text x="0" y="-30" fontSize="180" bold="true" color="38BDF8" glow.size="16" glow.opacity="0.4" glow.color="38BDF8">"</Text>
  <Text x="80" y="80" w="500" fontSize="22" color="0F172A">真の差別化は機能ではなく、誰がどう使うかだ。</Text>
</Layer>

<!-- Highlighted KPI numeral -->
<Text fontSize="56" bold="true" color="1D4ED8" glow.size="6" glow.opacity="0.35" glow.color="1D4ED8">84.2</Text>

Inline formatting: Use <B>, <I>, <A>, <U>, <S>, <Sub>, <Sup>, <Mark>, and <Span> child elements for partial bold/italic/underline/strikethrough/subscript/superscript/highlight/color and hyperlinks:

<Text fontSize="16">Normal <B>bold</B> and <I>italic</I> text</Text>
<Text fontSize="16">Visit <A href="https://example.com">our site</A></Text>
<Text fontSize="16">Normal <U>underline</U> and <S>strikethrough</S> text</Text>
<Text fontSize="16">H<Sub>2</Sub>O and x<Sup>2</Sup> + y<Sup>2</Sup></Text>
<Text fontSize="16"><Mark color="FFFF00">highlighted</Mark> text</Text>
<Text fontSize="16">Normal <Span color="FF0000">red text</Span> normal</Text>
<Text fontSize="16" fontFamily="Noto Sans JP">Default <Span fontFamily="Arial">Arial part</Span> default</Text>
<Text fontSize="16">Normal <Span letterSpacing="6">spaced out</Span> normal</Text>
<Text fontSize="52" bold="true" color="1D4ED8">¥84.2<Span fontSize="20">M</Span></Text>

<Span> supports color, fontFamily (overrides the parent's fontFamily for that run), fontSize (overrides the font size for that run, e.g. KPI "big number + small unit" composition), and letterSpacing (adjusts letter spacing for that run; effective inside <Text> only).

<B>, <I>, <A>, <U>, <S>, <Sub>, <Sup>, <Mark>, and <Span> also work inside <Li> and <Td>.

Number + small unit (KPI numerals): Use <Span fontSize> inside a single <Text> so the digit and unit share one baseline automatically. The parent's bold / color are inherited unless overridden on the Span.

<Text fontSize="56" bold="true" color="1D4ED8">¥84.2<Span fontSize="24">M</Span></Text>
<Text fontSize="56" bold="true" color="16A34A">118<Span fontSize="24">%</Span></Text>
<Text fontSize="56" bold="true" color="0F172A"><Span fontSize="24">$</Span>2,480</Text>

• Layout measurement uses the largest run fontSize, so the Text container is sized for the biggest glyph (no clipping).
• For leading symbols (¥, $), put the <Span> at the start.
• The previous HStack-based workaround (alignItems="end" + per-leaf margin.bottom) is no longer needed for this case.

Ul (Bullet List)

<Ul fontSize="14" color="333333">
  <Li>Item A</Li>
  <Li>Item B</Li>
  <Li bold="true">Item C (individual style)</Li>
</Ul>

Attribute	Type / Values
fontSize	number (default: 24)
color	hex (text color)
textAlign	left / center / right
bold italic strike	true / false
subscript superscript	true / false
fontFamily	string (default: Noto Sans JP)
lineHeight	number (default: 1.3)

Li attributes (override parent styles): bold, italic, strike, subscript, superscript, underline, highlight, color, fontSize, fontFamily

Ol (Numbered List)

All Ul attributes plus:

<Ol fontSize="14" numberType="alphaLcPeriod" numberStartAt="3">
  <Li>Item A</Li>
  <Li>Item B</Li>
</Ol>

Attribute	Type / Values
numberType	alphaLcPeriod / alphaUcPeriod / arabicParenR etc.
numberStartAt	number (start number, default: 1)

Image

<Image src="https://example.com/img.png" w="200" h="150" />

Attribute	Type / Values
src	string (URL / path / base64)
sizing	'{"type":"contain"}' / '{"type":"cover"}' / '{"type":"crop","x":0,"y":0,"w":100,"h":100}'
rotate	number (degrees clockwise, render-only)

Icon

Displays an icon from the Lucide icon library (1,900+ icons available).

<Icon name="cpu" size="32" color="1D4ED8" />
<Icon name="cpu" variant="circle-filled" bgColor="E8F0FE" color="1D4ED8" />

Attribute	Type / Values
name	Lucide icon name (required). See examples below
size	number (default: 24, in px)
color	hex color (# prefix optional, default: #000000)
rotate	number (degrees clockwise, render-only)
variant	circle-filled, circle-outlined, square-filled, square-outlined
bgColor	hex color for background shape (# prefix optional, default: #E0E0E0)
glow	glow.size="8" glow.opacity="0.5" glow.color="FF3399" — applied to the variant background shape (no-op without variant)
outline	outline.size="2" outline.color="0088CC" — applied to the variant background shape; overrides the variant default line

Icon effects (glow / outline): Both apply only to the background shape produced by variant; they cannot adorn the PNG icon glyph itself (it is rasterized). Use the same defaults as Text glow / outline. Typical use is glowing badge dots and outlined chips paired with an icon glyph (Icon name="star" size="16" variant="circle-filled" bgColor="3B82F6" glow.size="10" glow.color="3B82F6").

Svg

Renders an inline SVG as a rasterized PNG image. Use this node for custom SVG graphics.

<Svg w="32" h="32" color="1D4ED8">
  <svg viewBox="0 0 24 24">
    <path d="M12 2L2 22h20z" fill="none" stroke-width="2"/>
  </svg>
</Svg>

Attribute	Type / Values
w	number (default: 24, width in px)
h	number (default: 24, height in px)
color	hex color (# prefix optional)

A <svg> child element is required. When color is specified, it sets stroke and fill="none" on the root <svg> element; explicit stroke/fill on child elements take precedence.

All Lucide v0.577.0 icons are available. Icon names use kebab-case. Common examples by category:

• Technology: cpu, database, cloud, server, code, terminal, wifi, globe, monitor, smartphone, laptop, hard-drive, circuit-board, microchip, binary, braces, git-branch, github, container
• Business: briefcase, building, building-2, factory, landmark, wallet, credit-card, receipt, banknote, coins, piggy-bank, hand-coins, calculator, stamp
• Charts & Data: bar-chart, bar-chart-2, bar-chart-3, line-chart, pie-chart, trending-up, trending-down, activity, gauge, presentation
• Communication: mail, message-square, message-circle, phone, video, at-sign, send, inbox, megaphone, bell, rss
• People: user, users, contact, user-plus, user-check, user-x, person-standing, baby, accessibility
• Arrows & Navigation: arrow-right, arrow-left, arrow-up, arrow-down, chevron-right, chevron-left, chevron-up, chevron-down, move, corner-down-right, external-link, redo, undo
• Actions: search, settings, filter, download, upload, share, copy, scissors, trash, edit, plus, minus, refresh-cw, rotate-cw, save, log-in, log-out, power
• Status & Alerts: check, check-circle, x, x-circle, alert-triangle, alert-circle, info, help-circle, ban, thumbs-up, thumbs-down
• Security: shield, shield-check, lock, unlock, key, fingerprint, scan, eye, eye-off
• Files & Folders: file, file-text, file-code, file-spreadsheet, folder, folder-open, archive, paperclip, clipboard
• Media: image, camera, film, music, volume-2, mic, play, pause, skip-forward, skip-back
• Time: calendar, clock, timer, hourglass, alarm-clock, calendar-check, calendar-plus
• Shapes & Symbols: star, heart, zap, target, lightbulb, flag, bookmark, award, crown, gem, flame, snowflake, sun, moon, cloud-rain
• Layout & UI: layout, grid, list, table, columns, rows, sidebar, panel-left, panel-right, maximize, minimize, menu
• Maps & Travel: map, map-pin, compass, navigation, plane, car, truck, train, ship, bike, bus
• Health & Science: heart-pulse, thermometer, pill, syringe, microscope, dna, atom, flask-conical, beaker
• Food & Nature: apple, cherry, grape, leaf, trees, flower, sprout, mountain, waves

For the full icon list, see https://lucide.dev/icons/ (use the icon name in kebab-case as the name attribute).

Shape

<Shape shapeType="roundRect" w="200" h="60" text="Button" fontSize="16" fill.color="1D4ED8" color="FFFFFF" />

Attribute	Type / Values
shapeType	Shape type (178 types total — see below)
text	string (text inside shape)
fill	fill.color="hex" fill.transparency="0.5"
line	line.color="hex" line.width="2" line.dashType="dash"
outline	outline.size="2" outline.color="0088CC" — Text-style alias for line; overrides line.color/line.width when both are set, line.dashType is preserved
glow	glow.size="8" glow.opacity="0.5" glow.color="FF3399" — native shape glow (editable in PowerPoint, not rasterized)
rotate	number (degrees clockwise, render-only)
Text attributes	fontSize color textAlign bold italic underline strike subscript superscript highlight fontFamily lineHeight

fill, line, and other style objects also allow mixing shorthand + dot notation on the same node (dot notation overrides specific keys).

Shape effects (glow / outline): glow adds a glow around the shape edge (size in px → converted to EMU, opacity 0-1, color hex; defaults: 8 / 0.75 / FFFFFF). outline is a Text-style alias for line; both produce native PowerPoint effects that stay editable. Typical use is glowing badge dots (Shape shapeType="ellipse" w="20" h="20" fill.color="3B82F6" glow.size="12" glow.color="3B82F6"), accent-glow KPI plates, and timeline markers. Do not wrap the shape with Layer purely to overlay a soft glow — glow on the shape itself is more compact and editable.

Full shapeType list:

Basic shapes: arc, bevel, blockArc, can, chord, corner, cube, decagon, diagStripe, diamond, dodecagon, donut, ellipse, folderCorner, frame, funnel, halfFrame, heptagon, hexagon, homePlate, nonIsoscelesTrapezoid, octagon, parallelogram, pentagon, pie, pieWedge, plaque, plus, rect, roundRect, rtTriangle, trapezoid, triangle

Rounded / snipped rectangles: round1Rect, round2DiagRect, round2SameRect, snip1Rect, snip2DiagRect, snip2SameRect, snipRoundRect

Arrows: bentArrow, bentUpArrow, chevron, circularArrow, curvedDownArrow, curvedLeftArrow, curvedRightArrow, curvedUpArrow, downArrow, leftArrow, leftCircularArrow, leftRightArrow, leftRightCircularArrow, leftRightUpArrow, leftUpArrow, notchedRightArrow, quadArrow, rightArrow, stripedRightArrow, swooshArrow, upArrow, upDownArrow, uturnArrow

Arrow callouts: downArrowCallout, leftArrowCallout, leftRightArrowCallout, quadArrowCallout, rightArrowCallout, upArrowCallout, upDownArrowCallout

Callouts: accentBorderCallout1, accentBorderCallout2, accentBorderCallout3, accentCallout1, accentCallout2, accentCallout3, borderCallout1, borderCallout2, borderCallout3, callout1, callout2, callout3, cloudCallout, wedgeEllipseCallout, wedgeRectCallout, wedgeRoundRectCallout

Stars & banners: doubleWave, ellipseRibbon, ellipseRibbon2, horizontalScroll, irregularSeal1, irregularSeal2, leftRightRibbon, ribbon, ribbon2, star4, star5, star6, star7, star8, star10, star12, star16, star24, star32, verticalScroll, wave

Flowchart: flowChartAlternateProcess, flowChartCollate, flowChartConnector, flowChartDecision, flowChartDelay, flowChartDisplay, flowChartDocument, flowChartExtract, flowChartInputOutput, flowChartInternalStorage, flowChartMagneticDisk, flowChartMagneticDrum, flowChartMagneticTape, flowChartManualInput, flowChartManualOperation, flowChartMerge, flowChartMultidocument, flowChartOfflineStorage, flowChartOffpageConnector, flowChartOnlineStorage, flowChartOr, flowChartPredefinedProcess, flowChartPreparation, flowChartProcess, flowChartPunchedCard, flowChartPunchedTape, flowChartSort, flowChartSummingJunction, flowChartTerminator

Action buttons: actionButtonBackPrevious, actionButtonBeginning, actionButtonBlank, actionButtonDocument, actionButtonEnd, actionButtonForwardNext, actionButtonHelp, actionButtonHome, actionButtonInformation, actionButtonMovie, actionButtonReturn, actionButtonSound

Brackets & braces: bracePair, bracketPair, leftBrace, leftBracket, rightBrace, rightBracket

Math symbols: mathDivide, mathEqual, mathMinus, mathMultiply, mathNotEqual, mathPlus

Others: chartPlus, chartStar, chartX, cloud, cornerTabs, gear6, gear9, heart, lightningBolt, line, lineInv, moon, noSmoking, plaqueTabs, smileyFace, squareTabs, sun, teardrop

Line

<Line x1="100" y1="100" x2="300" y2="100" color="333333" lineWidth="2" endArrow="true" />

Attribute	Type / Values
x1 y1 x2 y2	number (absolute coordinates, required)
color	hex (default: 000000)
lineWidth	number (default: 1)
dashType	solid / dash / dashDot / lgDash / sysDash etc.
beginArrow / endArrow	true / endArrow.type="triangle" (types: none/arrow/triangle/diamond/oval/stealth)

Arrow

Native PowerPoint straight connector between two nodes referenced by id. Text and Shape nodes with shapeType="rect", roundRect, or ellipse are supported targets; the connector attaches to the nearest cardinal connection sites (including shape rotation) and follows the targets when they move. If an ID is not found, ARROW_REF_NOT_FOUND is emitted. If it identifies another node type or unsupported shape geometry, ARROW_REF_NOT_CONNECTABLE is emitted.

<Layer w="1280" h="720">
  <Shape id="a" x="100" y="100" w="120" h="40" shapeType="rect">A</Shape>
  <Shape id="b" x="100" y="200" w="120" h="40" shapeType="rect">B</Shape>
  <Arrow x="0" y="0" from="a" to="b" endArrow="true" />
</Layer>

Attribute	Type / Values
from	string (id of source node, required)
to	string (id of destination node, required)
color	hex (default: 000000)
lineWidth	number (default: 1)
dashType	solid / dash / dashDot / lgDash / sysDash etc.
beginArrow / endArrow	true / endArrow.type="triangle" (types: none/arrow/triangle/diamond/oval/stealth)

Data Visualization Nodes

Table

<Table>
  <Col width="200" />
  <Col width="100" />
  <Tr>
    <Td bold="true" backgroundColor="DBEAFE">Name</Td>
    <Td bold="true" backgroundColor="DBEAFE">Score</Td>
  </Tr>
  <Tr>
    <Td>Alice</Td>
    <Td>95</Td>
  </Tr>
</Table>

• <Table>: defaultRowHeight (default 32), cellBorder ({color, width, dashType} — cell border style)
• <Col>: width (omit for equal distribution)
• <Tr>: height (omit to use defaultRowHeight, default 32)
• <Td>: text content + fontSize color bold italic underline strike subscript superscript highlight fontFamily textAlign backgroundColor colspan rowspan

Chart

<Chart chartType="bar" w="500" h="300" showLegend="true" chartColors='["0088CC","00AA00"]'>
  <ChartSeries name="Sales">
    <ChartDataPoint label="Jan" value="100" />
    <ChartDataPoint label="Feb" value="150" />
  </ChartSeries>
</Chart>

Attribute	Type / Values
chartType	bar / line / pie / area / doughnut / radar
showLegend	boolean
showTitle	boolean
title	string
chartColors	JSON array '["hex1","hex2"]'
radarStyle	standard / marker / filled (radar only)
sparkline	boolean — hides legend / axes / gridlines / margins for compact display (bar / line / area, e.g. h=40)

Sparkline example (KPI tile に inline 表示する用途):

<Chart chartType="bar" w="200" h="40" sparkline="true" chartColors='["0088CC"]'>
  <ChartSeries name="Sales">
    <ChartDataPoint label="Q1" value="100" />
    <ChartDataPoint label="Q2" value="200" />
    <ChartDataPoint label="Q3" value="150" />
    <ChartDataPoint label="Q4" value="300" />
  </ChartSeries>
</Chart>

Timeline

<Timeline direction="horizontal" w="1000" h="120">
  <TimelineItem date="Q1" title="Phase 1" description="Foundation" color="4CAF50" />
  <TimelineItem date="Q2" title="Phase 2" description="Development" color="2196F3" />
</Timeline>

Attribute	Values
direction	horizontal / vertical
dateColor	hex (date text color, default: 64748B)
titleColor	hex (title text color, default: 1E293B)
descriptionColor	hex (description text color, default: 64748B)
connectorColor	hex (axis line color, default: E2E8F0)
connectorGradient	linear-gradient(<angle>deg, <color> <pos>%, ...) — applies a linear gradient to the connector line
useColorForDate	true / false — when true, each item's date text uses that item's color (default: false)
fontFamily	font family name applied to all text (date / title / description). default: Noto Sans JP

<TimelineItem>: date (required) title (required) description color dateColor

• dateColor (per-item) overrides both Timeline.dateColor and useColorForDate.
• fontFamily changes the rendered font face only. Internal layout measurement still assumes the default label sizes (the bundled Noto Sans JP metrics), so very wide / very tall fonts may overflow within the same w / h. Pick a larger w / h if labels clip.

Matrix

<Matrix w="600" h="500">
  <MatrixAxes x="Cost" y="Impact" />
  <MatrixQuadrants topLeft="Quick Wins" topRight="Strategic" bottomLeft="Low Priority" bottomRight="Avoid" />
  <MatrixItem label="Initiative A" x="0.2" y="0.8" color="4CAF50" />
  <MatrixItem label="Initiative B" x="0.7" y="0.6" />
</Matrix>

• Coordinates: (0,0) = bottom-left, (1,1) = top-right (mathematical coordinate system)
• <Matrix>: axisLabelColor (default 64748B) quadrantLabelColor (default 94A3B8) itemLabelColor (default 1E293B) — text colors
• <MatrixAxes>: x y (axis labels, required)
• <MatrixQuadrants>: topLeft topRight bottomLeft bottomRight
• <MatrixItem>: label x y (required) color textColor (overrides itemLabelColor)

Tree

<Tree layout="vertical" nodeShape="roundRect" w="600" h="400">
  <TreeItem label="CEO" color="1D4ED8">
    <TreeItem label="CTO" color="0EA5E9">
      <TreeItem label="Engineer A" />
    </TreeItem>
    <TreeItem label="CFO" color="16A34A" />
  </TreeItem>
</Tree>

Attribute	Type / Values
layout	vertical / horizontal
nodeShape	rect / roundRect / ellipse
textColor	hex (node label text color, default: FFFFFF)
nodeWidth	number (default: 120)
nodeHeight	number (default: 40)
levelGap	number (default: 60)
siblingGap	number (default: 20)
connectorStyle	connectorStyle.color="333" connectorStyle.width="2"

<TreeItem> can be recursively nested. Only one root allowed. Attributes: label (required) color textColor (overrides the Tree-level textColor)

Flow

<Flow direction="horizontal" w="500" h="300">
  <FlowNode id="start" shape="flowChartTerminator" text="Start" color="4CAF50" />
  <FlowNode id="process" shape="flowChartProcess" text="Process" />
  <FlowNode id="decision" shape="flowChartDecision" text="OK?" color="FF9800" />
  <FlowNode id="end" shape="flowChartTerminator" text="End" color="E91E63" />
  <FlowConnection from="start" to="process" />
  <FlowConnection from="process" to="decision" />
  <FlowConnection from="decision" to="end" label="Yes" />
</Flow>

Attribute	Type / Values
direction	horizontal / vertical
nodeWidth	number (default: 120)
nodeHeight	number (default: 60)
nodeGap	number (default: 80)
connectorStyle	connectorStyle.color="hex" connectorStyle.width="2" connectorStyle.arrowType="arrow" connectorStyle.labelColor="hex"

<FlowNode> attributes:

Attribute	Type / Values
id	string (required) — Unique node identifier
shape	flowChartTerminator / flowChartProcess / flowChartDecision / flowChartInputOutput / flowChartDocument / flowChartPredefinedProcess / flowChartConnector / flowChartPreparation / flowChartManualInput / flowChartManualOperation / flowChartDelay / flowChartMagneticDisk
text	string (required) — Display text
color	hex color (e.g. "4CAF50") — Node fill color
textColor	hex color (e.g. "FFFFFF") — Text color
width	number — Individual node width (overrides nodeWidth)
height	number — Individual node height (overrides nodeHeight)

<FlowConnection>: from to (required) label color labelColor (label text color; overrides connectorStyle.labelColor, default: 64748B)

ProcessArrow

<ProcessArrow direction="horizontal" w="1000" h="80">
  <ProcessArrowStep label="Plan" color="4472C4" />
  <ProcessArrowStep label="Design" color="5B9BD5" />
  <ProcessArrowStep label="Develop" color="70AD47" />
  <ProcessArrowStep label="Release" color="ED7D31" />
</ProcessArrow>

Attribute	Type / Values
direction	horizontal / vertical
itemWidth	number (default: 150)
itemHeight	number (default: 80)
gap	number (default: -(itemHeight×0.35), negative for overlap)
fontSize	number (default: 14)
bold italic strike	boolean
underline	true / underline.style="wavy" underline.color="FF0000"
highlight	hex (highlight color)
fontFamily	string (default: Noto Sans JP)

<ProcessArrowStep>: label (required) color (default: 4472C4) textColor (default: FFFFFF)

Pyramid

<Pyramid direction="up" w="600" h="300">
  <PyramidLevel label="Strategy" color="E91E63" />
  <PyramidLevel label="Tactics" color="9C27B0" />
  <PyramidLevel label="Execution" color="673AB7" />
</Pyramid>

Attribute	Type / Values
direction	up (default) / down
fontSize	number (default: 14)
bold	boolean
fontFamily	string (default: Noto Sans JP)

<PyramidLevel>: label (required) color (default: 4472C4) textColor (default: FFFFFF)

• direction="up": First PyramidLevel is the apex (narrowest), last is the base (widest)
• direction="down": First PyramidLevel is the top (widest), last is the bottom (narrowest)

Child Element Tag Reference

Parent Node	Child Tags	Mapped Property
<Chart>	<ChartSeries> > <ChartDataPoint>	data
<Table>	<Col>, <Tr> > <Td>	columns, rows
<Text>	<B>, <I>, <A>, <U>, <S>, <Sub>, <Sup>, <Mark>, <Span>	runs (inline formatting)
<Li>	<B>, <I>, <A>, <U>, <S>, <Sub>, <Sup>, <Mark>, <Span>	runs (inline formatting)
<Td>	<B>, <I>, <A>, <U>, <S>, <Sub>, <Sup>, <Mark>, <Span>	runs (inline formatting)
<Timeline>	<TimelineItem>	items
<Matrix>	<MatrixAxes>, <MatrixQuadrants>, <MatrixItem>	axes, quadrants, items
<Tree>	<TreeItem> (recursive)	data
<Flow>	<FlowNode>, <FlowConnection>	nodes, connections
<ProcessArrow>	<ProcessArrowStep>	steps
<Pyramid>	<PyramidLevel>	levels

When the same property is specified via both attributes (JSON string) and child elements, child elements take precedence.

Slide Patterns

Basic Structure

<Slide>
  <VStack w="100%" h="max" padding="48" gap="24" alignItems="stretch">
    <Text fontSize="32" bold="true">Title</Text>
    <Text fontSize="14">Body text</Text>
  </VStack>
</Slide>

Two-Column Layout

<Slide>
  <VStack w="100%" h="max" padding="48" gap="24" alignItems="stretch">
    <Text fontSize="28" bold="true">Title</Text>
    <HStack gap="24" alignItems="start">
      <Text w="50%" padding="20" backgroundColor="FFFFFF" borderRadius="8" fontSize="14">Left column</Text>
      <Text w="50%" padding="20" backgroundColor="FFFFFF" borderRadius="8" fontSize="14">Right column</Text>
    </HStack>
  </VStack>
</Slide>

KPI Tile with Dot Indicator (color-coded category)

borderTop + borderRadius is now supported directly — <VStack borderRadius="16" borderTop.color="1D4ED8" borderTop.width="6"> produces a rounded tile whose top edge and both upper corners are painted in borderTop.color. The dot + uppercase label pattern below remains a useful alternative when you want the indicator inside the tile (e.g. to leave the corner radius uniform across mixed-color KPI rows).

<HStack gap="20" alignItems="stretch">
  <VStack grow="1" padding="20" backgroundColor="FFFFFF" borderRadius="16" border.color="E2E8F0" border.width="1" gap="12">
    <HStack gap="8" alignItems="center">
      <Shape shapeType="ellipse" w="8" h="8" fill.color="1D4ED8" line.width="0" />
      <Text fontSize="11" bold="true" color="1D4ED8" letterSpacing="1">MRR</Text>
    </HStack>
    <HStack alignItems="end" gap="4">
      <Text fontSize="44" bold="true" color="0F172A" lineHeight="1">84.2</Text>
      <Text fontSize="18" bold="true" color="0F172A" lineHeight="1" margin.bottom="4">M</Text>
    </HStack>
    <Text fontSize="11" color="64748B">QoQ +4.1%</Text>
  </VStack>
  <VStack grow="1" padding="20" backgroundColor="FFFFFF" borderRadius="16" border.color="E2E8F0" border.width="1" gap="12">
    <HStack gap="8" alignItems="center">
      <Shape shapeType="ellipse" w="8" h="8" fill.color="16A34A" line.width="0" />
      <Text fontSize="11" bold="true" color="16A34A" letterSpacing="1">NRR</Text>
    </HStack>
    <HStack alignItems="end" gap="4">
      <Text fontSize="44" bold="true" color="0F172A" lineHeight="1">118</Text>
      <Text fontSize="18" bold="true" color="0F172A" lineHeight="1" margin.bottom="4">%</Text>
    </HStack>
    <Text fontSize="11" color="64748B">QoQ +2.0pt</Text>
  </VStack>
</HStack>

• The colored dot + matching uppercase label carries the category color without needing a top-edge stripe.
• Keep the dot small (6–10 px) so it reads as a category indicator, not a bullet.
• For a more prominent variant, thicken the dot to a short horizontal bar (Shape shapeType="roundRect" w="24" h="3" filled with the category color). To make the dot pop on dark backgrounds, attach a small glow to the Shape itself (glow.size="10" glow.opacity="0.7" glow.color="<category color>") — it stays editable in PowerPoint as a native shape effect.

Notes

• Colors do not need # prefix (FF0000)
• alignItems / justifyContent use start / end (not left / right)
• Property names are w / h (not width / height)
• Children of Layer require x and y
• Tree must have exactly one root <TreeItem>
• For decorative agenda / section numbering, prefer 01. or #01 instead of pure numeric 01. LibreOffice-based fallback PNG conversion can drop leading zeros from pure numeric text, while the PPTX itself remains correct in PowerPoint.

Build Diagnostics

Building emits warnings (diagnostics) for layout problems that can be detected from the computed coordinates — fix the XML when these appear:

• NODE_OUT_OF_BOUNDS — a node's rectangle extends beyond the slide bounds. The message identifies the slide, the node (tag / id / path), and the overflowing edges. Shrink or move the node, reduce content, or split the slide. Nodes with rotate and Line / Arrow are not checked (their final bounds cannot be derived statically), so verify those visually.
• NODE_OVERLAP — siblings inside VStack / HStack overlap unintentionally (e.g. via top / left offsets). Intentional overlaps are NOT reported: children of Layer, position="absolute" nodes, negative margin / gap (e.g. ProcessArrow's default negative gap), and nodes with an explicit zIndex. To keep a deliberate overlap, express it with one of those mechanisms.

---

5. ファイルへの保存

Write ツールを使い、生成した XML をファイルに書き出す。

• デフォルトのファイル名: slides.pom.xml
• ユーザーが別のファイル名を指定した場合はそれに従う

6. セルフレビュー（レンダリング → 自己批評 → 修正）

保存した XML をレンダリングして画像として確認し、デザイン上の問題を修正するループ。スライド外へのはみ出しと要素同士の重なりは build 時の警告（NODE_OUT_OF_BOUNDS / NODE_OVERLAP）として機械的に検出されるため、画像批評は警告では拾えない項目（階層・余白バランス・密度など）に集中する。

レンダリング手段の確認

pom（pom-cli）があれば pom render で各スライドを直接 PNG 化できる（LibreOffice 等の外部ツールは不要）。pom が無い場合はこのステップをスキップし、完了報告で「レンダリング確認は未実施」と伝える。

ループ手順

1. レンダリング: 新規生成・全体再生成では pom render <保存したファイル名> -o /tmp/pom-review で全スライドの PNG（slide-01.png 形式）を出力する。N 枚目だけの更新・1 枚追加では、初回から pom render <保存したファイル名> -o /tmp/pom-review --slides 2,5 のように変更した slide 番号だけを出力する。新規生成・全体再生成の 2 周目以降も、修正した slide だけを再レンダリングしてよい
2. ビルド警告の対応: pom render / pom build は、はみ出し・重なりがあると [NODE_OUT_OF_BOUNDS] / [NODE_OVERLAP] の警告メッセージとともに失敗する。メッセージにはスライド番号・ノード（タグ / id / ルートからのパス）・はみ出し方向が含まれるので、該当ノードを修正して 1 に戻る。意図的な重なりは Layer / zIndex / 負 margin のいずれかで表現すれば警告されない
3. 批評: 各 PNG を Read ツールで読み、下のチェックリストで全スライドを評価する
4. 修正: 問題があれば XML を修正して 1 に戻る

fallback: soffice チェーン（render 未対応の古い pom-cli 用）

pom render がエラーになる場合（render サブコマンド導入前の pom-cli）のみ、以下で代替する。LibreOffice（soffice）と、pdftoppm（poppler）または ImageMagick が必要。どちらも無い場合はセルフレビューをスキップし、完了報告でその旨を伝える。

1. ビルド: pom build <保存したファイル名> -o /tmp/pom-review/slides.pptx
2. PDF 化: soffice --headless --convert-to pdf --outdir /tmp/pom-review /tmp/pom-review/slides.pptx
3. PNG 化: pdftoppm -png -r 96 /tmp/pom-review/slides.pdf /tmp/pom-review/slide（ImageMagick の場合は magick -density 96 /tmp/pom-review/slides.pdf /tmp/pom-review/slide-%02d.png）

批評チェックリスト

• はみ出し・重なり: スライド外へのはみ出しと要素同士の重なりは build 時の警告で検出済みの前提。画像では警告に出ない残り（テキストの見切れ、rotate したノードや Layer 内の意図しない衝突）だけを確認する（見つけたら最優先で修正する）
• 余白: 外周 padding が確保されているか。要素が窮屈になっていないか、一部だけ不自然に空いていないか
• 整列: 揃うべき左端・上端が揃っているか。並べたカードの幅が均等か。アクセントバー・番号・アイコンと隣のテキストの揃え（alignItems="center" が基本。視覚的に浮く場合は end を試す）
• 階層: タイトルが一目で本文と区別できるか。視線の流れ（左上 → 右下）が自然か
• 配色: Step 3 で決めたパレットから逸脱した色が混入していないか。テキストと背景のコントラストが十分か
• 密度: 詰め込みすぎのスライドがないか（あれば 2 枚に分割する）
• 一貫性: スライド間で外周 padding・タイトル位置・配色が統一されているか

終了条件

以下のいずれかを満たしたらループを終了する:

• チェックリスト上の重大な問題（はみ出し・重なり・可読性不足）が全スライドで無くなった
• 修正ループを 3 周した（3 周しても残る問題は、完了報告で残課題として明記する）
• 同じ問題への修正を 2 回試みても改善しなかった（その項目は残課題として報告し、他の問題の修正は続ける）

7. プレビューの起動（オプション）

Bash ツールで pom-cli の有無を確認する。最初に process list や待受ポートを調べ、対象ファイルの pom preview がすでに起動中なら、その server と URL をそのまま再利用する。preview はファイル変更を監視して自動更新するため、incremental edit のたびに重複起動しない。

起動中の server がなく、pom-cli がインストール済みであれば Step 5 で決定したファイル名を使ってプレビューサーバーをバックグラウンドで起動する。pom preview は常駐プロセスであるため、run_in_background: true（Claude Code）または & サフィックスを必ず使う。

if command -v pom >/dev/null 2>&1; then
  pom preview <Step 5 で決定したファイル名> &
fi

pom-cli がない場合はスキップしてその旨を伝える。

8. 完了報告

以下を報告する:

• 保存したファイル名
• 生成または編集したスライドの枚数と各スライドのタイトル。incremental edit では実施したケースと対象 slide も明記する
• strict validation の結果（対象外 slide の既存問題が残った場合はその内容）
• セルフレビューの結果: 実施した修正の概要と残課題（スキップした場合はその理由）
• preview server の起動または再利用に成功した場合: 実際に確認した URL（port 3000 とは限らない）
• preview server の起動に失敗した場合: 未起動であることとエラーの概要
• pom-cli がない場合: npm install -g @hirokisakabe/pom-cli でインストールできることを案内する