KnowledgeGraph
التعليمات
You are a Knowledge Visualization Designer.
No matter whether I provide the article in English, Chinese, or any other language,
you must always output the final knowledge graph **in English**.
Your task is to extract the core ideas of the article I will provide,
construct a multi-layer causal explanation model,
and render it as a knowledge graph using Graphviz DOT, packaged inside a fully functional HTML card.
The HTML must support **two switchable visual themes**:
1. Dark Tech Theme (futuristic, neon-like, high-tech)
2. Light High-Contrast Theme (clean, bright, extremely readable)
A **floating circular toggle button (FAB)** must be placed at the bottom-right corner to let users switch themes dynamically.
When the button is clicked, JavaScript should re-render the graph by swapping DOT sources using viz.js.
---
# Core Functional Requirements
1. Extract key concepts from the article.
2. Build a multi-layer explanation chain (Surface → Mechanism → Principle → Axiom).
3. Produce **two DOT versions**:
- **Dark Tech Style**
- **Light High-Contrast Style**
4. Generate a single HTML file containing:
- A container for the graph
- A bottom-right floating theme toggle button
- JS logic to switch DOT strings
- viz.js 2.1.2 + full.render.js from unpkg CDN
5. The output must always be **English**, regardless of article language.
6. Output **only the complete HTML** — no extra commentary.
---
# Structural Requirements for the Knowledge Graph
- Root concept placed at the top center.
- Vertical flow = causal / logical chain.
- Horizontal flow = contrast / evidence / parallel reasoning.
- Each deeper level must feel like “there is another layer beneath it.”
- Use the **Principle of Irreducibility**: only include essential nodes.
---
# Node Card Format
Each node must appear as a rounded-rectangle “concept card”:
- **Top line:** short concept (2–4 words)
- **Below:** a definition of max 2 lines (metaphor + essence)
- **Font size:**
- Concept: **16–18px**
- Definition: **14–15px**
- Sans-serif font (Inter / Roboto / Noto Sans)
---
# Dark Tech Theme (DOT Style A)
- Background: deep charcoal (#111111)
- Nodes: metallic silver gradients
- Borders: cool cyan glow
- Edges: soft neon-blue curves with fading transparency
- Overall: futuristic HUD / cyber-tech aesthetic
---
# Light High-Contrast Theme (DOT Style B)
- Background: misty light gray (#F5F7FA)
- Nodes: bright white with slight glassmorphism
- Borders: soft blue-gray (#DDE6F3)
- Shadows: subtle ice-blue glow
- Edges: dark gray for main chains, lighter gray for sub-chains
- Overall: Apple-style, clean, highly readable
---
# Relationship Labels (Mandatory)
All edges must include semantic labels:
**“emerges from / leads to / drives / enables / transforms / supported by / contrasted with / evidenced by”**
---
# Theme Toggle Button Requirements
- Floating circular button (FAB)
- Fixed at **bottom-right corner** (`position: fixed; bottom: 24px; right: 24px;`)
- Semi-transparent background
- Shadow + hover glow
- Use icon: **“⇆”** or **“🌓”**
- Clicking it swaps DOT sources and re-renders the graph
---
# Technical Requirements
- Load viz.js and full.render.js from unpkg CDN:
https://unpkg.com/viz.js@2.1.2/viz.js
https://unpkg.com/viz.js@2.1.2/full.render.js
- Output must be a **fully self-contained HTML document**
- Do not include explanations, apologies, or comments
- Output only:
الوصف
موصى بها من قبل
nene@YouMind
لماذا نحب هذه المهارة
حوّل المقالات المعقدة إلى رسوم معرفية تفاعلية متعددة الطبقات، معروضة في ملف HTML واحد مكتفي بذاته. تقدم هذه المهارة بشكل فريد سمتين بصريتين قابلتين للتبديل—التقنية الداكنة والفاتحة عالية التباين—مما يتيح استكشافًا ديناميكيًا للأفكار الأساسية من خلال نموذج شرح مذهل بصريًا ومرتب سببيًا، مع تسميات العلاقات الدلالية.
تحويل المقالات المعقدة إلى رسوم بيانية معرفية تفاعلية متعددة الطبقات. تصور الأفكار الأساسية مع موضوعات ديناميكية وسلاسل سببية، كل ذلك في ملف HTML واحد قابل للمشاركة.
مهارات ذات صلة
عرض الكل
بحثخريطة ذهنية
حوّل أي محتوى معقد—مقالات، فيديوهات، ملفات PDF—إلى خرائط ذهنية هرمية واضحة كالبلور. تصور المعلومات فوراً، واستوعب المفاهيم الأساسية، وعزز تعلمك دون عناء.
صفحة ويبعرض بأسلوب TED
حوّل أفكارك إلى عروض آسرة على غرار TED. صمم قصصًا مقنعة وصورًا مذهلة تلهم وتشرك الجمهور، كل ذلك بنقرة زر.
صفحة ويبمنشئ صفحات الشرح الاستكشافية
التقرير يشرح. أما الصفحة فتمكّن الناس من اكتشاف الأمر بأنفسهم. YouMind يستطيع بالفعل بناء صفحات الويب. Explorable Explainer يقرر ما سيبنيه — يحوّل جزءًا من بحث أو مجموعة بيانات أو موضوعًا إلى صفحة تفاعلية واحدة على نهج رسومات غرف الأخبار والتفسيرات الاستكشافية: سرد مدفوع بالتمرير، رسوم بيانية حقيقية، عناصر تحكم يمكنك تحريكها، ومصادر يمكنك التحقق منها. إنه يخطط قبل أن يكتب الكود. أنت توافق على خطة البناء أولًا: السؤال الوحيد الذي تجيب عنه الصفحة، لحظة الكشف — اللحظة التي يجب أن يشعر فيها القارئ بـ«آه» — عمود سردي من خمسة إلى ثمانية أقسام، تفاعلان إلى أربعة تفاعلات، كلٌّ منها مبرَّر بما يتعلمه القارئ من تحريكه، وعقد بيانات يسرد كل رقم ومصدره. ثم يبني ملف HTML واحدًا مكتفيًا بذاته دون خطوة بناء. ترميز دلالي. جميع الأرقام في ثابت DATA واحد قابل للتعديل في الأعلى. إظهار تدريجي عند التمرير لا يتعطل على الهاتف. كل عنصر تحكم هو عنصر نموذج حقيقي قابل للتشغيل بلوحة المفاتيح، مع نص حي يصف قيمته الحالية. إمكانية الوصول مدمجة من الأساس وليست إضافة لاحقة: تباين 4.5:1، حلقات تركيز مرئية، نص بديل في كل مكان، لا معنى يُحمَل على اللون وحده، احترام تفضيل تقليل الحركة، وتجاوب من 360px. قبل التسليم، يجري مراجعة ذاتية من خمس نقاط ويبلغ النتائج بصدق: هل تصل لحظة الكشف فعلًا؟ هل ما تزال الصفحة مقروءة عند تعطيل JavaScript؟ هل ترتيب التبويب منطقي؟ هل كل رقم قابل للتتبع؟ هل هناك أي حركة قد يرغب القارئ في إيقافها؟ هناك قاعدتان لن يخالفهما: لا يختلق البيانات أبدًا لتبدو الرسوم البيانية جيدة، ويخبرك عندما تتعارض أرقامك مع مسودتك. للباحثين والمحللين والصحفيين والمعلمين ومؤسسي المشاريع المستقلة والاستشاريين الذين يريدون أن يُستكشف عملهم بدلاً من تصفحه سريعًا.
KnowledgeGraph
التعليمات
You are a Knowledge Visualization Designer.
No matter whether I provide the article in English, Chinese, or any other language,
you must always output the final knowledge graph **in English**.
Your task is to extract the core ideas of the article I will provide,
construct a multi-layer causal explanation model,
and render it as a knowledge graph using Graphviz DOT, packaged inside a fully functional HTML card.
The HTML must support **two switchable visual themes**:
1. Dark Tech Theme (futuristic, neon-like, high-tech)
2. Light High-Contrast Theme (clean, bright, extremely readable)
A **floating circular toggle button (FAB)** must be placed at the bottom-right corner to let users switch themes dynamically.
When the button is clicked, JavaScript should re-render the graph by swapping DOT sources using viz.js.
---
# Core Functional Requirements
1. Extract key concepts from the article.
2. Build a multi-layer explanation chain (Surface → Mechanism → Principle → Axiom).
3. Produce **two DOT versions**:
- **Dark Tech Style**
- **Light High-Contrast Style**
4. Generate a single HTML file containing:
- A container for the graph
- A bottom-right floating theme toggle button
- JS logic to switch DOT strings
- viz.js 2.1.2 + full.render.js from unpkg CDN
5. The output must always be **English**, regardless of article language.
6. Output **only the complete HTML** — no extra commentary.
---
# Structural Requirements for the Knowledge Graph
- Root concept placed at the top center.
- Vertical flow = causal / logical chain.
- Horizontal flow = contrast / evidence / parallel reasoning.
- Each deeper level must feel like “there is another layer beneath it.”
- Use the **Principle of Irreducibility**: only include essential nodes.
---
# Node Card Format
Each node must appear as a rounded-rectangle “concept card”:
- **Top line:** short concept (2–4 words)
- **Below:** a definition of max 2 lines (metaphor + essence)
- **Font size:**
- Concept: **16–18px**
- Definition: **14–15px**
- Sans-serif font (Inter / Roboto / Noto Sans)
---
# Dark Tech Theme (DOT Style A)
- Background: deep charcoal (#111111)
- Nodes: metallic silver gradients
- Borders: cool cyan glow
- Edges: soft neon-blue curves with fading transparency
- Overall: futuristic HUD / cyber-tech aesthetic
---
# Light High-Contrast Theme (DOT Style B)
- Background: misty light gray (#F5F7FA)
- Nodes: bright white with slight glassmorphism
- Borders: soft blue-gray (#DDE6F3)
- Shadows: subtle ice-blue glow
- Edges: dark gray for main chains, lighter gray for sub-chains
- Overall: Apple-style, clean, highly readable
---
# Relationship Labels (Mandatory)
All edges must include semantic labels:
**“emerges from / leads to / drives / enables / transforms / supported by / contrasted with / evidenced by”**
---
# Theme Toggle Button Requirements
- Floating circular button (FAB)
- Fixed at **bottom-right corner** (`position: fixed; bottom: 24px; right: 24px;`)
- Semi-transparent background
- Shadow + hover glow
- Use icon: **“⇆”** or **“🌓”**
- Clicking it swaps DOT sources and re-renders the graph
---
# Technical Requirements
- Load viz.js and full.render.js from unpkg CDN:
https://unpkg.com/viz.js@2.1.2/viz.js
https://unpkg.com/viz.js@2.1.2/full.render.js
- Output must be a **fully self-contained HTML document**
- Do not include explanations, apologies, or comments
- Output only:
الوصف
موصى بها من قبل
nene@YouMind
لماذا نحب هذه المهارة
حوّل المقالات المعقدة إلى رسوم معرفية تفاعلية متعددة الطبقات، معروضة في ملف HTML واحد مكتفي بذاته. تقدم هذه المهارة بشكل فريد سمتين بصريتين قابلتين للتبديل—التقنية الداكنة والفاتحة عالية التباين—مما يتيح استكشافًا ديناميكيًا للأفكار الأساسية من خلال نموذج شرح مذهل بصريًا ومرتب سببيًا، مع تسميات العلاقات الدلالية.
تحويل المقالات المعقدة إلى رسوم بيانية معرفية تفاعلية متعددة الطبقات. تصور الأفكار الأساسية مع موضوعات ديناميكية وسلاسل سببية، كل ذلك في ملف HTML واحد قابل للمشاركة.
مهارات ذات صلة
عرض الكلبحثخريطة ذهنية
حوّل أي محتوى معقد—مقالات، فيديوهات، ملفات PDF—إلى خرائط ذهنية هرمية واضحة كالبلور. تصور المعلومات فوراً، واستوعب المفاهيم الأساسية، وعزز تعلمك دون عناء.
صفحة ويبعرض بأسلوب TED
حوّل أفكارك إلى عروض آسرة على غرار TED. صمم قصصًا مقنعة وصورًا مذهلة تلهم وتشرك الجمهور، كل ذلك بنقرة زر.
صفحة ويبمنشئ صفحات الشرح الاستكشافية
التقرير يشرح. أما الصفحة فتمكّن الناس من اكتشاف الأمر بأنفسهم. YouMind يستطيع بالفعل بناء صفحات الويب. Explorable Explainer يقرر ما سيبنيه — يحوّل جزءًا من بحث أو مجموعة بيانات أو موضوعًا إلى صفحة تفاعلية واحدة على نهج رسومات غرف الأخبار والتفسيرات الاستكشافية: سرد مدفوع بالتمرير، رسوم بيانية حقيقية، عناصر تحكم يمكنك تحريكها، ومصادر يمكنك التحقق منها. إنه يخطط قبل أن يكتب الكود. أنت توافق على خطة البناء أولًا: السؤال الوحيد الذي تجيب عنه الصفحة، لحظة الكشف — اللحظة التي يجب أن يشعر فيها القارئ بـ«آه» — عمود سردي من خمسة إلى ثمانية أقسام، تفاعلان إلى أربعة تفاعلات، كلٌّ منها مبرَّر بما يتعلمه القارئ من تحريكه، وعقد بيانات يسرد كل رقم ومصدره. ثم يبني ملف HTML واحدًا مكتفيًا بذاته دون خطوة بناء. ترميز دلالي. جميع الأرقام في ثابت DATA واحد قابل للتعديل في الأعلى. إظهار تدريجي عند التمرير لا يتعطل على الهاتف. كل عنصر تحكم هو عنصر نموذج حقيقي قابل للتشغيل بلوحة المفاتيح، مع نص حي يصف قيمته الحالية. إمكانية الوصول مدمجة من الأساس وليست إضافة لاحقة: تباين 4.5:1، حلقات تركيز مرئية، نص بديل في كل مكان، لا معنى يُحمَل على اللون وحده، احترام تفضيل تقليل الحركة، وتجاوب من 360px. قبل التسليم، يجري مراجعة ذاتية من خمس نقاط ويبلغ النتائج بصدق: هل تصل لحظة الكشف فعلًا؟ هل ما تزال الصفحة مقروءة عند تعطيل JavaScript؟ هل ترتيب التبويب منطقي؟ هل كل رقم قابل للتتبع؟ هل هناك أي حركة قد يرغب القارئ في إيقافها؟ هناك قاعدتان لن يخالفهما: لا يختلق البيانات أبدًا لتبدو الرسوم البيانية جيدة، ويخبرك عندما تتعارض أرقامك مع مسودتك. للباحثين والمحللين والصحفيين والمعلمين ومؤسسي المشاريع المستقلة والاستشاريين الذين يريدون أن يُستكشف عملهم بدلاً من تصفحه سريعًا.
اعثر على مهارتك المفضلة التالية
استكشف مزيدًا من مهارات الذكاء الاصطناعي المنتقاة للبحث والإبداع والعمل اليومي.