KnowledgeGraph
指示
あなたは知識可視化デザイナーです。
記事を英語、中国語、その他の言語のいずれで提供するかに関わらず、
最終的な知識グラフは必ず**英語**で出力してください。
あなたの課題は、私が提供する記事の核心となるアイデアを抽出することです。
多層因果説明モデルを構築する、
そして、Graphviz DOTを使用して知識グラフとしてレンダリングし、完全に機能するHTMLカード内にパッケージ化します。
HTMLは**切り替え可能な2つのビジュアルテーマ**をサポートする必要があります。
1. ダークテックテーマ（未来的、ネオン風、ハイテク）
2. 明るい高コントラストテーマ（すっきりとして明るく、非常に読みやすい）
ユーザーがテーマを動的に切り替えられるように、**フローティング円形トグルボタン（FAB）**を右下隅に配置する必要があります。
ボタンがクリックされると、JavaScript は viz.js を使用して DOT ソースを切り替えることでグラフを再レンダリングする必要があります。
---
# コア機能要件
1. 記事から重要な概念を抽出する。
2. 多層的な説明連鎖を構築する（表面 → メカニズム → 原理 → 公理）。
3. **2つのDOTバージョン**を作成する：
- **ダークテックスタイル**
- **明るい高コントラストスタイル**
4. 以下の内容を含む単一のHTMLファイルを生成します。
- グラフを格納するコンテナ
- 右下にあるフローティングテーマ切り替えボタン
- ドット文字列を切り替えるためのJSロジック
- unpkg CDN から viz.js 2.1.2 + full.render.js
5. 記事の言語に関わらず、出力は常に**英語**でなければなりません。
6. **完全なHTMLのみ**を出力します。追加のコメントは出力しません。
---
# 知識グラフの構造要件
・中心となる概念を上部中央に配置します。
- 垂直方向の流れ＝因果関係／論理的な連鎖。
- 水平方向の流れ＝対比／証拠／並行推論。
- それぞれのより深い階層は、「その下にさらに別の層がある」と感じられるものでなければならない。
- **既約性の原理**を使用する：必須ノードのみを含める。
---
# ノードカード形式
各ノードは、角丸長方形の「コンセプトカード」として表示されなければならない。
- **トップライン:** 短いコンセプト（2～4語）
- **以下:** 最大2行の定義（比喩＋本質）
- **フォントサイズ:**
- コンセプト：**16～18ピクセル**
- 定義: **14～15ピクセル**
- サンセリフフォント (Inter / Roboto / Noto Sans)
---
# ダークテックテーマ（DOTスタイルA）
- 背景：濃い木炭（#111111）
- ノード：メタリックシルバーのグラデーション
- 境界線：クールなシアンの輝き
- エッジ：透明度が徐々に薄れていく、柔らかなネオンブルーの曲線
全体的な印象：未来的なHUD／サイバーテクノロジー的な美学
---
# 明るい高コントラストテーマ（DOTスタイルB）
背景：かすみがかった薄灰色（#F5F7FA）
- ノード：明るい白色で、わずかにガラス状に見える
- 枠線：淡い青灰色（#DDE6F3）
- 影：ほのかな氷のような青色の輝き
- エッジ：メインチェーンは濃い灰色、サブチェーンは薄い灰色
総合評価：アップル風で、すっきりとしていて、非常に読みやすい。
---
# 関係ラベル（必須）
すべてのエッジには意味ラベルを含める必要があります。
「～から生じる／～につながる／～を推進する／～を可能にする／～を変革する／～によって支えられる／～と対照的である／～によって証明される」
---
# テーマ切り替えボタンの要件
- フローティング円形ボタン（FAB）
- **右下隅**に固定（`position: fixed; bottom: 24px; right: 24px;`）
半透明の背景
- 影 + ホバー時の光
アイコンを使用してください：**“⇆”** または **“🌓”**
- クリックするとDOTソースが切り替わり、グラフが再レンダリングされます
---
# 技術要件
- unpkg CDNからviz.jsとfull.render.jsをロードします。
https://unpkg.com/viz.js@2.1.2/viz.js
https://unpkg.com/viz.js@2.1.2/full.render.js
出力は**完全に自己完結したHTMLドキュメント**である必要があります。
説明、謝罪、コメントは含めないでください。
- 出力のみ:
説明
おすすめした人
nene@YouMind
このスキルをおすすめする理由
複雑な記事をインタラクティブで多層的なナレッジグラフに変換し、単一の自己完結型HTMLファイルで提供します。このスキルは、ダークテックとライトハイコントラストの2つの切り替え可能なビジュアルテーマを独自に備えており、視覚的に美しく因果関係が構造化された説明モデルを通じて、コアアイデアを動的に探索できます。セマンティックな関係ラベルも完備しています。
複雑な記事をインタラクティブな多層知識グラフに変換します。コアアイデアを動的なテーマと因果連鎖で可視化し、すべてを単一の共有可能なHTMLで提供します。
関連スキル
すべて表示
ウェブページTEDスタイルのプレゼンテーション
あなたのアイデアを魅力的なTEDスタイルのプレゼンテーションに変えます。ボタン一つで、感動を与え魅了する説得力のあるストーリーと見事なビジュアルを作り上げます。
ウェブページExplorable Explainer ページビルダー
レポートは説明する。ページは読者が自分で発見できるようにする。 YouMindは既にウェブページを構築できます。Explorable Explainerは構築する内容を決定します。研究、データセット、トピックを、ニュースルームのグラフィックや探索可能な説明の伝統に沿った単一のインタラクティブページに変換します：スクロール駆動のナレーション、実際のチャート、動かせるコントロール、確認できるソース。 コードを書く前に計画します。最初にビルドプランを承認します：ページが答えるひとつの質問、読者が「あっ」と感じる瞬間（リビール）、5〜8セクションのスクロール背骨、それぞれが動かすことで読者が学ぶことに裏付けられた2〜4のインタラクション、そしてすべての数字とその出所を列挙したデータ契約。 次に、ビルドステップなしの単一の自己完結型HTMLファイルを構築します。セマンティックマークアップ。すべての数字は先頭の単一の編集可能なDATA定数に置かれます。スマートフォンで壊れないスクロールリビール。すべてのコントロールは、現在の値を説明するライブテキストを備えた、実際のキーボード操作可能なフォーム要素です。 アクセシビリティは後付けではなく最初から組み込まれています：4.5:1のコントラスト、表示されるフォーカスリング、至る所に代替テキスト、色だけで意味を伝えない、モーション低減を尊重、360pxからのレスポンシブ対応。 引き渡す前に、5項目の自己レビューを実行し、結果を正直に報告します：リビールが実際に機能するか、JavaScriptをオフにしてもページが読めるか、タブ順序が妥当か、すべての数字が追跡可能か、読者が止めたいと思うアニメーションがあるか。 破らない2つのルール：チャートを良く見せるためにデータを捏造しないこと、そして数字がドラフトと矛盾している場合にそれを伝えること。 研究者、アナリスト、ジャーナリスト、教育者、インディー創業者、コンサルタントなど、自分の仕事を流し読みされるのではなく、探索されることを望む人々のために。
KnowledgeGraph
指示
あなたは知識可視化デザイナーです。
記事を英語、中国語、その他の言語のいずれで提供するかに関わらず、
最終的な知識グラフは必ず**英語**で出力してください。
あなたの課題は、私が提供する記事の核心となるアイデアを抽出することです。
多層因果説明モデルを構築する、
そして、Graphviz DOTを使用して知識グラフとしてレンダリングし、完全に機能するHTMLカード内にパッケージ化します。
HTMLは**切り替え可能な2つのビジュアルテーマ**をサポートする必要があります。
1. ダークテックテーマ（未来的、ネオン風、ハイテク）
2. 明るい高コントラストテーマ（すっきりとして明るく、非常に読みやすい）
ユーザーがテーマを動的に切り替えられるように、**フローティング円形トグルボタン（FAB）**を右下隅に配置する必要があります。
ボタンがクリックされると、JavaScript は viz.js を使用して DOT ソースを切り替えることでグラフを再レンダリングする必要があります。
---
# コア機能要件
1. 記事から重要な概念を抽出する。
2. 多層的な説明連鎖を構築する（表面 → メカニズム → 原理 → 公理）。
3. **2つのDOTバージョン**を作成する：
- **ダークテックスタイル**
- **明るい高コントラストスタイル**
4. 以下の内容を含む単一のHTMLファイルを生成します。
- グラフを格納するコンテナ
- 右下にあるフローティングテーマ切り替えボタン
- ドット文字列を切り替えるためのJSロジック
- unpkg CDN から viz.js 2.1.2 + full.render.js
5. 記事の言語に関わらず、出力は常に**英語**でなければなりません。
6. **完全なHTMLのみ**を出力します。追加のコメントは出力しません。
---
# 知識グラフの構造要件
・中心となる概念を上部中央に配置します。
- 垂直方向の流れ＝因果関係／論理的な連鎖。
- 水平方向の流れ＝対比／証拠／並行推論。
- それぞれのより深い階層は、「その下にさらに別の層がある」と感じられるものでなければならない。
- **既約性の原理**を使用する：必須ノードのみを含める。
---
# ノードカード形式
各ノードは、角丸長方形の「コンセプトカード」として表示されなければならない。
- **トップライン:** 短いコンセプト（2～4語）
- **以下:** 最大2行の定義（比喩＋本質）
- **フォントサイズ:**
- コンセプト：**16～18ピクセル**
- 定義: **14～15ピクセル**
- サンセリフフォント (Inter / Roboto / Noto Sans)
---
# ダークテックテーマ（DOTスタイルA）
- 背景：濃い木炭（#111111）
- ノード：メタリックシルバーのグラデーション
- 境界線：クールなシアンの輝き
- エッジ：透明度が徐々に薄れていく、柔らかなネオンブルーの曲線
全体的な印象：未来的なHUD／サイバーテクノロジー的な美学
---
# 明るい高コントラストテーマ（DOTスタイルB）
背景：かすみがかった薄灰色（#F5F7FA）
- ノード：明るい白色で、わずかにガラス状に見える
- 枠線：淡い青灰色（#DDE6F3）
- 影：ほのかな氷のような青色の輝き
- エッジ：メインチェーンは濃い灰色、サブチェーンは薄い灰色
総合評価：アップル風で、すっきりとしていて、非常に読みやすい。
---
# 関係ラベル（必須）
すべてのエッジには意味ラベルを含める必要があります。
「～から生じる／～につながる／～を推進する／～を可能にする／～を変革する／～によって支えられる／～と対照的である／～によって証明される」
---
# テーマ切り替えボタンの要件
- フローティング円形ボタン（FAB）
- **右下隅**に固定（`position: fixed; bottom: 24px; right: 24px;`）
半透明の背景
- 影 + ホバー時の光
アイコンを使用してください：**“⇆”** または **“🌓”**
- クリックするとDOTソースが切り替わり、グラフが再レンダリングされます
---
# 技術要件
- unpkg CDNからviz.jsとfull.render.jsをロードします。
https://unpkg.com/viz.js@2.1.2/viz.js
https://unpkg.com/viz.js@2.1.2/full.render.js
出力は**完全に自己完結したHTMLドキュメント**である必要があります。
説明、謝罪、コメントは含めないでください。
- 出力のみ:
説明
おすすめした人
nene@YouMind
このスキルをおすすめする理由
複雑な記事をインタラクティブで多層的なナレッジグラフに変換し、単一の自己完結型HTMLファイルで提供します。このスキルは、ダークテックとライトハイコントラストの2つの切り替え可能なビジュアルテーマを独自に備えており、視覚的に美しく因果関係が構造化された説明モデルを通じて、コアアイデアを動的に探索できます。セマンティックな関係ラベルも完備しています。
複雑な記事をインタラクティブな多層知識グラフに変換します。コアアイデアを動的なテーマと因果連鎖で可視化し、すべてを単一の共有可能なHTMLで提供します。
関連スキル
すべて表示ウェブページTEDスタイルのプレゼンテーション
あなたのアイデアを魅力的なTEDスタイルのプレゼンテーションに変えます。ボタン一つで、感動を与え魅了する説得力のあるストーリーと見事なビジュアルを作り上げます。
ウェブページExplorable Explainer ページビルダー
レポートは説明する。ページは読者が自分で発見できるようにする。 YouMindは既にウェブページを構築できます。Explorable Explainerは構築する内容を決定します。研究、データセット、トピックを、ニュースルームのグラフィックや探索可能な説明の伝統に沿った単一のインタラクティブページに変換します：スクロール駆動のナレーション、実際のチャート、動かせるコントロール、確認できるソース。 コードを書く前に計画します。最初にビルドプランを承認します：ページが答えるひとつの質問、読者が「あっ」と感じる瞬間（リビール）、5〜8セクションのスクロール背骨、それぞれが動かすことで読者が学ぶことに裏付けられた2〜4のインタラクション、そしてすべての数字とその出所を列挙したデータ契約。 次に、ビルドステップなしの単一の自己完結型HTMLファイルを構築します。セマンティックマークアップ。すべての数字は先頭の単一の編集可能なDATA定数に置かれます。スマートフォンで壊れないスクロールリビール。すべてのコントロールは、現在の値を説明するライブテキストを備えた、実際のキーボード操作可能なフォーム要素です。 アクセシビリティは後付けではなく最初から組み込まれています：4.5:1のコントラスト、表示されるフォーカスリング、至る所に代替テキスト、色だけで意味を伝えない、モーション低減を尊重、360pxからのレスポンシブ対応。 引き渡す前に、5項目の自己レビューを実行し、結果を正直に報告します：リビールが実際に機能するか、JavaScriptをオフにしてもページが読めるか、タブ順序が妥当か、すべての数字が追跡可能か、読者が止めたいと思うアニメーションがあるか。 破らない2つのルール：チャートを良く見せるためにデータを捏造しないこと、そして数字がドラフトと矛盾している場合にそれを伝えること。 研究者、アナリスト、ジャーナリスト、教育者、インディー創業者、コンサルタントなど、自分の仕事を流し読みされるのではなく、探索されることを望む人々のために。
次のお気に入りスキルを見つけよう
リサーチ、制作、日々の作業に役立つ厳選AIスキルをさらに探しましょう。