Introduction

When discussing design with DSH web and models, PlantUML is a handy way to express ideas: sequence diagrams, class diagrams, and flowcharts can be described with a few lines of text, and models are easy to generate. However, by default, model output ```plantuml fence code blocks only display the source code. To see the diagram, you have to copy the source code, render it in another tool, and compare the result while continuing the discussion, breaking the flow.

dsh-plantuml solves this step: it identifies PlantUML code blocks in assistant messages, automatically renders them into SVGs, and displays them directly in the conversation. DSH’s philosophy is “everything is a plugin,” and this kind of display-layer requirement is exactly what plugins are for. Below is an introduction to its functions, installation, and configuration.

What is it

dsh-plantuml is a DSH web plugin maintained by qschen86, version 0.1.0, under the MIT license. In a nutshell: it renders plantuml/puml fence code blocks within conversation messages into SVG charts.

Implementation is split into two sides:

  1. The Host side lib/index.js provides a POST /plugin/plantuml rendering interface, encoding according to PlantUML’s official encoding (deflate + custom base64) to request a remote service, or it can call the local plantuml command;
  2. The Browser side lib/client.js registers a low-priority renderer for assistant-step in conversation.chat.node. While retaining the display of original Markdown / reasoning / images / JSON, it parses PlantUML fences and asynchronously loads images.

Core Features

  • Identify plantuml/puml fence code blocks in assistant messages and automatically render them into SVGs via PlantUML services (default public server, configurable);
  • Support for architecture diagrams, flowcharts, sequence diagrams, use case diagrams, class diagrams, etc.;
  • Display error messages when rendering fails without blocking other Markdown content in the message;
  • Server address, local plantuml command, timeout, and source size limit can all be configured via environment variables.

Installation and Enablement

Installation command:

dsh plugin --profile web add dsh-plantuml

Alternatively, you can use the GitHub Release tarball:

dsh plugin --profile web add https://github.com/qschen86/dsh-plantuml/releases/download/v0.1.0/dsh-plantuml-0.1.0.tgz

After installation, verify the configuration first:

dsh --profile web --dump-config

Confirm the plugin entry has been added to bundles, then restart dsh web (host half-effective), and then refresh the page (client half-effective). Uninstall using the corresponding command:

dsh plugin --profile web remove dsh-plantuml

Typical Usage

Ask the model to output PlantUML source code in its reply, for example:

```plantuml
@startuml
Alice -> Bob: 你好
@enduml
```

The plugin will automatically replace this code with the rendered SVG image, allowing you to see the diagram directly in the message without manual intermediate steps.

Configuration

The plugin is configured via environment variables. The default values are as follows:

Variable Default Value Description
DSH_PLANTUML_SERVER https://www.plantuml.com/plantuml PlantUML service address, e.g., self-hosted http://127.0.0.1:8080/plantuml
DSH_PLANTUML_COMMAND Empty Set to the local plantuml command (or executable file path) to prioritize local rendering, avoiding network access
DSH_PLANTUML_TIMEOUT_MS 15000 Remote rendering timeout (milliseconds)
DSH_PLANTUML_MAX_SOURCE 1048576 Maximum byte size of a single PlantUML source code

A common pitfall: environment variables must be visible to the dsh web process. If the service is managed by a launchd supervised process (e.g., com.dsh.web-supervisor), you need to write the variables into its plist’s EnvironmentVariables (or use the DSH_START_CMD prefix); writing only to ~/.zshrc will not take effect.

Use Cases and Notes

Suitable scenarios:

  • Frequently asking models to draw sequence diagrams, class diagrams, or architecture diagrams, hoping the diagrams appear directly in the conversation;
  • Wanting rendering to be self-hosted or using a local command, not dependent on third-party online editors for transit.

Notes before use:

  1. The renderer priority for this plugin is -5 for assistant-step. If the browser renderer from dsh-llm-codex-app-server is also installed (priority -10), the latter will take over assistant messages first. In this case, if PlantUML rendering is needed, it is recommended to merge the two rendering sets or choose one.
  2. It defaults to the PlantUML public server, so the chart source code will be sent to an external service. For scenarios sensitive to content, you can self-host a service (modify DSH_PLANTUML_SERVER) or set DSH_PLANTUML_COMMAND to use the local command.
  3. The plugin runs with the permissions of the current dsh process. It is recommended to check the source code and license before installing.

Conclusion

dsh-plantuml does one thing: turn PlantUML code blocks in the conversation into diagrams. For DSH users who frequently draw diagrams using text, it saves the step of copying and pasting intermediates.

  • Project URL: https://github.com/qschen86/dsh-plantuml
  • Community directory page: https://www.skillhub.cn/plugins/qschen86/dsh-plantuml

(skillhub.cn is an independent directory site maintained by the community, with no official affiliation with DeepSeek / Huafan.)