はじめに
CTO室の尾崎です。
エンジニアの皆さん、発表資料を作る際にこんな悩みはありませんか？
- PowerPoint で図を描くのが面倒
- Markdown で書いた資料をパワポ形式（PPTX）に変換したい
- Mermaid で書いた図表も一緒にパワポ形式に埋め込みたい
- コードと図表を一つの Markdown ファイルで管理したい
本記事では、MarpとMermaidを組み合わせて、Markdown ファイルから パワポ形式（PPTX）のファイルを生成する方法を紹介します。特に、Mermaid 図を自動的に画像化して埋め込むことで、Markdown ファイルのみで図や文字を含めた発表資料を完結させる方法を解説します。
GitHub リポジトリ: https://github.com/ozaki-m/marp-mermaid
このツールが解決する課題
従来の課題
-
図表作成の手間
- PowerPoint で図を手動で描く必要がある
- 図表の修正時に再描画が必要
- バージョン管理が難しい
-
Markdown と図表の分離
- Markdown で資料を書いても、図表は別ツールで作成
- 図表の更新と Markdown の同期が面倒
-
変換の手間
- Markdown → PPTX の変換ツールはあるが、Mermaid 図は対応していない
- 図表を手動で画像化して埋め込む必要がある
このツールの解決策
✅ Markdown ファイル一つで完結
✅ Mermaid 図を自動的に画像化
✅ コマンド一つで PPTX 変換
✅ 10 種類以上の図表タイプに対応
✅ 図表タイプ別の最適化設定
主な機能・特徴
対応している Mermaid 図表タイプ
このツールは以下の 10 種類の Mermaid 図表を自動検出し、最適化された設定で画像化します。
| 図表タイプ | 説明 | 最小サイズ | タイムアウト |
|---|---|---|---|
| ガントチャート | プロジェクト管理スケジュール | 1000×400px | 30 秒 |
| タイムライン | 時系列のイベント表示 | 1000×400px | 30 秒 |
| シーケンス図 | システム間の処理フロー | 800×400px | 25 秒 |
| ER 図 | データベース設計図 | 600×400px | 20 秒 |
| フローチャート | 処理フローの可視化 | 500×300px | 15 秒 |
| 状態図 | 状態遷移の表現 | 600×400px | 20 秒 |
| クラス図 | オブジェクト指向設計 | 700×500px | 25 秒 |
| 円グラフ | データの構成比 | 500×500px | 15 秒 |
| Git グラフ | ブランチとマージ履歴 | 800×400px | 25 秒 |
| ユーザージャーニー図 | ユーザー体験の流れ | 900×400px | 25 秒 |
技術スタック
- Node.js: 実行環境
- Puppeteer: Mermaid 図の画像化（Headless Chrome）
- Marp CLI: Markdown → PPTX 変換
- LibreOffice: PPTX を編集するために必要
- Mermaid.js: 図表のレンダリング
インストール方法
必要な環境
- Node.js 14.0.0 以上
- npm 6.0.0 以上
- LibreOffice Impress（PPTX ファイルを編集するために必要）
インストール手順
1. LibreOffice Impress のインストール
PPTX ファイルを編集するために、LibreOffice Impress をインストールします。
# macOS（Homebrew を使用する場合）
brew install --cask libreoffice
# Ubuntu/Debian
sudo apt-get update
sudo apt-get install libreoffice
# Windows
# https://www.libreoffice.org/download/download/ からダウンロードしてインストール
2. Node.js パッケージのインストール
# 必要なグローバルパッケージをインストール
npm install -g @marp-team/marp-cli
npm install -g puppeteer
# プロジェクトをクローンまたはダウンロード
git clone https://github.com/ozaki-m/marp-mermaid.git
cd marp-mermaid
# スクリプトに実行権限を付与
chmod +x marp-mermaid.js
グローバルコマンドとして使用する場合（推奨）
# スクリプトをグローバルパスにコピー
sudo cp marp-mermaid.js /usr/local/bin/marp-mermaid
sudo chmod +x /usr/local/bin/marp-mermaid
これで、どのディレクトリからでもmarp-mermaidコマンドが使用できます。
基本的な使い方
1. Markdown ファイルの準備
まず、Marp 形式の Markdown ファイルを作成します。Mermaid 図は ```mermaidコードブロックで記述します。
---
marp: true
size: 16:9
paginate: true
theme: default
---
# プロジェクト進捗報告
## 開発スケジュール
```mermaid
gantt
title プロジェクト開発スケジュール
dateFormat YYYY-MM-DD
section 設計フェーズ
要件定義 :done, des1, 2024-01-01, 2024-01-15
基本設計 :done, des2, 2024-01-16, 2024-01-30
詳細設計 :active, des3, 2024-01-31, 2024-02-15
section 開発フェーズ
フロントエンド開発 : dev1, 2024-02-16, 2024-03-15
バックエンド開発 : dev2, 2024-02-16, 2024-03-20
```
システムアーキテクチャ
### 2. PPTXへの変換
```bash
# 基本的な使用方法
node marp-mermaid.js presentation.md
# グローバルコマンドとして使用
marp-mermaid presentation.md
3. 出力結果
実行すると以下のファイルが生成されます：
-
presentation.pptx- 変換された PowerPoint ファイル -
images/mermaid-diagram-0.png- 1 つ目の Mermaid 図の画像 -
images/mermaid-diagram-1.png- 2 つ目の Mermaid 図の画像 - （一時ファイル
presentation-modified.mdは自動削除されます）
実例：様々な図表タイプの使用例
ガントチャート
プロジェクト管理でよく使われるガントチャートです。横長レイアウトに最適化されています。
```mermaid
gantt
title プロジェクト開発スケジュール
dateFormat YYYY-MM-DD
section 設計フェーズ
要件定義 :done, des1, 2024-01-01, 2024-01-15
基本設計 :done, des2, 2024-01-16, 2024-01-30
詳細設計 :active, des3, 2024-01-31, 2024-02-15
section 開発フェーズ
フロントエンド開発 : dev1, 2024-02-16, 2024-03-15
バックエンド開発 : dev2, 2024-02-16, 2024-03-20
```
### シーケンス図
システム間の処理フローを表現するシーケンス図です。横長レイアウトに最適化されています。
```markdown
```mermaid
sequenceDiagram
participant U as ユーザー
participant F as フロントエンド
participant A as API サーバー
participant D as データベース
participant C as キャッシュ
U->>F: ログイン要求
F->>A: 認証API呼び出し
A->>C: キャッシュ確認
C-->>A: キャッシュなし
A->>D: ユーザー情報照会
D-->>A: ユーザー情報返却
A->>C: セッション保存
A-->>F: 認証トークン返却
F-->>U: ログイン成功
### ER図
データベース設計で使用するER図です。
```markdown
```mermaid
erDiagram
USER {
int id PK
string username
string email
datetime created_at
}
ORDER {
int id PK
int user_id FK
decimal total
datetime order_date
}
PRODUCT {
int id PK
string name
decimal price
int stock
}
USER ||--o{ ORDER : places
ORDER }o--o{ PRODUCT : contains
### フローチャート
アプリケーションの処理フローを表現します。
```markdown
```mermaid
flowchart TD
A[開始] --> B{条件判定}
B -->|Yes| C[処理A]
B -->|No| D[処理B]
C --> E[終了]
D --> E
### 状態図
システムの状態遷移を表現します。
```markdown
```mermaid
stateDiagram-v2
[*] --> ログイン画面
ログイン画面 --> 認証中: ログイン試行
認証中 --> ログイン成功: 認証OK
認証中 --> ログイン失敗: 認証NG
ログイン失敗 --> ログイン画面: 再試行
ログイン成功 --> メインメニュー: 画面遷移
メインメニュー --> [*]: ログアウト
### クラス図
オブジェクト指向設計のクラス関係図です。
```markdown
```mermaid
classDiagram
class User {
+int id
+string username
+string email
+login()
+logout()
}
class Order {
+int id
+int userId
+decimal totalAmount
+calculateTotal()
}
User --> Order
### 円グラフ
データの構成比を視覚化します。
```markdown
```mermaid
pie title 売上構成比
"Webアプリ開発" : 42
"モバイルアプリ開発" : 28
"システム保守" : 15
"コンサルティング" : 10
"その他" : 5
### Gitグラフ
ブランチとマージの履歴を可視化します。
```markdown
```mermaid
gitGraph
commit id: "初期コミット"
commit id: "基本機能実装"
branch "feature/user-auth"
checkout "feature/user-auth"
commit id: "ログイン機能"
checkout main
merge "feature/user-auth"
commit id: "v1.0.0 リリース"
### ユーザージャーニー図
ユーザー体験の流れと感情を表現します。
```markdown
```mermaid
journey
title ECサイトでの購入体験
section 商品発見
商品検索: 5: ユーザー
商品詳細確認: 5: ユーザー
section 購入手続き
カートに追加: 5: ユーザー
決済処理: 3: ユーザー, システム
section 購入後
商品受取: 5: ユーザー
## 技術的な仕組み
### 処理フロー
このツールは以下のステップで動作します：
1. **Mermaid図の検出**
- Markdownファイル内の` ```mermaid`コードブロックを正規表現で検出
2. **図表タイプの判定**
- 各図表のコードを解析して、ガントチャート、シーケンス図など10種類以上のタイプを自動判定
3. **画像化処理**
- PuppeteerでHeadless Chromeを起動
- Mermaid.jsで図表をレンダリング
- 図表タイプに応じた最適化設定（サイズ、タイムアウト、余白）を適用
- SVG要素のサイズを取得してスクリーンショット
4. **Markdownの置換**
- Mermaidコードブロックを画像参照（``）に置換
5. **PPTX変換**
- Marp CLIで修正されたMarkdownファイルをPPTXに変換
6. **クリーンアップ**
- 一時ファイル（`-modified.md`）を自動削除
### 図表タイプ別の最適化
各図表タイプに対して、以下のパラメータが最適化されています：
```javascript
const DIAGRAM_TYPES = {
GANTT: {
minWidth: 1000,
minHeight: 400,
timeout: 30000, // 30秒（複雑なガントチャート用）
padding: 20,
hasSvgOverride: true, // SVGの幅制限を解除
},
SEQUENCE: {
minWidth: 800,
minHeight: 400,
timeout: 25000, // 25秒
padding: 15,
hasSvgOverride: true,
},
// ... 他の図表タイプも同様に最適化
};
Puppeteer による画像化の詳細
// HTMLテンプレートを生成
const html = `
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.9.1/dist/mermaid.min.js"></script>
<style>
.mermaid {
min-width: ${diagramType.minWidth}px;
min-height: ${diagramType.minHeight}px;
}
</style>
</head>
<body>
<div class="mermaid">${diagramCode}</div>
<script>
mermaid.initialize({
theme: 'base',
securityLevel: 'loose',
// ... 各種設定
});
</script>
</body>
</html>
`;
// ページにコンテンツを設定
await page.setContent(html);
// SVGの読み込みを待機
await page.waitForSelector(".mermaid svg", {
timeout: diagramType.timeout,
});
// SVG要素のサイズを取得してスクリーンショット
const svgElement = await page.$(".mermaid svg");
const boundingBox = await svgElement.boundingBox();
await page.screenshot({
path: `${this.imagesDir}/${diagramName}.png`,
clip: {
x: Math.max(0, boundingBox.x - diagramType.padding),
y: Math.max(0, boundingBox.y - diagramType.padding),
width: boundingBox.width + diagramType.padding * 2,
height: boundingBox.height + diagramType.padding * 2,
},
});
なぜ Mermaid 図を画像化する必要があるの？
Marp は Mermaid 図を直接パワポ形式(PPTX)に埋め込むことができません。そのため、Puppeteer を使って Mermaid 図を PNG 画像に変換し、その画像を Markdown に埋め込むことで、パワポ形式に変換する際に図表も含めることができます。
画像の品質は？
Puppeteer のスクリーンショット機能を使用しているため、高品質な PNG 画像が生成されます。図表タイプに応じて最適なサイズと余白が設定されています。
変換に時間がかかる場合は？
複雑な図表（ガントチャート、シーケンス図など）はタイムアウトが長めに設定されています（25-30 秒）。それでもタイムアウトする場合は、図表を簡略化するか、タイムアウト値を調整してください。
カスタムテーマは使用できる？
現在はbaseテーマを使用していますが、スクリプト内のMERMAID_CONFIGを編集することで、テーマや色設定をカスタマイズできます。
なぜパワポ形式にこだわるの？
確かにパワポ形式（PPTX）のファイルにこだわる必要はないかもしれません。Markdownファイルで一元管理できるのにというのはありますが、発表スライドを提出してほしいという時にパワポ形式のファイルを暗黙的に相手に期待されることもまだまだ多いと思います。また、自分の手を離れて編集されることもあるので、最終的に出力先を図表も含めたパワポ形式に変換するようにしています。
エラーが発生した場合は？
以下の点を確認してください：
- Puppeteer が正しくインストールされているか
- Marp CLI が正しくインストールされているか
- Mermaid 図の構文が正しいか
- ファイルパスが正しいか
まとめ
本記事では、Marp + Mermaidを使って Markdown ファイルから PPTX 形式のパワーポイントファイルを生成する方法を紹介しました。特に、Mermaid 図を自動的に画像化する機能により、図表を含む発表資料も Markdown ファイル一つで完結させることができます。
活用シーン
- 技術発表資料 - アーキテクチャ図、シーケンス図を含む資料
- プロジェクト管理 - ガントチャートを含む進捗報告
- 設計資料 - ER 図、クラス図を含む設計ドキュメント
-
教育資料 - フローチャート、状態図を含む教材
など