@ncukondo/slide-generation 0.1.0

package/templates/data/table.yaml

@@ -0,0 +1,94 @@
+name: table
+description: "基本テーブル"
+category: data
+
+schema:
+  type: object
+  required:
+    - title
+    - headers
+    - rows
+  properties:
+    title:
+      type: string
+      description: "スライドタイトル"
+    caption:
+      type: string
+      description: "テーブルキャプション（オプション）"
+    headers:
+      type: array
+      minItems: 1
+      description: "ヘッダー行"
+      items:
+        type: string
+    align:
+      type: array
+      description: "各列の配置（left, center, right）"
+      items:
+        type: string
+        enum:
+          - left
+          - center
+          - right
+    rows:
+      type: array
+      minItems: 1
+      description: "データ行"
+      items:
+        type: array
+        items:
+          type: string
+
+example:
+  title: "製品比較表"
+  caption: "2024年Q1時点のデータ"
+  headers: ["製品名", "価格", "評価"]
+  align: ["left", "right", "center"]
+  rows:
+    - ["製品A", "¥10,000", "★★★★☆"]
+    - ["製品B", "¥15,000", "★★★★★"]
+    - ["製品C", "¥8,000", "★★★☆☆"]
+
+output: |
+  # {{ content.title }}
+
+  {%- if content.caption %}
+
+  *{{ content.caption }}*
+
+  {%- endif %}
+
+  {% macro escape_pipe(text) %}{{ text | replace("|", "\\|") }}{% endmacro %}
+  {% macro align_marker(alignment) %}{% if alignment == 'center' %}:---:{% elif alignment == 'right' %}---:{% else %}:---{% endif %}{% endmacro %}
+  | {% for header in content.headers %}{{ escape_pipe(header) }} | {% endfor %}
+
+  |{% for header in content.headers %} {% if content.align and content.align[loop.index0] %}{{ align_marker(content.align[loop.index0]) }}{% else %}---{% endif %} |{% endfor %}
+
+  {% for row in content.rows %}| {% for cell in row %}{{ escape_pipe(cell) }} | {% endfor %}
+
+  {% endfor %}
+
+css: |
+  .table-slide table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 1em;
+  }
+  .table-slide th,
+  .table-slide td {
+    border: 1px solid #ddd;
+    padding: 0.5em 1em;
+    text-align: left;
+  }
+  .table-slide th {
+    background-color: #f5f5f5;
+    font-weight: bold;
+  }
+  .table-slide tr:nth-child(even) {
+    background-color: #fafafa;
+  }
+  .table-slide caption {
+    font-style: italic;
+    margin-bottom: 0.5em;
+    color: #666;
+  }

package/templates/diagrams/cycle-diagram.yaml

@@ -0,0 +1,71 @@
+name: cycle-diagram
+description: "循環図（3〜6要素対応）"
+category: diagrams
+
+schema:
+  type: object
+  required:
+    - title
+    - nodes
+  properties:
+    title:
+      type: string
+      description: "スライドタイトル"
+    nodes:
+      type: array
+      minItems: 3
+      maxItems: 6
+      description: "循環図のノード"
+      items:
+        type: object
+        required:
+          - label
+        properties:
+          label:
+            type: string
+            description: "ノードのラベル"
+          icon:
+            type: string
+            description: "アイコン参照"
+          color:
+            type: string
+            pattern: "^#[0-9A-Fa-f]{6}$"
+            default: "#666666"
+            description: "ノードの色"
+
+example:
+  title: "PDCAサイクル"
+  nodes:
+    - { label: "Plan", icon: "planning", color: "#4CAF50" }
+    - { label: "Do", icon: "action", color: "#2196F3" }
+    - { label: "Check", icon: "analysis", color: "#FF9800" }
+    - { label: "Act", icon: "improvement", color: "#9C27B0" }
+
+output: |
+  <!-- _class: diagram-slide cycle-slide -->
+
+  # {{ content.title }}
+
+  <div class="cycle-container cycle-{{ content.nodes | length }}">
+    {%- for node in content.nodes %}
+    <div class="cycle-node" style="--node-color: {{ node.color | default('#666666') }}; --node-index: {{ loop.index0 }};">
+      {%- if node.icon %}
+      <span class="node-icon">{{ icons.render(node.icon) }}</span>
+      {%- endif %}
+      <span class="node-label">{{ node.label }}</span>
+    </div>
+    {%- endfor %}
+  </div>
+
+css: |
+  .cycle-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+  }
+  .cycle-node {
+    background: var(--node-color);
+    border-radius: 50%;
+    padding: 1em;
+  }

