Pending human review — the facts below come from the source repository.
What it does
Pending human review — the facts below come from the source repository.
Who it’s for
Users who want this capability in DSH; check the source and docs before installing.
Risks & caveats
No clear license — check usage rights.
Install
Review, then install
dsh plugin --profile web add github:genius-alray/dsh-mermaid-render
Repository facts
TypeNot classified yet
Stars1
Forks0
Open issues0
LanguageTypeScript
LicenseMissing
Last activityAug 16, 2026
Metadata60% complete
StatusPublic
Topics & capabilities
What this plugin covers
GitHub topics
dsh-plugin
Declared platforms
No supported platforms were declared.
Source preview
README snapshot
dsh-mermaid-render Interactive Mermaid diagram rendering for agent messages in the DSH Web UI: mermaid code blocks in the conversation are rendered into interactive diagram cards — zoom, fit-width, fullscreen viewer, and a preview/code toggle — built entirely on official UI primitives and DSW design tokens. When rendering fails, the original code block is preserved and an inline error banner is shown right below it. ## Features - Auto-render mermaid code blocks — fences with mermaid / mmd info strings in conversation messages become diagram cards automatically (both assistant and user messages). - Zoom / fit-width — viewport-only zoom: the card shell keeps its size, only the diagram inside scales and scrolls. Ctrl/⌘+wheel zooms, the fit button resets to width fit. - Fullscreen viewer — a fixed overlay (product-style mask layer, portal to body): zoom, fit, and close via Esc / mask click / button. - Preview / code toggle — a segmented selector in the card's top-right switches between the rendered diagram and the original mermaid source. - Graceful failure — on a render or loader error the original code block stays visible and a compact inline error banner appears under it; no stray elements are left in the page. - Theme-aware — diagrams re-render with the mermaid dark/default theme when the app theme changes. - Bilingual UI — zh / en labels follow the app locale. - Native look — primitives Pill / Tooltip components, composer-style icon buttons, lucide-style SVG icons, --dsw-* tokens only. ## Install Installed via the official dsh plugin command; it links the package into the profile and automatically appends the dsh.bundle package to dsh.profile.bundles (no manual profile edits). bash dsh plugin --profile web add genius-alray/dsh-mermaid-render Then restart dsh web — the bundle layer is composed at boot. > Git-source installs may hit pnpm's build-script approval on first run; follow the printed hint to add the key to the profile's pnpm-workspace.yamlallowBuilds and re-run. The repo commits prebuilt lib/, so no local build is required. ## Usage Send a message containing a mermaid code block: markdown ```mermaid flowchart TD A[Start] --> B{Has a mermaid block?} B -- yes --> C[Load mermaid renderer] B -- no --> D[Keep plain code block] C --> E[Render interactive diagram] E --> F[Toolbar: zoom / fit / fullscreen] ``` The block renders into a card with a bottom-right toolbar (zoom in / zoom out / fit width / fullscreen) and a top-right Preview / Code selector. On a syntax error the card is not rendered: the original code block remains and an inline "Mermaid render failed" banner with the parser message appears below it. ## Technical notes - Bundle plugin (official form): package.json declares dsh.bundle.patch: ./cordis.patch.yml; the patch mounts the package itself. Pure client (dsh.client.platform: web); lib/client.js is served at /plugins/dsh-mermaid-render/client.js. - mermaid is not bundled — the ~3.3 MB library is loaded lazily at first use via a runtime dynamic import() of the pinned mermaid@10.9.3+esm build from jsDelivr, so the plugin bundle stays ~34 kB and the page boot cost is zero. - Rendering pipeline — a MutationObserver watches the conversation scrollport for .md-code-block elements whose fence infostring is mermaid/mmd; each block is rendered into a private hidden container (mermaid's error path leaves a huge "Syntax error" SVG in the DOM otherwise — the private container keeps the page clean), then the resulting SVG is mounted into a React root as an interactive card. - Text fidelity — the SVG is scaled through its own width/height (native vector re-render) rather than CSS transforms, and the card isolates inherited typography (font: 13px/1.5 + CJK font stack) so Chinese node labels never overflow or clip inside foreignObject labels. - Stable layout — the stage height is fixed at fit-time and scrollbar-gutter: stable reserves the scrollbar slot, so clientWidth cannot oscillate and the page never jitters. - UI primitives — Pill (preview/code toggle), Tooltip, composer-style icon buttons, and hand-drawn lucide-style icons; only --dsw-* tokens, no hard-coded colors. ## License MIT
A visual settings dashboard for DeepSeek Harness: every registered settings namespace — including third-party plugin ones the official UI never covers — rendered as editable, schema-driven forms. Early, but the right direction: stop hand-editing YAML.
A DIY trajectory visualizer for DeepSeek Harness: watch the agent’s plan and execution unfold as a graph instead of scrolling raw logs. Early, but it fills a real gap — understanding at a glance what the agent is doing.
Dispatch DSH work from Claude Code / Codex: spin up in-host DSH agent sessions with per-tier presets, watch native subagent progress, and borrow a multimodal bridge that lends the text-only harness vision and image generation. An orchestration plugin that turns DSH into a backend for other coding agents.