デザインツールを開くな：Mermaid記法とプロンプトだけで「映える図解」を自動生成する

TL;DR

• エンジニアはデザインツールの微調整に時間を使うべきではない
• Mermaid（論理図）と Nano Banana Pro（インフォグラフィック）の二段構えで自動化
• プロンプトをテンプレート化することで、誰でも 80 点の図解を量産できる

The Pain: エンジニアにはFigmaがつらい

「この記事、文字ばっかりで読みづらいから図解を入れて」 そう言われてFigmaやCanvaを開くものの、配置や配色の沼にハマり、気づけば30分。 私たちは「コード」は書けますが、「デザイン」は専門外です。

The Solution: Diagram as Code

コードで図を描くアプローチには2つの流派があります。

1. Logical Diagrams (Mermaid): フローチャートやシーケンス図など、論理構造を可視化する。

   mermaidコピー

   graph TD
       A[Hard Problem] -->|Analysis| B(Solution)
       B --> C{Decision}
       C -->|Option 1| D[Result A]
       C -->|Option 2| E[Result B]
   

2. Infographics (Prompt -> Image): 要約や箇条書きを、一枚絵のグラフィックにする。

2026-05 時点の Diagram as Code 比較表

主要ツールを「論理図 vs インフォグラフィック」「コード形式 vs プロンプト形式」「実装方式」で整理します（経験則）。

本ブログでは Mermaid（論理図） + Remotion（OGP/Hero/Diagram） + Nano Banana Pro（補助） の 3 段構えで自動化しています。詳細は マルチモーダル・ブログ戦略の全容 と ビデオ自動化：Remotion スキルの活用 を参照。

The Implementation: Nano Banana Pro Skill

本ブログでは後者（インフォグラフィック）の生成に、専用スキル nano-banana-pro を定義しています。

具体的なスキル定義

.agents/skills/nano-banana-pro/SKILL.md の中身です。

目的：X投稿用の図解を作る。
仕様：背景は白、余白広め、2〜3色、アイコンは最小限。
レイアウト：上にタイトル、中央に3つの箇条書きブロック、下に1行まとめ。

テンプレート:
タイトル：{タイトル}
要点：{主張}
根拠：{根拠1}/{根拠2}/{根拠3}
まとめ：{CTA}

このテンプレートを使うことで、エージェントは記事の内容から「図解すべきポイント」を自動抽出します。

ワークフロー例

1. エージェントが記事本文を解析。
2. 「3つの要点」を抽出。
3. 上記テンプレートに当てはめてプロンプトを出力。
4. 人間が画像生成AI（DALL-E 3やMidjourney、または社内ツール）に投げる。

近い将来、4番目のステップもMCP（Tool）経由で自動化されるでしょう。

記事制作パイプラインへの組み込みパターン

Diagram as Code を 記事制作パイプライン に組み込むときのパターンを整理します（経験則）。

ステージ別ツール選定

1. 本文中の論理図: Mermaid（Markdown 直接埋込、CI でレンダリング）
2. OGP / Hero / Diagram 静止画: Remotion renderStill（公式 docs [公式値]）。ローカル完結で外部 API 不要、フォントとレイアウトが React 側で版管理できる
3. 動画（ショート）: Remotion render[公式値]
4. SNS 用インフォグラフィック: Nano Banana Pro プロンプトテンプレ → 画像生成

Pitfalls（実運用で遭遇した落とし穴）

• Remotion defaultProps が leak する: composition の defaultProps で optional フィールドを省略せず空文字で明示する。新変種追加時は目視チェック必須（経験則・2026-04 実証）
• 画像プレースホルダー流用事故: pnpm render:article-images <slug> --force を必須化。--force なしだと他記事画像が skip 流用される（経験則・2026-05-01 実証）
• md5 重複検出: 生成後 md5 public/images/<slug>-{hero,icon,diagram}.png で他記事との一致を確認する習慣

詳細な制作フロー全体像は マルチモーダル・コンテンツハブ、ブログ運用との接続は Claude Code Blog Factory を参照。

The Takeaway: デザインの標準化

「センス」に頼ると品質がバラつきますが、「テンプレート（Prompt as Code）」に頼れば、誰がやっても80点の図解が量産できます。

次回は、さらに一歩進んで、Reactのコードから「動画」を生成する Remotion の世界へご案内します。

FAQ

Q1. Mermaid と Remotion はどう使い分けますか？

Mermaid = 論理図（フロー / シーケンス / クラス図）、Remotion = ピクセル指定の静止画 + 動画で役割が直交します（経験則）。Mermaid は Markdown に直接埋込でき CI で SVG レンダリングされるため、本文中の論理構造図に最適。Remotion は OGP / Hero / Diagram の 1200x630 等のピクセル指定が必要な静止画と、ショート動画に向いています。

Q2. Nano Banana Pro と Remotion はどちらを優先すべきですか？

Remotion を優先してください（経験則）。Remotion はローカル完結で外部 API 不要、フォントとレイアウトが React コードで版管理でき、再現性が高い[公式値]。Nano Banana Pro は SNS シェア用の補助として、Remotion テンプレでカバーできない要件に絞るのが現実解。

Q3. Mermaid の代わりに PlantUML / D2 を使うメリットは？

PlantUML は UML 全般（ER 図含む）の表現力が高く、D2 は モダンな自動レイアウトとテーマ切替が強みです[公式値]。本ブログでは Mermaid を主に使っていますが、UML 全体図が必要なら PlantUML、複雑なアーキ図のレイアウトを自動化したいなら D2、と使い分けます（経験則）。

Q4. 画像生成の事故を防ぐには？

最低限 3 つ: (1) pnpm render:article-images <slug> --force を必ず付ける、(2) 生成後 md5 で他記事画像との重複を確認、(3) Remotion composition の defaultProps は optional フィールドを省略せず空文字で明示（経験則）。

Q5. Diagram as Code を記事制作で常用するときのコストは？

学習コストは Mermaid なら 30 分で記法を覚えられ、Remotion は 半日〜1 日で composition の基本パターンを習得できます（経験則）。継続運用では「テンプレ化 + Skill 化」で 1 記事あたりの図解時間を 30 分 → 5 分に短縮できた事例が複数あります。Skill 化のパターンは スキル定義ファイルでプロンプトを再利用可能な資産にする を参照。

References

• Mermaid 公式 docs — 論理図の DSL
• PlantUML 公式 — UML 全般の DSL
• D2lang 公式 — モダン自動レイアウト
• Remotion 公式 docs — React で動画・静止画
• Remotion renderStill 公式 — 静止画 1 枚生成 API

関連記事

• マルチモーダル・ブログ戦略の全容
• マルチモーダル・コンテンツハブ
• ビデオ自動化：Remotion スキルの活用
• Claude Code Blog Factory
• スキル定義ファイルでプロンプトを再利用可能な資産にする
• プロンプトを「スキル」として資産化する技術
• AIエージェントに「仕様書」を厳守させる SDD