Archify Diagrams
tt-a1i/archify
Creates interactive architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone HTML with inline SVG, themes and image or video export.
A skill your agent uses when adding a heavyweight browser dependency (diagram/chart renderers like mermaid, code editors, big wasm-adjacent libs) to a lightweight DSH Web plugin that must stay…
Install Plugin Heavy Dep
$ npx skills add NanmiCoder/dsh-auto-mode --skill plugin-heavy-dep -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install NanmiCoder/dsh-auto-mode plugin-heavy-dep --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/NanmiCoder/dsh-auto-mode.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/plugin-heavy-dep .claude/skills/plugin-heavy-dep && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "plugin-heavy-dep" agent skill from https://github.com/NanmiCoder/dsh-auto-mode/tree/main/skills/plugin-heavy-dep into .claude/skills/plugin-heavy-dep/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "plugin-heavy-dep", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/NanmiCoder/dsh-auto-mode/tree/main/skills/plugin-heavy-depType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add NanmiCoder/dsh-auto-mode --skill plugin-heavy-dep -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install NanmiCoder/dsh-auto-mode plugin-heavy-dep --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/NanmiCoder/dsh-auto-mode.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/plugin-heavy-dep .agents/skills/plugin-heavy-dep && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "plugin-heavy-dep" agent skill from https://github.com/NanmiCoder/dsh-auto-mode/tree/main/skills/plugin-heavy-dep into .agents/skills/plugin-heavy-dep/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "plugin-heavy-dep", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add NanmiCoder/dsh-auto-mode --skill plugin-heavy-dep -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install NanmiCoder/dsh-auto-mode plugin-heavy-dep --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/NanmiCoder/dsh-auto-mode.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/plugin-heavy-dep .cursor/skills/plugin-heavy-dep && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "plugin-heavy-dep" agent skill from https://github.com/NanmiCoder/dsh-auto-mode/tree/main/skills/plugin-heavy-dep into .cursor/skills/plugin-heavy-dep/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "plugin-heavy-dep", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/NanmiCoder/dsh-auto-mode.git --path skills/plugin-heavy-dep--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add NanmiCoder/dsh-auto-mode --skill plugin-heavy-dep -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install NanmiCoder/dsh-auto-mode plugin-heavy-dep --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/NanmiCoder/dsh-auto-mode.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/plugin-heavy-dep .gemini/skills/plugin-heavy-dep && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "plugin-heavy-dep" agent skill from https://github.com/NanmiCoder/dsh-auto-mode/tree/main/skills/plugin-heavy-dep into .gemini/skills/plugin-heavy-dep/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "plugin-heavy-dep", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install NanmiCoder/dsh-auto-mode plugin-heavy-depInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add NanmiCoder/dsh-auto-mode --skill plugin-heavy-dep -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/NanmiCoder/dsh-auto-mode.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/plugin-heavy-dep .github/skills/plugin-heavy-dep && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "plugin-heavy-dep" agent skill from https://github.com/NanmiCoder/dsh-auto-mode/tree/main/skills/plugin-heavy-dep into .github/skills/plugin-heavy-dep/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "plugin-heavy-dep", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add NanmiCoder/dsh-auto-mode --skill plugin-heavy-dep -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install NanmiCoder/dsh-auto-mode plugin-heavy-dep --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/NanmiCoder/dsh-auto-mode.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/plugin-heavy-dep .opencode/skills/plugin-heavy-dep && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "plugin-heavy-dep" agent skill from https://github.com/NanmiCoder/dsh-auto-mode/tree/main/skills/plugin-heavy-dep into .opencode/skills/plugin-heavy-dep/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "plugin-heavy-dep", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
plugin-heavy-dep- GitHub stars
- 165
- Used in
- 1 other repo
- Token cost
- ~1.4k tokens
- SKILL.md length
- 753 words
- Files
- 2
- Skills in repo
- 10
- Repo updated
- First seen
- Licence
- MIT
At a glance
A skill your agent uses when adding a heavyweight browser dependency (diagram/chart renderers like mermaid, code editors, big wasm-adjacent libs) to a lightweight DSH Web plugin that must stay…
- Works in 7 steps: Decide lazy vs inline → Bundle the chunk as ONE file → Serve it from a host route scoped to… → …
- Adding a heavyweight browser dependency (diagram/chart renderers like mermaid
- SKILL.md covers 1. Decide lazy vs inline, 2. Bundle the chunk as ONE file, 3. Serve it from a host route… and 4. Import lazily, cache…, plus 3 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Plugin Heavy Dep is an agent skill from NanmiCoder/dsh-auto-mode. Use when adding a heavyweight browser dependency (diagram/chart renderers like mermaid, code editors, big wasm-adjacent libs) to a lightweight DSH Web plugin that must stay small, when wiring a lazy-loaded chunk through a host route, when the lazy import intermittently fails or falls back, or when rendering untrusted markup (SVG/HTML) produced by such a dependency.
Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 1 other file (for example `README.md`).
It sits in Development, covering Diagrams. It works with Mermaid and WebAssembly. The repository describes itself as: Safe automatic permissions for DeepSeek Harness. The licence is MIT.
When your agent uses it
- Adding a heavyweight browser dependency (diagram/chart renderers like mermaid
- Big wasm-adjacent libs) to a lightweight DSH Web plugin that must stay small
- Wiring a lazy-loaded chunk through a host route
- The lazy import intermittently fails
Example prompts
- “/plugin-heavy-dep”
Workflow steps
7 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 907d663. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Plugin Heavy Dep loads about 1.4k tokens when it runs. Until then it costs about 96 tokens; SKILL.md has 753 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from NanmiCoder/dsh-auto-mode at commit 907d663, republished under its MIT licence (© NanmiCoder). 753 words, ~1,370 tokens.
Download SKILL.mdSave it as
.claude/skills/plugin-heavy-dep/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.- name
- plugin-heavy-dep
- description
- Use when adding a heavyweight browser dependency (diagram/chart renderers like mermaid, code editors, big wasm-adjacent libs) to a lightweight DSH Web plugin that must stay small, when wiring a lazy-loaded chunk through a host route, when the lazy import intermittently fails or falls back, or when rendering untrusted markup (SVG/HTML) produced by such a dependency.
Add Heavy Dependencies to a Lightweight DSH Web Plugin
A lightweight Web plugin (small client bundle, no build farm) can still ship a multi-megabyte renderer — if the heavy code never loads until it is needed and degrades gracefully when it cannot load. This skill is the integration checklist; every item below was earned from a real mermaid integration.
1. Decide lazy vs inline
If the dependency would multiply the client bundle several-fold and only one feature needs it (a fence renderer, an editor opened on demand), do NOT inline it into the client bundle. Split it into a separate chunk file the client imports dynamically only when the feature actually renders.
2. Bundle the chunk as ONE file
Bundle the dependency into a single self-contained ESM file with code-splitting disabled. A general-purpose bundler left on default settings splits the library's internal dynamic imports into sibling chunk files with content-hashed names — the browser then resolves them as relative imports against the chunk's URL, and every sibling must also be served, named exactly, and MIME-correct. One file, one import, no relative-resolution class of bugs.
3. Serve it from a host route scoped to your own lib
Register a prefix route on webServer that serves files from the plugin's
own lib directory only:
- Resolve the lib directory from the host bundle itself (
import.meta.url), never fromprocess.cwd(). - Restrict to a whitelist of extensions (your chunk is
.js/.mjs— nothing else should ever be served). - Containment guard: verify the requested path stays inside the lib dir. Two
hard-won rules:
- Compare with
path.relative, notstartsWith: a prefix compare is wrong the moment the filesystem normalizes differently than your base string. - Windows drive letters change case:
realpathSyncmay returne:\…where your base saysE:\…; a case-sensitive compare then misjudges a perfectly contained path as an escape and answers 403.path.relative(plus anisAbsolutecheck on the result for cross-drive) is robust.
- Compare with
- Serve with a JavaScript MIME (
application/javascript) — a wrong MIME makes the browser reject the dynamic import.
Remember: the host route only exists after a dsh restart; a hard refresh alone does not register new host code. A 404 on a freshly added route almost always means "not restarted yet" or "the installed copy predates the route".
4. Import lazily, cache verdicts, fall back
import()the chunk URL on first render of the feature; cache the successful module so repeated fences do not re-import.- Do not cache failures the same way — or a transient failure sticks for the page lifetime; let the next attempt retry, but throttle (a failing import in a loop is its own console spam).
- Always render a fallback (e.g. the original code block) when the import or the render throws; reading must never break because a diagram could not load. Tag the fallback with a state attribute and log the failure reason to the console — "it fell back" without a reason is undebuggable.
Show full SKILL.md (273 more words)Show less
5. Untrusted markup: sanitize before innerHTML
A renderer fed untrusted text (markdown, model output) emits markup you must
treat as hostile before dangerouslySetInnerHTML:
- Configure the renderer to its strict mode and to emit real SVG text
rather than HTML labels (HTML labels ride inside
<foreignObject>— the one channel that carries raw HTML inside an SVG). - Suppress the library's global error side effects (some renderers dump a
giant error SVG into
document.bodybefore rejecting). - Then re-sanitize the emitted SVG yourself with a zero-dependency
whitelist pass: parse as XML (
image/svg+xml; a parse failure rejects the whole string), accept only an<svg>root, stripforeignObject/scriptand foreign-HTML elements case-insensitively, stripon*/@*attributes, and strip allhref/xlink:href(static diagrams gain nothing from links; a hostile href can navigate the GUI). Defense in depth, not defense instead.
6. Interaction ownership under a modal
A fullscreen zoom/pan modal over the plugin's panels must own ALL wheel events while open — including Ctrl+wheel, if the underlying pane already binds Ctrl+wheel (font sizing). Guard the pane-level handler with a modal presence check; otherwise both behaviors fire on one gesture. Modal zoom: wheel anchored at the cursor, drag to pan, keyboard shortcuts, Esc/overlay click to close.
7. Ship it
- Commit the built chunk to the package (the plugin ships
lib/); declare it infilesso published payloads stay closed. - Document the restart requirement (host route) vs refresh-only (client) in the release notes — users hit 404s otherwise.
- A regression test per pitfall: the fallback path (chunk import fails → original rendering), the sanitizer (strips the hostile channels), and — for the host route — a containment test that a case-differing but contained path is served, not refused.
© NanmiCoder, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 1 other file in skills/plugin-heavy-dep of NanmiCoder/dsh-auto-mode.
- SKILL.md
- README.md
Open the folder on GitHubat commit 907d663
Used in 1 other repository
We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in NanmiCoder/dsh-auto-mode, which our catalogue first saw on October 7, 2026.
Compare with similar skills
Plugin Heavy Dep next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Plugin Heavy Dep this skillNanmiCoder/dsh-auto-mode | 165 | 1 repos | ~1.4k | Automated safety check: Pass | MIT | |
| Archify Diagramstt-a1i/archify | 79k | — | ~2.9k | Automated safety check: Pass | MIT | |
| Diagram Designcathrynlavery/diagram-design | 44k | 1 repos | ~7.5k | Automated safety check: Pass | MIT | |
| Draw.io Diagram StudioAgents365-ai/drawio-skill | 10k | — | ~2.4k | Automated safety check: Notes | MIT | |
| Pretty Mermaid Rendererimxv/Pretty-mermaid-skills | 1.5k | — | ~2k | Automated safety check: Pass | MIT | |
| Archify Diagram BuilderUnclecheng-li/AI_Animation | 1.4k | 2 repos | ~4.1k | Automated safety check: Pass | MIT |
Similar skills
Diagram Design
cathrynlavery/diagram-design
Creates branded diagrams, from architecture, flowchart and sequence to charts and maps, as self-contained HTML with inline SVG, with import from draw.io, Mermaid and Excalidraw.
Draw.io Diagram Studio
Agents365-ai/drawio-skill
Creates and edits editable draw.io diagrams from descriptions, code, infrastructure files, SQL and API schemas, with sync, review, test and export tools.
Pretty Mermaid Renderer
imxv/Pretty-mermaid-skills
Writes and renders Mermaid diagrams as themed SVG, PNG or terminal ASCII and Unicode art with a bundled Node.js CLI that needs no browser.
Archify Diagram Builder
Unclecheng-li/AI_Animation
Builds validated architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone interactive HTML from a small JSON spec, with optional motion and image export.
Mermaid
WH-2099/mermaid-skill
Generate Mermaid diagrams from user requirements. An agent skill from WH-2099/mermaid-skill.
More from NanmiCoder/dsh-auto-mode
All 10 skills in this repoDsh Upgrade Audit
NanmiCoder/dsh-auto-mode
Audit external compatibility between two DSH (DeepSeek Harness) versions and detect reverts, producing an upgrade-report directory; compares git tags with a source checkout, or published npm…
Plugin Workflow
NanmiCoder/dsh-auto-mode
Coordinate multiple DeepSeek Harness plugin Skills across inspection, migration, runtime debugging, heavy dependencies, testing, naming, and release.
Plugin Write
NanmiCoder/dsh-auto-mode
A skill your agent uses when creating a DeepSeek Harness plugin, choosing public names for a new external DSH plugin, validating a dsh-plugin.naming.json manifest, checking reviewed central…
Plugin Test
NanmiCoder/dsh-auto-mode
A skill your agent uses when writing or reviewing tests for DeepSeek Harness plugins, external DSH plugin packages, or package changes in the deepseek-harness repository.
Dsh Benchmark Case
NanmiCoder/dsh-auto-mode
A skill your agent uses when the user hands over a dsh plugin repository (or a real migration commit / version corridor) and wants its upgrade experience extracted into one auto-graded Harbor…
Plugin Release
NanmiCoder/dsh-auto-mode
Package, publish, and distribute DeepSeek Harness (DSH) plugins — npm pack artifact validation, GitHub/npm/hub release-track selection, tarball overrides installs for the unpublished cohort…
Related
Works with
Categories
Questions about Plugin Heavy Dep
What does Plugin Heavy Dep do?
A skill your agent uses when adding a heavyweight browser dependency (diagram/chart renderers like mermaid, code editors, big wasm-adjacent libs) to a lightweight DSH Web plugin that must stay…. Plugin Heavy Dep is an agent skill from NanmiCoder/dsh-auto-mode. Use when adding a heavyweight browser dependency (diagram/chart renderers like mermaid, code editors, big wasm-adjacent libs) to a lightweight DSH Web plugin that must stay small, when wiring a lazy-loaded chunk through a host route, when the lazy import intermittently fails or falls back, or when rendering untrusted markup (SVG/HTML) produced by such a dependency.
When should I use Plugin Heavy Dep?
Plugin Heavy Dep fits situations like: adding a heavyweight browser dependency (diagram/chart renderers like mermaid; big wasm-adjacent libs) to a lightweight DSH Web plugin that must stay small; wiring a lazy-loaded chunk through a host route; the lazy import intermittently fails.
How do I install Plugin Heavy Dep in Claude Code?
Run `npx skills add NanmiCoder/dsh-auto-mode --skill plugin-heavy-dep -a claude-code`. Or copy the skill folder (skills/plugin-heavy-dep in NanmiCoder/dsh-auto-mode) into .claude/skills/plugin-heavy-dep in your project. Claude Code loads it when a task matches its description.
How do I install Plugin Heavy Dep in Codex?
Run `npx skills add NanmiCoder/dsh-auto-mode --skill plugin-heavy-dep -a codex`. Or copy the skill folder (skills/plugin-heavy-dep in NanmiCoder/dsh-auto-mode) into .agents/skills/plugin-heavy-dep in your project. Codex loads it when a task matches its description.
Can I use Plugin Heavy Dep in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add NanmiCoder/dsh-auto-mode --skill plugin-heavy-dep -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/plugin-heavy-dep, .gemini/skills/plugin-heavy-dep, .github/skills/plugin-heavy-dep and .opencode/skills/plugin-heavy-dep in your project.
What does Plugin Heavy Dep need to run?
SKILL.md names no scripts, command-line tools or credentials: Plugin Heavy Dep is instructions for the agent only.
Does Plugin Heavy Dep access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Plugin Heavy Dep safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Plugin Heavy Dep use?
Plugin Heavy Dep is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Plugin Heavy Dep use?
About 1.4k tokens (SKILL.md is roughly 5.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Plugin Heavy Dep?
Skills that share tags, products or a category with Plugin Heavy Dep: Archify Diagrams (tt-a1i/archify, 79k stars), Diagram Design (cathrynlavery/diagram-design, 44k stars), Draw.io Diagram Studio (Agents365-ai/drawio-skill, 10k stars) and Pretty Mermaid Renderer (imxv/Pretty-mermaid-skills, 1.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Plugin Heavy Dep?
NanmiCoder (a GitHub user) maintains it in NanmiCoder/dsh-auto-mode, which has 165 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on September 29, 2026.
Source: NanmiCoder/dsh-auto-mode on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.