# fe-berserker/pen2ppt architecture

> Architecture diagram of the GitHub repository fe-berserker/pen2ppt, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/fe-berserker/pen2ppt
- Repository: https://github.com/fe-berserker/pen2ppt

## Overview

Pen2ppt is an Agent Skill that turns Pencil designs into editable PowerPoint decks. The main workflow exports each top-level frame through Pencil MCP, combines the HTML slides, then renders them with headless Chromium and dom-to-pptx. The export stage freezes layout and can embed compatible images with original bytes; a post-export pass repairs CJK font metadata. Workspace configuration organizes output by deck. The README documents these capabilities, but source excerpts for Pencil MCP dispatch and workspace use during export are incomplete, so those links are not inferred.

Main entry points: [`scripts/export-pptx.mjs`](https://github.com/fe-berserker/pen2ppt/blob/main/scripts/export-pptx.mjs) (PPTX renderer), [`scripts/build-combined.mjs`](https://github.com/fe-berserker/pen2ppt/blob/main/scripts/build-combined.mjs) (HTML stitching), [`scripts/fix-cjk-fonts.mjs`](https://github.com/fe-berserker/pen2ppt/blob/main/scripts/fix-cjk-fonts.mjs) (CJK font repair), [`scripts/workspace.mjs`](https://github.com/fe-berserker/pen2ppt/blob/main/scripts/workspace.mjs) (Workspace config)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_design["Design export"]
  node_frames["Frame HTML"]
end

subgraph group_conversion["HTML conversion"]
  node_combine["HTML stitching<br/>[build-combined.mjs]"]
  node_combined["Combined HTML"]
end

subgraph group_output["PPTX output"]
  node_export["PPTX renderer<br/>[export-pptx.mjs]"]
  node_patch["Image handling"]
  node_pptx["Editable PPTX"]
  node_fontfix["CJK font repair<br/>[fix-cjk-fonts.mjs]"]
end

subgraph group_workspace["Export workspace"]
  node_workspace[("Workspace config<br/>[workspace.mjs]")]
  node_deckdir["Deck output folder"]
end

node_user(("User"))
node_agent["Agent skill<br/>[SKILL.md]"]
node_pencil{{"Pencil MCP"}}
node_chromium{{"Headless Chromium"}}

node_user -->|"requests conversion"| node_agent
node_agent -->|"exports frames"| node_pencil
node_pencil -->|"returns HTML"| node_frames
node_frames -->|"reads slides"| node_combine
node_combine -->|"writes HTML"| node_combined
node_combined -->|"loads input"| node_export
node_export -->|"patches bundle"| node_patch
node_export -->|"launches browser"| node_chromium
node_export -->|"writes deck"| node_pptx
node_export -->|"repairs fonts"| node_fontfix
node_fontfix -->|"rewrites package"| node_pptx
node_user -->|"sets path"| node_workspace
node_workspace -->|"creates folder"| node_deckdir

click node_agent "https://github.com/fe-berserker/pen2ppt/blob/main/SKILL.md"
click node_combine "https://github.com/fe-berserker/pen2ppt/blob/main/scripts/build-combined.mjs"
click node_export "https://github.com/fe-berserker/pen2ppt/blob/main/scripts/export-pptx.mjs"
click node_patch "https://github.com/fe-berserker/pen2ppt/blob/main/scripts/native-image-patch.mjs"
click node_fontfix "https://github.com/fe-berserker/pen2ppt/blob/main/scripts/fix-cjk-fonts.mjs"
click node_workspace "https://github.com/fe-berserker/pen2ppt/blob/main/scripts/workspace.mjs"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_frames,node_user toneBlue
class node_combine,node_combined toneAmber
class node_export,node_patch,node_pptx,node_fontfix toneMint
class node_workspace,node_deckdir toneRose
class node_agent toneTeal
class node_pencil,node_chromium toneIndigo
```

## Components

### Design export

- **Frame HTML**

### HTML conversion

- [HTML stitching](https://github.com/fe-berserker/pen2ppt/blob/main/scripts/build-combined.mjs): `scripts/build-combined.mjs`
- **Combined HTML**

### PPTX output

- [PPTX renderer](https://github.com/fe-berserker/pen2ppt/blob/main/scripts/export-pptx.mjs): `scripts/export-pptx.mjs`
- [Image handling](https://github.com/fe-berserker/pen2ppt/blob/main/scripts/native-image-patch.mjs): `scripts/native-image-patch.mjs`
- **Editable PPTX**
- [CJK font repair](https://github.com/fe-berserker/pen2ppt/blob/main/scripts/fix-cjk-fonts.mjs): `scripts/fix-cjk-fonts.mjs`

### Export workspace

- [Workspace config](https://github.com/fe-berserker/pen2ppt/blob/main/scripts/workspace.mjs): `scripts/workspace.mjs`
- **Deck output folder**

### Other components

- **User**
- [Agent skill](https://github.com/fe-berserker/pen2ppt/blob/main/SKILL.md): `SKILL.md`
- **Pencil MCP**
- **Headless Chromium**

## Connections

- User → Agent skill: requests conversion
- Agent skill → Pencil MCP: exports frames
- Pencil MCP → Frame HTML: returns HTML
- Frame HTML → HTML stitching: reads slides
- HTML stitching → Combined HTML: writes HTML
- Combined HTML → PPTX renderer: loads input
- PPTX renderer → Image handling: patches bundle
- PPTX renderer → Headless Chromium: launches browser
- PPTX renderer → Editable PPTX: writes deck
- PPTX renderer → CJK font repair: repairs fonts
- CJK font repair → Editable PPTX: rewrites package
- User → Workspace config: sets path
- Workspace config → Deck output folder: creates folder