Foreword

The core design philosophy of DeepSeek Harness (DSH) is “everything is a plugin,” allowing developers to extend capabilities within the conversation flow. When handling data analysis or architecture diagram rendering, the traditional approach often requires copying chart code into external tools or relying on preset templates, which can limit flexibility. The dsh-artifact plugin is designed to solve this pain point. It enables the model to understand intent through natural language, then directly generate and render real ECharts 6 and Mermaid 11 engine code, providing a native-level interactive experience within the chat interface.

Plugin Positioning

This plugin is maintained by sumarilkkxx and is a DSH plugin focused on visualization rendering. Instead of providing hand-drawn-style chart templates, it passes complete ECharts configuration objects or Mermaid source code to the browser as payload, which is then rendered by the real rendering engine.

Core Features

The plugin has built-in complete native rendering capabilities, including:

  • Native engine support: Supports ECharts 6 and Mermaid 11.
  • Rich chart types:
    • ECharts: Supports Cartesian coordinate systems, pie charts, radar charts, calendar heatmaps, relationship graphs, Sankey diagrams, tree diagrams, maps, parallel coordinate systems, and related series and components.
    • Mermaid: Supports flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, journey diagrams, and more.
  • Interaction and appearance:
    • The canvas supports tooltips, legends, zooming, panning, 3D controls, and responsive adjustments.
    • Provides palette control and light/dark mode switching.
  • Export: Supports exporting rendered results as PNG or SVG images.
  • Security isolation: Runs custom HTML in a sandboxed iframe with CSP restrictions to prevent cross-origin attacks.

Installation and Enablement

Before use, ensure that the environment has DeepSeek Harness CLI installed and that dsh web has been run to initialize the Web configuration.

# GitHub 安装（推荐，包含预构建引擎资源）
dsh plugin --profile web add github:sumarilkkxx/dsh-artifact

# 本地开发安装
dsh plugin --profile web add link:/path/to/dsh-artifact

After installation, restart dsh web and perform a hard refresh in the browser (Cmd/Ctrl+Shift+R). Note: The plugin internally depends on pnpm. Make sure pnpm has been added to the system PATH.

Typical Usage

In the conversation, simply describe your requirement in natural language, and the model will invoke the rendering tool.

  • Requirement example:
    > “Compare revenue and profit for the four quarters of 2024, using a dual-axis chart, highlight the best-performing quarter, and use a dark background.”
  • Requirement example:
    > “Generate a GitHub-style calendar heatmap of daily commit records for this year.”
  • Requirement example:
    > “Draw a sequence diagram for OAuth login, including success and failure paths.”

After the model responds, the canvas supports direct interaction within the conversation and provides appearance controls and image download functionality.

Technical Details and Notes

1. Security Boundary

The plugin passes configuration through pure JSON, preventing the execution of uncontrolled JavaScript code. JavaScript callback functions cannot cross the JSON security boundary. It is recommended to use string templates in ECharts formatters (such as {c}%) instead of functions.

2. Map Rendering

For ECharts map visualization, valid GeoJSON or SVG data must be passed through the maps parameter. The plugin will not request map data from the network.

3. 3D and Extensions

ECharts-GL is loaded only when the options explicitly require 3D functionality. It is not enabled by default.

4. HTML Pass-Through Channel

If extremely complex custom interactions are required, you can use the render_html tool. This tool runs in an isolated iframe, cannot export images through the host application, and does not support network access.

Example Configuration

The following is a standard ECharts dual-axis chart JSON example:

{
  "engine": "echarts",
  "title": "2024 年季度营收",
  "mode": "dark",
  "option": {
    "tooltip": { "trigger": "axis" },
    "legend": { "top": 28 },
    "xAxis": { "type": "category", "data": ["Q1", "Q2", "Q3", "Q4"] },
    "yAxis": [
      { "type": "value", "name": "营收 (万元)" },
      { "type": "value", "name": "利润 (万元)" }
    ],
    "series": [
      { "type": "bar", "name": "营收", "data": [120, 180, 150, 210] },
      { "type": "line", "name": "利润", "data": [80, 90, 100, 130] }
    ]
  }
}

Summary

dsh-artifact provides DSH with rendering capabilities on par with professional charting tools while maintaining the coherence of the chat interface. With native engine support and a secure sandboxing mechanism, it is well suited to scenarios where charts need to be quickly generated, interacted with, and exported within an AI conversation flow.

GitHub Repository