グラフ付きグラレコ V1 Mermaid統合
想定用途
- Mermaidグラフを統合したグラレコを作成したい
- 構造やフロー、関係性を図で視覚化したい
- 大型アイコンと吹き出しで情報を整理したい
プロンプト本文
text
``` # グラフ付きグラフィックレコーディング (グラレコ) HTML 作成プロンプト V1
## 目的
以下の内容を、**大きなFont Awesomeアイコン**と**手書き風の吹き出し**、そして**Mermaidグラフ**を活用した日本語のグラフィックレコーディング風HTMLインフォグラフィックに変換してください。各カードに1つの大きなアイコンを配置し、小さなインラインアイコンを積極的に活用して情報を視覚的にわかりやすく表現します。図表化すると理解しやすい構造や関係性はMermaid図として表示します。
## デザイン仕様
### 1. カラースキーム（イラストパステル）2. グラフィックレコーディング要素
- 全体を白背景（#FFF8F5）のキャンバス上に配置
- 各カードに1つの特大サイズのテーマアイコンを配置（fa-5x程度）
- カード内のコンテンツは小さなアイコン付きリスト形式で構造化
- 手書き風の吹き出しでポイントや補足情報を追加
- Mermaidグラフで構造やフロー、関係性を視覚化
- 内容を複数のセクションに分け、カード形式で整理
- キーワードをタグ形式で視覚的に強調
- コードサンプルはプレビュー形式で表示
- 関連する概念をつなぐ視覚的な要素（矢印や線）
- 各カードをアニメーションで強調（任意の部分に適用）
- カード内部の情報量を増やし、小さなアイコンで視覚的に整理
- コードブロックを使う場合はカラーマップを使用しておしゃれにして
3. タイポグラフィ
- タイトル：36px、太字、特大関連アイコン付き（fa-6x以上）
- カードタイトル：24px、大きめアイコン付き（fa-5x）
- リスト見出し：18px
- リスト項目：16px、小さなアイコン付き
- タグ：16px、背景色付き
- 本文：16px、行間1.5
- コードプレビュー：14px、等幅フォント、背景色付き
- 吹き出し内テキスト：手書き風フォント、15px
- フォント指定：Kaisei Decol, Yomogi, Zen Kurenaido
4. レイアウト
- 全体：4カラム構成（レスポンシブ対応）
- ヘッダー：超大型アイコン付きタイトル（fa-7x）＋日付
- 各カード：1つの大きなアイコン＋リスト形式のコンテンツ＋吹き出し
- カード内部：構造化されたリスト形式で情報を整理
- Mermaidグラフを適切に配置（フローチャート、シーケンス図、クラス図など）
5. Mermaidグラフ活用ガイドライン
- フローチャート（flowchart）：プロセスや手順の視覚化
- シーケンス図（sequenceDiagram）：時間経過による相互作用
- クラス図（classDiagram）：概念間の関係性
- 状態図（stateDiagram）：状態遷移の表現
- ER図（erDiagram）：データ構造の可視化
- マインドマップ（mindmap）：情報の階層構造
変換する文章/記事
[ここにグラレコ化したいテキストコンテンツを入力]
## 使い方
1. プロンプトをコピーしてAIチャットツールに貼り付け
2. 変換する文章/記事部分にグラレコ化したいテキストを入力
3. 生成されたHTMLをブラウザで表示・保存（Mermaidグラフは自動レンダリング）
## 入力例変換する文章/記事
Webアプリケーション開発プロセス
- 要件定義
- 設計（UI/UX、データベース）
- 開発（フロントエンド、バックエンド）
- テスト
- デプロイ
## 出力例
イラストパステルカラーパレット（ピンク#F2798F、青#3F77BF、ターコイズ#34BFBF、黄#F2C641）を使用した、Mermaidグラフ統合型の4カラムグラレコHTMLが生成されます。
## 注意点
- MermaidグラフはCDNから読み込んでレンダリングされます
- パステルカラーで柔らかい印象になります
- 構造や関係性が明確な内容は自動的にMermaid図に変換されます