package/templates/diagrams/flow-chart.yaml

@@ -0,0 +1,141 @@
+name: flow-chart
+description: "フローチャート"
+category: diagrams
+
+schema:
+  type: object
+  required:
+    - title
+    - steps
+  properties:
+    title:
+      type: string
+      description: "スライドタイトル"
+    steps:
+      type: array
+      minItems: 2
+      description: "フローチャートのステップ"
+      items:
+        type: object
+        required:
+          - label
+        properties:
+          label:
+            type: string
+            description: "ステップのラベル"
+          type:
+            type: string
+            enum:
+              - start
+              - process
+              - decision
+              - end
+            default: process
+            description: "ステップの種類"
+          icon:
+            type: string
+            description: "アイコン参照"
+          color:
+            type: string
+            pattern: "^#[0-9A-Fa-f]{6}$"
+            default: "#2196F3"
+            description: "ステップの色"
+          branches:
+            type: array
+            description: "分岐（decision タイプの場合）"
+            items:
+              type: object
+              required:
+                - condition
+                - target
+              properties:
+                condition:
+                  type: string
+                  description: "分岐条件"
+                target:
+                  type: string
+                  description: "分岐先のラベル"
+    direction:
+      type: string
+      enum:
+        - vertical
+        - horizontal
+      default: vertical
+      description: "フローの方向"
+
+example:
+  title: "承認フロー"
+  direction: vertical
+  steps:
+    - { label: "申請", type: "start", color: "#4CAF50" }
+    - { label: "上司確認", type: "process" }
+    - { label: "承認？", type: "decision", branches: [{ condition: "Yes", target: "完了" }, { condition: "No", target: "差し戻し" }] }
+    - { label: "差し戻し", type: "process", color: "#FF5722" }
+    - { label: "完了", type: "end", color: "#9C27B0" }
+
+output: |
+  <!-- _class: diagram-slide flow-slide -->
+
+  # {{ content.title }}
+
+  <div class="flow-container flow-{{ content.direction | default('vertical') }}">
+    {%- for step in content.steps %}
+    <div class="flow-step flow-{{ step.type | default('process') }}" style="--step-color: {{ step.color | default('#2196F3') }};">
+      {%- if step.icon %}
+      <span class="step-icon">{{ icons.render(step.icon) }}</span>
+      {%- endif %}
+      <span class="step-label">{{ step.label }}</span>
+      {%- if step.branches %}
+      <div class="step-branches">
+        {%- for branch in step.branches %}
+        <span class="branch-label">{{ branch.condition }}: {{ branch.target }}</span>
+        {%- endfor %}
+      </div>
+      {%- endif %}
+    </div>
+    {%- if not loop.last %}
+    <div class="flow-arrow">→</div>
+    {%- endif %}
+    {%- endfor %}
+  </div>
+
+css: |
+  .flow-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5em;
+    flex-wrap: wrap;
+  }
+  .flow-container.flow-vertical {
+    flex-direction: column;
+  }
+  .flow-container.flow-horizontal {
+    flex-direction: row;
+  }
+  .flow-step {
+    background: var(--step-color);
+    color: white;
+    padding: 1em 1.5em;
+    border-radius: 8px;
+    text-align: center;
+  }
+  .flow-step.flow-start,
+  .flow-step.flow-end {
+    border-radius: 24px;
+  }
+  .flow-step.flow-decision {
+    transform: rotate(45deg);
+    padding: 1.5em;
+  }
+  .flow-step.flow-decision .step-label {
+    transform: rotate(-45deg);
+    display: block;
+  }
+  .flow-arrow {
+    font-size: 1.5em;
+    color: #666;
+  }
+  .flow-vertical .flow-arrow {
+    transform: rotate(90deg);
+  }

