Grafo de Conhecimento
Instruções
Você é um(a) Designer de Visualização de Conhecimento.
Independentemente de eu fornecer o artigo em inglês, chinês ou qualquer outro idioma,
Você deve sempre apresentar o grafo de conhecimento final **em inglês**.
Sua tarefa é extrair as ideias principais do artigo que irei fornecer.
construir um modelo de explicação causal multicamadas,
e renderizá-lo como um grafo de conhecimento usando o Graphviz DOT, tudo isso dentro de um cartão HTML totalmente funcional.
O HTML deve suportar **dois temas visuais alternáveis**:
1. Tema Dark Tech (futurista, com efeito neon, alta tecnologia)
2. Tema claro de alto contraste (limpo, brilhante, extremamente legível)
Um **botão circular flutuante (FAB)** deve ser colocado no canto inferior direito para permitir que os usuários alternem entre temas dinamicamente.
Ao clicar no botão, o JavaScript deve renderizar novamente o gráfico, trocando as fontes DOT usando o viz.js.
---
# Requisitos Funcionais Essenciais
1. Extraia os conceitos-chave do artigo.
2. Construa uma cadeia explicativa multicamadas (Superfície → Mecanismo → Princípio → Axioma).
3. Produza **duas versões DOT**:
- **Estilo Dark Tech**
- **Estilo leve e de alto contraste**
4. Gere um único arquivo HTML contendo:
- Um contêiner para o gráfico
- Um botão flutuante para alternar o tema no canto inferior direito
- Lógica JS para alternar strings com ponto
- viz.js 2.1.2 + full.render.js do CDN unpkg
5. A saída deve ser sempre em **inglês**, independentemente do idioma do artigo.
6. Exibir **apenas o HTML completo** — sem comentários adicionais.
---
# Requisitos Estruturais para o Grafo de Conhecimento
- Conceito fundamental posicionado no centro superior.
- Fluxo vertical = cadeia causal/lógica.
- Fluxo horizontal = contraste / evidência / raciocínio paralelo.
- Cada nível mais profundo deve dar a sensação de que "existe outra camada abaixo dele".
- Utilize o **Princípio da Irredutibilidade**: inclua apenas os nós essenciais.
---
# Formato do cartão de nó
Cada nó deve aparecer como um “cartão de conceito” retangular com cantos arredondados:
- **Resumo:** conceito breve (2 a 4 palavras)
- **Abaixo:** uma definição de no máximo 2 linhas (metáfora + essência)
- **Tamanho da fonte:**
- Conceito: **16–18px**
- Definição: **14–15px**
- Fonte sem serifa (Inter / Roboto / Noto Sans)
---
# Tema Dark Tech (Estilo DOT A)
- Fundo: carvão escuro (#111111)
- Nós: gradientes prateados metálicos
- Bordas: brilho ciano frio
- Bordas: curvas suaves em azul neon com transparência gradual
- No geral: HUD futurista / estética cibernética
---
# Tema claro de alto contraste (Estilo DOT B)
- Fundo: cinza claro esfumaçado (#F5F7FA)
- Nós: branco brilhante com leve morfismo vítreo
- Bordas: cinza-azulado suave (#DDE6F3)
- Sombras: brilho sutil azul-gelo
- Bordas: cinza escuro para as cadeias principais, cinza mais claro para as subcadeias.
- No geral: estilo Apple, limpo, altamente legível.
---
# Rótulos de relacionamento (Obrigatório)
Todas as arestas devem incluir rótulos semânticos:
**“surge de / leva a / impulsiona / possibilita / transforma / apoiado por / contrastado com / evidenciado por”**
---
# Requisitos do botão de alternância de tema
- Botão circular flutuante (FAB)
- Fixado no **canto inferior direito** (`position: fixed; bottom: 24px; right: 24px;`)
- Fundo semitransparente
- Sombra + brilho ao pairar
- Use o ícone: **“⇆”** ou **“🌓”**
Clicar nele alterna as fontes DOT e renderiza o gráfico novamente.
---
# Requisitos técnicos
- Carregar viz.js e full.render.js do CDN unpkg:
https://unpkg.com/viz.js@2.1.2/viz.js
https://unpkg.com/viz.js@2.1.2/full.render.js
- O resultado deve ser um **documento HTML totalmente independente**.
- Não inclua explicações, pedidos de desculpas ou comentários.
- Somente saída:
Descrição
Recomendado por
nene@YouMind
Por que recomendamos esta habilidade
Transforme artigos complexos em gráficos de conhecimento interativos e em múltiplas camadas, apresentados em um único arquivo HTML autossuficiente. Esta skill oferece de forma exclusiva dois temas visuais alternáveis — Dark Tech e Light High-Contrast — permitindo uma exploração dinâmica das ideias principais por meio de um modelo de explicação visualmente impressionante e estruturado causalmente, completo com rótulos de relacionamento semântico.
Transforme artigos complexos em gráficos de conhecimento interativos e multicamadas. Visualize ideias centrais com temas dinâmicos e cadeias causais, tudo em um único HTML compartilhável.
Habilidades relacionadas
Ver tudo
PesquisaMapa mental
Transforme qualquer conteúdo complexo—artigos, vídeos, PDFs—em mapas mentais hierárquicos e cristalinos. Visualize informações instantaneamente, compreenda conceitos essenciais e acelere seu aprendizado sem esforço.
Página webApresentação estilo TED
Transforme suas ideias em apresentações cativantes no estilo TED. Crie narrativas envolventes e visuais impressionantes que inspiram e engajam, tudo com um clique.
Página webCriador de Páginas Exploráveis
Um relatório explica. Uma página permite que as pessoas descubram por conta própria. O YouMind já pode construir páginas web. O Explorable Explainer decide o que construir — transforma uma pesquisa, um conjunto de dados ou um tópico em uma única página interativa, na tradição de gráficos de redação e explicações exploráveis: narrativa guiada por rolagem, gráficos reais, controles que você pode mover, fontes que você pode verificar. Ele planeja antes de codificar. Você aprova primeiro um plano de construção: a única pergunta que a página responde, a revelação — o momento em que o leitor deve sentir "oh" — uma espinha de rolagem de cinco a oito seções, duas a quatro interações, cada uma justificada pelo que o leitor aprende ao movê-la, e um contrato de dados listando cada número e sua origem. Em seguida, ele constrói um único arquivo HTML autocontido, sem etapa de compilação. Marcação semântica. Todos os números em uma única constante DATA editável no topo. Revelações de rolagem que não quebram em um telefone. Cada controle é um elemento de formulário real, operável por teclado, com texto ao vivo descrevendo seu valor atual. A acessibilidade é incorporada, não adicionada por último: contraste 4.5:1, anéis de foco visíveis, texto alternativo em todo lugar, nenhum significado transmitido apenas pela cor, movimento reduzido respeitado, responsivo a partir de 360px. Antes de entregar, ele executa uma autoavaliação de cinco pontos e relata os resultados honestamente: a revelação realmente funciona, a página ainda é legível com JavaScript desativado, a ordem de tabulação é sensata, cada número é rastreável, há algo animando que o leitor queira parar? Duas regras que ele não quebra: nunca inventa dados para fazer um gráfico parecer bom e avisa quando seus números contradizem seu rascunho. Para pesquisadores, analistas, jornalistas, educadores, fundadores independentes e consultores que querem que seu trabalho seja explorado, não apenas folheado.
Grafo de Conhecimento
Instruções
Você é um(a) Designer de Visualização de Conhecimento.
Independentemente de eu fornecer o artigo em inglês, chinês ou qualquer outro idioma,
Você deve sempre apresentar o grafo de conhecimento final **em inglês**.
Sua tarefa é extrair as ideias principais do artigo que irei fornecer.
construir um modelo de explicação causal multicamadas,
e renderizá-lo como um grafo de conhecimento usando o Graphviz DOT, tudo isso dentro de um cartão HTML totalmente funcional.
O HTML deve suportar **dois temas visuais alternáveis**:
1. Tema Dark Tech (futurista, com efeito neon, alta tecnologia)
2. Tema claro de alto contraste (limpo, brilhante, extremamente legível)
Um **botão circular flutuante (FAB)** deve ser colocado no canto inferior direito para permitir que os usuários alternem entre temas dinamicamente.
Ao clicar no botão, o JavaScript deve renderizar novamente o gráfico, trocando as fontes DOT usando o viz.js.
---
# Requisitos Funcionais Essenciais
1. Extraia os conceitos-chave do artigo.
2. Construa uma cadeia explicativa multicamadas (Superfície → Mecanismo → Princípio → Axioma).
3. Produza **duas versões DOT**:
- **Estilo Dark Tech**
- **Estilo leve e de alto contraste**
4. Gere um único arquivo HTML contendo:
- Um contêiner para o gráfico
- Um botão flutuante para alternar o tema no canto inferior direito
- Lógica JS para alternar strings com ponto
- viz.js 2.1.2 + full.render.js do CDN unpkg
5. A saída deve ser sempre em **inglês**, independentemente do idioma do artigo.
6. Exibir **apenas o HTML completo** — sem comentários adicionais.
---
# Requisitos Estruturais para o Grafo de Conhecimento
- Conceito fundamental posicionado no centro superior.
- Fluxo vertical = cadeia causal/lógica.
- Fluxo horizontal = contraste / evidência / raciocínio paralelo.
- Cada nível mais profundo deve dar a sensação de que "existe outra camada abaixo dele".
- Utilize o **Princípio da Irredutibilidade**: inclua apenas os nós essenciais.
---
# Formato do cartão de nó
Cada nó deve aparecer como um “cartão de conceito” retangular com cantos arredondados:
- **Resumo:** conceito breve (2 a 4 palavras)
- **Abaixo:** uma definição de no máximo 2 linhas (metáfora + essência)
- **Tamanho da fonte:**
- Conceito: **16–18px**
- Definição: **14–15px**
- Fonte sem serifa (Inter / Roboto / Noto Sans)
---
# Tema Dark Tech (Estilo DOT A)
- Fundo: carvão escuro (#111111)
- Nós: gradientes prateados metálicos
- Bordas: brilho ciano frio
- Bordas: curvas suaves em azul neon com transparência gradual
- No geral: HUD futurista / estética cibernética
---
# Tema claro de alto contraste (Estilo DOT B)
- Fundo: cinza claro esfumaçado (#F5F7FA)
- Nós: branco brilhante com leve morfismo vítreo
- Bordas: cinza-azulado suave (#DDE6F3)
- Sombras: brilho sutil azul-gelo
- Bordas: cinza escuro para as cadeias principais, cinza mais claro para as subcadeias.
- No geral: estilo Apple, limpo, altamente legível.
---
# Rótulos de relacionamento (Obrigatório)
Todas as arestas devem incluir rótulos semânticos:
**“surge de / leva a / impulsiona / possibilita / transforma / apoiado por / contrastado com / evidenciado por”**
---
# Requisitos do botão de alternância de tema
- Botão circular flutuante (FAB)
- Fixado no **canto inferior direito** (`position: fixed; bottom: 24px; right: 24px;`)
- Fundo semitransparente
- Sombra + brilho ao pairar
- Use o ícone: **“⇆”** ou **“🌓”**
Clicar nele alterna as fontes DOT e renderiza o gráfico novamente.
---
# Requisitos técnicos
- Carregar viz.js e full.render.js do CDN unpkg:
https://unpkg.com/viz.js@2.1.2/viz.js
https://unpkg.com/viz.js@2.1.2/full.render.js
- O resultado deve ser um **documento HTML totalmente independente**.
- Não inclua explicações, pedidos de desculpas ou comentários.
- Somente saída:
Descrição
Recomendado por
nene@YouMind
Por que recomendamos esta habilidade
Transforme artigos complexos em gráficos de conhecimento interativos e em múltiplas camadas, apresentados em um único arquivo HTML autossuficiente. Esta skill oferece de forma exclusiva dois temas visuais alternáveis — Dark Tech e Light High-Contrast — permitindo uma exploração dinâmica das ideias principais por meio de um modelo de explicação visualmente impressionante e estruturado causalmente, completo com rótulos de relacionamento semântico.
Transforme artigos complexos em gráficos de conhecimento interativos e multicamadas. Visualize ideias centrais com temas dinâmicos e cadeias causais, tudo em um único HTML compartilhável.
Habilidades relacionadas
Ver tudoPesquisaMapa mental
Transforme qualquer conteúdo complexo—artigos, vídeos, PDFs—em mapas mentais hierárquicos e cristalinos. Visualize informações instantaneamente, compreenda conceitos essenciais e acelere seu aprendizado sem esforço.
Página webApresentação estilo TED
Transforme suas ideias em apresentações cativantes no estilo TED. Crie narrativas envolventes e visuais impressionantes que inspiram e engajam, tudo com um clique.
Página webCriador de Páginas Exploráveis
Um relatório explica. Uma página permite que as pessoas descubram por conta própria. O YouMind já pode construir páginas web. O Explorable Explainer decide o que construir — transforma uma pesquisa, um conjunto de dados ou um tópico em uma única página interativa, na tradição de gráficos de redação e explicações exploráveis: narrativa guiada por rolagem, gráficos reais, controles que você pode mover, fontes que você pode verificar. Ele planeja antes de codificar. Você aprova primeiro um plano de construção: a única pergunta que a página responde, a revelação — o momento em que o leitor deve sentir "oh" — uma espinha de rolagem de cinco a oito seções, duas a quatro interações, cada uma justificada pelo que o leitor aprende ao movê-la, e um contrato de dados listando cada número e sua origem. Em seguida, ele constrói um único arquivo HTML autocontido, sem etapa de compilação. Marcação semântica. Todos os números em uma única constante DATA editável no topo. Revelações de rolagem que não quebram em um telefone. Cada controle é um elemento de formulário real, operável por teclado, com texto ao vivo descrevendo seu valor atual. A acessibilidade é incorporada, não adicionada por último: contraste 4.5:1, anéis de foco visíveis, texto alternativo em todo lugar, nenhum significado transmitido apenas pela cor, movimento reduzido respeitado, responsivo a partir de 360px. Antes de entregar, ele executa uma autoavaliação de cinco pontos e relata os resultados honestamente: a revelação realmente funciona, a página ainda é legível com JavaScript desativado, a ordem de tabulação é sensata, cada número é rastreável, há algo animando que o leitor queira parar? Duas regras que ele não quebra: nunca inventa dados para fazer um gráfico parecer bom e avisa quando seus números contradizem seu rascunho. Para pesquisadores, analistas, jornalistas, educadores, fundadores independentes e consultores que querem que seu trabalho seja explorado, não apenas folheado.
Encontre sua próxima habilidade favorita
Explore mais habilidades de IA selecionadas para pesquisa, criação e trabalho do dia a dia.