Introduction

When developing agents in DeepSeek Harness (DSH), presenting project progress and system architecture to users usually relies on plain text. This approach lacks intuitiveness and makes it difficult to grasp the overall picture quickly. The dsh-planchart plugin addresses this issue. It provides agents with a visual presentation surface, displaying project plans as step lists and architecture diagrams.

Plugin Overview

This is a DeepSeek Harness plugin that allows agents to publish project plans as steps in the right-side panel and display framework diagrams in the ‘PlanChart’ tab of the central view. It supports exporting to SVG or PNG.

  • Maintainer: SmileBuild
  • Category: Client
  • License: MIT

Core Features

  1. Project Planning Surface: Provides a dedicated area for project planning presentation.
  2. Steps Panel: Renders project steps in the right-side panel, showing phase, status indicators, and step details.
  3. Framework Diagram: Displays an automatically laid-out architecture diagram on the ‘PlanChart’ tab.
  4. Image Export: Supports downloading charts as SVG or PNG.
  5. Automatic Layout: Automatically generates the layout for architecture diagrams.

Installation and Activation

Use the official install command to add the plugin to the current configuration:

dsh plugin --profile web add ./dsh-PlanChart

After installation, a hard reload of the browser is required. Otherwise, the new plugin package cannot be loaded.

Typical Usage

The agent can publish and update charts by calling tools and commands:

  1. Publish a chart: Use the planchart_set tool to publish a complete chart, including the title, summary, steps, and framework.
  2. View a chart: Use the /planchart slash command to print the current chart.
  3. Read a chart: Use the planchart_get tool to read the content of the currently displayed chart.
  4. Update a chart: Call the planchart_set tool again to update the entire chart.

Data Structure

Step Data

A step includes a status, title, and optional phase information.

{
  "id": "...",
  "title": "Build recipe CRUD",
  "status": "pending",  // pending | active | done | blocked
  "detail": "create, edit, publish",
  "phase": "Build"
}

Framework Diagram Data

The framework diagram defines nodes, edges, and groups.

{
  "direction": "TB",                       // TB 或 LR
  "groups": [{ "id": "...", "label": "Client" }],
  "nodes":  [{
    "id": "...",
    "label": "Web app",
    "kind": "entry",                       // core | entry | output | store | external | default
    "note": "React + Vite",
    "group": "client"
  }],
  "edges":  [{
    "from": "web-app",
    "to": "api-gateway",
    "label": "HTTPS",
    "dashed": false
  }]
}

Notes

  • Hard Reload Requirement: Be sure to hard reload the browser after installation; otherwise, the plugin will not take effect.
  • Session Persistence: The chart belongs to the current session and persists after restart, recovery, and fork.
  • Sub-agent Limitation: Charts published from inside a sub-agent do not appear in the panel.
  • No Automatic Clearing: Unlike a to-do list, a published chart is not automatically cleared in the next turn unless planchart_set is called again.
  • Rendering Method: Charts are drawn using solid-color attributes. The downloaded SVG can render independently without relying on CSS classes.

Use Cases

This plugin is suitable for scenarios that require intuitive presentation of project progress bars, architecture diagrams, or development roadmaps in the DSH interface. Since charts run with the current DSH process permissions, check the source code and license before installation.

Summary

dsh-planchart adds a visual project planning capability to DSH agents. It simultaneously displays steps and architecture diagrams in the right-side panel and the central tab, and supports image export, improving project management transparency.