Featured by
nene@YouMind.AI
Why we love this skill
Transform complex articles into interactive, multi-layered knowledge graphs, presented in a single, self-contained HTML file. This skill uniquely offers two switchable visual themes—Dark Tech and Light High-Contrast—allowing dynamic exploration of core ideas through a visually stunning and causally structured explanation model, complete with semantic relationship labels.
Instructions
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:
description
Transform complex articles into interactive, multi-layered knowledge graphs. Visualize core ideas with dynamic themes and causal chains, all in a single, shareable HTML.
Related Skills
View all
WeChat Official Account Layout - Indigo Thought Long Article Style
1. The article content is automatically fitted into the theme's WeChat Official Account layout template, generating a preview webpage with a "One-Click Copy Rich Text" button. After copying, it can be directly pasted into the WeChat Official Account editor, and all layout styles are fully preserved. Due to limitations of the WeChat Official Account editor, images need to be added manually. 2. Different models generate varying quality.
Unfold scrolls into screens: create online courseware with a single click
Turn your course materials into a viewable website. Whether you have Markdown notes, a PDF paper, a PPT presentation, or a plain text script, "Scroll to Screen" can automatically transform it into a well-structured and visually appealing online course presentation webpage. You don't need to write a single line of code; just provide the content. Two presentation styles: Course training content → Generates a scrolling long page, allowing you to flip through it like a book. Paper/report content → Generates a PPT-style flip-page website, allowing you to browse page by page like a presentation. Responsive design adapts to mobile phones and computers. What you need to do: Just one step: Provide your course material. Supports the following formats: .md Markdown files, .pdf PDF documents, .pptx PPT presentations, .txt plain text. You can also directly paste course content text into the dialog. Example instructions: "Help me turn this course handout into a webpage." "Turn this PDF paper into a PPT-style website." "This is my course content; generate an online presentation page." What you will get: A directly accessible online course presentation website with an automatically selected presentation mode based on your content. Course outlines, training handouts, and textbooks: Scrolling long pages with seamless module transitions; academic papers and research reports: PPT-style slideshows with each page focusing on a single point; presentations and conference reports: PPT-style page-by-page presentation with keyboard/click navigation. You explicitly request "scrolling" or "PPT," and it will follow your instructions, respecting user intent. Content extraction capabilities: For information-dense papers and long texts, the skill will automatically perform: Structural decomposition — breaking down continuous arguments into independent chapters/slides; Information condensation — condensing 3 paragraphs into 3 key points, each no more than 20 words; Argument first — Each page presents the conclusion first, followed by supporting arguments and a visual framework—models and classification systems are presented in charts, not just plain text data—key figures and indicators are highlighted on separate pages. Subsequent modifications: After the website is generated, you can request adjustments at any time: "Update the content of Module 3," "Change the color scheme to warm colors," "Add a course roadmap," "Change this module to a timeline layout." Modifications only affect the corresponding parts and do not require regenerating the entire website. What it doesn't do: This skill currently focuses on course content display and does not include the following LMS (Online Learning System) functions: user login/registration, learning progress tracking, file downloads, online quizzes/exercises. These functions are separate extensions.
International Industry Briefing Generator
Generate daily dynamic briefings with international media quality for any industry, covering the entire chain from data collection to content generation, brand layout, publication and archiving, and distribution. It supports seven days and seven colors of Morandi color scheme, three-layer content structure (information → analysis → insight), automatic deduplication, and engineered delivery.
KnowledgeGraph
Featured by
nene@YouMind.AI
Why we love this skill
Transform complex articles into interactive, multi-layered knowledge graphs, presented in a single, self-contained HTML file. This skill uniquely offers two switchable visual themes—Dark Tech and Light High-Contrast—allowing dynamic exploration of core ideas through a visually stunning and causally structured explanation model, complete with semantic relationship labels.
Instructions
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:
description
Transform complex articles into interactive, multi-layered knowledge graphs. Visualize core ideas with dynamic themes and causal chains, all in a single, shareable HTML.
Related Skills
View allWeChat Official Account Layout - Indigo Thought Long Article Style
1. The article content is automatically fitted into the theme's WeChat Official Account layout template, generating a preview webpage with a "One-Click Copy Rich Text" button. After copying, it can be directly pasted into the WeChat Official Account editor, and all layout styles are fully preserved. Due to limitations of the WeChat Official Account editor, images need to be added manually. 2. Different models generate varying quality.
Unfold scrolls into screens: create online courseware with a single click
Turn your course materials into a viewable website. Whether you have Markdown notes, a PDF paper, a PPT presentation, or a plain text script, "Scroll to Screen" can automatically transform it into a well-structured and visually appealing online course presentation webpage. You don't need to write a single line of code; just provide the content. Two presentation styles: Course training content → Generates a scrolling long page, allowing you to flip through it like a book. Paper/report content → Generates a PPT-style flip-page website, allowing you to browse page by page like a presentation. Responsive design adapts to mobile phones and computers. What you need to do: Just one step: Provide your course material. Supports the following formats: .md Markdown files, .pdf PDF documents, .pptx PPT presentations, .txt plain text. You can also directly paste course content text into the dialog. Example instructions: "Help me turn this course handout into a webpage." "Turn this PDF paper into a PPT-style website." "This is my course content; generate an online presentation page." What you will get: A directly accessible online course presentation website with an automatically selected presentation mode based on your content. Course outlines, training handouts, and textbooks: Scrolling long pages with seamless module transitions; academic papers and research reports: PPT-style slideshows with each page focusing on a single point; presentations and conference reports: PPT-style page-by-page presentation with keyboard/click navigation. You explicitly request "scrolling" or "PPT," and it will follow your instructions, respecting user intent. Content extraction capabilities: For information-dense papers and long texts, the skill will automatically perform: Structural decomposition — breaking down continuous arguments into independent chapters/slides; Information condensation — condensing 3 paragraphs into 3 key points, each no more than 20 words; Argument first — Each page presents the conclusion first, followed by supporting arguments and a visual framework—models and classification systems are presented in charts, not just plain text data—key figures and indicators are highlighted on separate pages. Subsequent modifications: After the website is generated, you can request adjustments at any time: "Update the content of Module 3," "Change the color scheme to warm colors," "Add a course roadmap," "Change this module to a timeline layout." Modifications only affect the corresponding parts and do not require regenerating the entire website. What it doesn't do: This skill currently focuses on course content display and does not include the following LMS (Online Learning System) functions: user login/registration, learning progress tracking, file downloads, online quizzes/exercises. These functions are separate extensions.
International Industry Briefing Generator
Generate daily dynamic briefings with international media quality for any industry, covering the entire chain from data collection to content generation, brand layout, publication and archiving, and distribution. It supports seven days and seven colors of Morandi color scheme, three-layer content structure (information → analysis → insight), automatic deduplication, and engineered delivery.
Find your next favorite skill
Explore more curated AI skills for research, creation, and everyday work.