package/templates/diagrams/hierarchy.yaml

@@ -0,0 +1,117 @@
+name: hierarchy
+description: "階層図・組織図"
+category: diagrams
+
+schema:
+  type: object
+  required:
+    - title
+    - root
+  properties:
+    title:
+      type: string
+      description: "スライドタイトル"
+    root:
+      type: object
+      required:
+        - label
+      description: "ルートノード"
+      properties:
+        label:
+          type: string
+          description: "ノードのラベル"
+        icon:
+          type: string
+          description: "アイコン参照"
+        color:
+          type: string
+          pattern: "^#[0-9A-Fa-f]{6}$"
+          default: "#2196F3"
+          description: "ノードの色"
+        children:
+          type: array
+          description: "子ノードの配列"
+
+example:
+  title: "組織図"
+  root:
+    label: "CEO"
+    icon: "user"
+    color: "#1976D2"
+    children:
+      - label: "CTO"
+        color: "#388E3C"
+        children:
+          - { label: "開発部" }
+          - { label: "インフラ部" }
+      - label: "CFO"
+        color: "#F57C00"
+        children:
+          - { label: "経理部" }
+          - { label: "財務部" }
+      - label: "COO"
+        color: "#7B1FA2"
+        children:
+          - { label: "営業部" }
+          - { label: "マーケ部" }
+
+output: |
+  <!-- _class: diagram-slide hierarchy-slide -->
+
+  # {{ content.title }}
+
+  {% macro renderNode(node, depth) %}
+  <div class="hierarchy-node depth-{{ depth }}" style="--node-color: {{ node.color | default('#2196F3') }};">
+    <div class="node-content">
+      {%- if node.icon %}
+      <span class="node-icon">{{ icons.render(node.icon) }}</span>
+      {%- endif %}
+      <span class="node-label">{{ node.label }}</span>
+    </div>
+    {%- if node.children %}
+    <div class="node-children">
+      {%- for child in node.children %}
+      {{ renderNode(child, depth + 1) }}
+      {%- endfor %}
+    </div>
+    {%- endif %}
+  </div>
+  {% endmacro %}
+
+  <div class="hierarchy-container">
+    {{ renderNode(content.root, 0) }}
+  </div>
+
+css: |
+  .hierarchy-container {
+    display: flex;
+    justify-content: center;
+    padding: 1em;
+  }
+  .hierarchy-node {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .node-content {
+    background: var(--node-color);
+    color: white;
+    padding: 0.75em 1.25em;
+    border-radius: 8px;
+    text-align: center;
+    margin-bottom: 1em;
+  }
+  .node-children {
+    display: flex;
+    gap: 1em;
+    position: relative;
+  }
+  .node-children::before {
+    content: '';
+    position: absolute;
+    top: -0.5em;
+    left: 50%;
+    width: 1px;
+    height: 0.5em;
+    background: #ccc;
+  }

package/templates/diagrams/matrix.yaml

@@ -0,0 +1,163 @@
+name: matrix
+description: "2x2マトリクス"
+category: diagrams
+
+schema:
+  type: object
+  required:
+    - title
+    - quadrants
+  properties:
+    title:
+      type: string
+      description: "スライドタイトル"
+    xAxis:
+      type: object
+      properties:
+        label:
+          type: string
+          description: "X軸のラベル"
+        low:
+          type: string
+          description: "X軸の低い側のラベル"
+        high:
+          type: string
+          description: "X軸の高い側のラベル"
+    yAxis:
+      type: object
+      properties:
+        label:
+          type: string
+          description: "Y軸のラベル"
+        low:
+          type: string
+          description: "Y軸の低い側のラベル"
+        high:
+          type: string
+          description: "Y軸の高い側のラベル"
+    quadrants:
+      type: array
+      minItems: 4
+      maxItems: 4
+      description: "4つの象限（左上、右上、左下、右下の順）"
+      items:
+        type: object
+        required:
+          - label
+        properties:
+          label:
+            type: string
+            description: "象限のラベル"
+          color:
+            type: string
+            pattern: "^#[0-9A-Fa-f]{6}$"
+            default: "#E3F2FD"
+            description: "象限の背景色"
+          items:
+            type: array
+            description: "象限内の項目"
+            items:
+              type: string
+
+example:
+  title: "アイゼンハワー・マトリクス"
+  xAxis:
+    label: "緊急度"
+    low: "低"
+    high: "高"
+  yAxis:
+    label: "重要度"
+    low: "低"
+    high: "高"
+  quadrants:
+    - label: "第2象限：計画"
+      color: "#C8E6C9"
+      items: ["長期目標", "スキル開発"]
+    - label: "第1象限：実行"
+      color: "#FFCDD2"
+      items: ["締切タスク", "危機対応"]
+    - label: "第4象限：削除"
+      color: "#F5F5F5"
+      items: ["時間の浪費", "些細な作業"]
+    - label: "第3象限：委任"
+      color: "#FFF9C4"
+      items: ["割り込み", "一部の会議"]
+
+output: |
+  <!-- _class: diagram-slide matrix-slide -->
+
+  # {{ content.title }}
+
+  <div class="matrix-container">
+    {%- if content.yAxis %}
+    <div class="matrix-y-axis">
+      <span class="axis-label">{{ content.yAxis.label | default('') }}</span>
+      <span class="axis-high">{{ content.yAxis.high | default('高') }}</span>
+      <span class="axis-low">{{ content.yAxis.low | default('低') }}</span>
+    </div>
+    {%- endif %}
+    <div class="matrix-grid">
+      {%- for quadrant in content.quadrants %}
+      <div class="matrix-quadrant quadrant-{{ loop.index }}" style="--quadrant-color: {{ quadrant.color | default('#E3F2FD') }};">
+        <span class="quadrant-label">{{ quadrant.label }}</span>
+        {%- if quadrant.items %}
+        <ul class="quadrant-items">
+          {%- for item in quadrant.items %}
+          <li>{{ item }}</li>
+          {%- endfor %}
+        </ul>
+        {%- endif %}
+      </div>
+      {%- endfor %}
+    </div>
+    {%- if content.xAxis %}
+    <div class="matrix-x-axis">
+      <span class="axis-low">{{ content.xAxis.low | default('低') }}</span>
+      <span class="axis-label">{{ content.xAxis.label | default('') }}</span>
+      <span class="axis-high">{{ content.xAxis.high | default('高') }}</span>
+    </div>
+    {%- endif %}
+  </div>
+
+css: |
+  .matrix-container {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: 1fr auto;
+    gap: 0.5em;
+    height: 80%;
+  }
+  .matrix-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    gap: 2px;
+  }
+  .matrix-quadrant {
+    background: var(--quadrant-color);
+    padding: 1em;
+    display: flex;
+    flex-direction: column;
+  }
+  .quadrant-label {
+    font-weight: bold;
+    margin-bottom: 0.5em;
+  }
+  .quadrant-items {
+    font-size: 0.9em;
+    margin: 0;
+    padding-left: 1.2em;
+  }
+  .matrix-x-axis,
+  .matrix-y-axis {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 0.8em;
+    color: #666;
+  }
+  .matrix-y-axis {
+    flex-direction: column;
+    writing-mode: vertical-rl;
+    transform: rotate(180deg);
+  }