Extensão do navegador para permitir que a interface de bate-papo oficial do DeepSeek ofereça suporte a gráficos de renderização em linha

Introdução geral

DeepSeek A extensão Diagrams é uma extensão do Chrome projetada para ajudar os usuários a renderizar diagramas em linha no site do DeepSeek. Com base na biblioteca Mermaid.js, a extensão converte diagramas descritos em texto diretamente em diagramas visuais, aprimorando a experiência do usuário no DeepSeek. Com essa extensão, os usuários podem criar e visualizar facilmente fluxogramas, diagramas de sequência, gráficos de Gantt e outros tipos de gráficos, facilitando muito a visualização e a análise de dados.

Lista de funções

• Renderização gráficaSuporte à renderização em linha de muitos tipos de gráficos em sites do DeepSeek, incluindo fluxogramas, gráficos de sequência, gráficos de Gantt, etc.
• Integração com o Mermaid.jsBaseado na biblioteca Mermaid.js, suporte para a criação de gráficos usando a sintaxe Mermaid.
• Instalação rápidaUm processo de instalação simples que permite que os usuários comecem a trabalhar rapidamente.
• Visualização em tempo realVisualização dos resultados do gráfico em tempo real no site do DeepSeek.
• alta compatibilidadeCompatível com a versão mais recente do Chrome para garantir uma operação estável.

Usando a Ajuda

Processo de instalação

1. acesse https://github.com/yan5xu/deepseek-diagrams-extension/releases

2 - Faça o download do pacote zip mais recente

3. abra a página de gerenciamento de extensões do Chrome e digite chrome://extensions/ na barra de endereços).

4. ative o "Modo de desenvolvedor" no canto superior direito.

5. clique em "Load Extracted Extensions" (Carregar extensões extraídas) e selecione a pasta . /dist do projeto. (Arraste o zip baixado para a pasta e ele funcionará).

Uso

1. Quando a instalação estiver concluída, visite o site do DeepSeek.
2. Quando os gráficos precisarem ser renderizados, use a sintaxe do Mermaid para escrever as descrições dos gráficos. Exemplo:

   sequenceDiagram
Alice->>Bob: Olá, Bob, como você está?
Bob-->>Alice: Estou bem, obrigado!

3. Quando a descrição do gráfico estiver completa, clique no botão "Render Chart" (Renderizar gráfico) e o gráfico será gerado automaticamente e incorporado à página.
4. Os usuários podem visualizar os resultados do gráfico em tempo real, ajustando a sintaxe do Mermaid até ficarem satisfeitos.

Funções principais

• Criação de fluxogramasDescrição do fluxograma: Digite a descrição da sintaxe Mermaid do fluxograma na caixa de texto no site do DeepSeek e clique no botão "Renderizar diagrama" para gerar o fluxograma.
• Criação de diagramas de sequênciaDigite também a descrição da sintaxe Mermaid do diagrama de sequência na caixa de texto e clique no botão "Renderizar diagrama" para gerar o diagrama de sequência.
• Criação de um gráfico de GanttDigite a descrição da sintaxe Mermaid do gráfico de Gantt e clique no botão "Render Chart" para gerar o gráfico de Gantt.

Exemplo de operação detalhada

1. Exemplo de fluxograma::

   gráfico TD
A[Start] --> B{Is it?}
B -->|Sim| C[OK]
B -->|Não| D[Não está OK]

Depois de inserir o código acima, clique no botão "Render Diagram" para gerar o fluxograma.

2. Exemplo de diagrama de sequência::

   sequenceDiagram
Participante Alice
participante Bob
Alice->>Bob: Olá, Bob, como você está?
Bob-->>Alice: Estou bem, obrigado!

Após inserir o código acima, clique no botão "Render Chart" para gerar o gráfico de sequência.

3. Exemplo de gráfico de Gantt::

   gantt
dateFormat YYYY-MM-DD
título Adicionando o diagrama GANTT ao Mermaid
seção A seção
Tarefa concluída: done, des1, 2014-01-06,2014-01-08
Tarefa ativa :active, des2, 2014-01-09, 3d
Tarefa futura :des3, depois de des2, 5d

Depois de inserir o código acima, clique no botão "Render Chart" para gerar um gráfico de Gantt.

Com as etapas acima, os usuários podem criar e renderizar facilmente vários gráficos no site do DeepSeek para aprimorar a visualização de dados.