Deepwiki Rs
sopaco/deepwiki-rs
AI-powered Rust documentation generation engine for comprehensive codebase analysis, C4 architecture diagrams, and automated technical documentation.
Agent skill
Dark Architecture Diagram Builder
Creates dark-themed system, cloud, security and network architecture diagrams as self-contained HTML files with inline SVG and CSS.
Install Dark Architecture Diagram Builder
$ npx skills add Cocoon-AI/architecture-diagram-generator --skill architecture-diagram -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Cocoon-AI/architecture-diagram-generator architecture-diagram --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/Cocoon-AI/architecture-diagram-generator.git skills-src && mkdir -p .claude/skills && cp -r skills-src/architecture-diagram .claude/skills/architecture-diagram && 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 "architecture-diagram" agent skill from https://github.com/Cocoon-AI/architecture-diagram-generator/tree/main/architecture-diagram into .claude/skills/architecture-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "architecture-diagram", 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/Cocoon-AI/architecture-diagram-generator/tree/main/architecture-diagramType 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 Cocoon-AI/architecture-diagram-generator --skill architecture-diagram -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Cocoon-AI/architecture-diagram-generator architecture-diagram --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Cocoon-AI/architecture-diagram-generator.git skills-src && mkdir -p .agents/skills && cp -r skills-src/architecture-diagram .agents/skills/architecture-diagram && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "architecture-diagram" agent skill from https://github.com/Cocoon-AI/architecture-diagram-generator/tree/main/architecture-diagram into .agents/skills/architecture-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "architecture-diagram", 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 Cocoon-AI/architecture-diagram-generator --skill architecture-diagram -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Cocoon-AI/architecture-diagram-generator architecture-diagram --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Cocoon-AI/architecture-diagram-generator.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/architecture-diagram .cursor/skills/architecture-diagram && 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 "architecture-diagram" agent skill from https://github.com/Cocoon-AI/architecture-diagram-generator/tree/main/architecture-diagram into .cursor/skills/architecture-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "architecture-diagram", 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/Cocoon-AI/architecture-diagram-generator.git --path architecture-diagram--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 Cocoon-AI/architecture-diagram-generator --skill architecture-diagram -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Cocoon-AI/architecture-diagram-generator architecture-diagram --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Cocoon-AI/architecture-diagram-generator.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/architecture-diagram .gemini/skills/architecture-diagram && 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 "architecture-diagram" agent skill from https://github.com/Cocoon-AI/architecture-diagram-generator/tree/main/architecture-diagram into .gemini/skills/architecture-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "architecture-diagram", 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 Cocoon-AI/architecture-diagram-generator architecture-diagramInstalls 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 Cocoon-AI/architecture-diagram-generator --skill architecture-diagram -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Cocoon-AI/architecture-diagram-generator.git skills-src && mkdir -p .github/skills && cp -r skills-src/architecture-diagram .github/skills/architecture-diagram && 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 "architecture-diagram" agent skill from https://github.com/Cocoon-AI/architecture-diagram-generator/tree/main/architecture-diagram into .github/skills/architecture-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "architecture-diagram", 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 Cocoon-AI/architecture-diagram-generator --skill architecture-diagram -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Cocoon-AI/architecture-diagram-generator architecture-diagram --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Cocoon-AI/architecture-diagram-generator.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/architecture-diagram .opencode/skills/architecture-diagram && 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 "architecture-diagram" agent skill from https://github.com/Cocoon-AI/architecture-diagram-generator/tree/main/architecture-diagram into .opencode/skills/architecture-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "architecture-diagram", 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
architecture-diagram- GitHub stars
- 7.4k
- Used in
- 1 other repo
- Token cost
- ~2.1k tokens
- SKILL.md length
- 787 words
- Files
- 2
- Skills in repo
- 1
- Repo updated
- First seen
- Licence
- MIT
At a glance
Creates dark-themed system, cloud, security and network architecture diagrams as self-contained HTML files with inline SVG and CSS.
- Works in 4 steps: Header - Title with pulsing dot… → Main SVG diagram - Contained in rounded… → Summary cards - Grid of 3 cards below… → …
- Drawing a system or infrastructure architecture diagram
- SKILL.md covers Design System, Template and Output
- Reaches cdn.jsdelivr.net and fonts.googleapis.com
What it does
The skill produces architecture diagrams as single HTML files with inline SVG and CSS, following a defined design system. Components are color-coded by type: frontend in cyan, backend in emerald, database in violet, cloud in amber, security in rose, message bus in orange and external or generic items in slate, on a near-black background with a subtle grid. All text uses JetBrains Mono, loaded from Google Fonts, in small fixed sizes.
Drawing rules cover rounded component boxes with semi-transparent fills, dashed rose strokes for security groups, larger dashed amber boundaries for regions and SVG markers for arrowheads. Arrows are drawn early in the SVG so they sit behind the boxes, and an opaque background rectangle goes under a transparent box when arrows should not show through. A template.html file in the resources folder gives the starting structure.
When your agent uses it
- Drawing a system or infrastructure architecture diagram
- Documenting cloud, security or network topology
- Producing a diagram as a standalone HTML file that opens in any browser
Example prompts
- “Draw an architecture diagram of our web app: React frontend, API server, Postgres and a message queue.”
- “Create a security-focused network topology diagram with the DMZ and the internal subnets.”
- “Make a diagram of our AWS setup with the regions and security groups shown as boundaries.”
Workflow steps
4 steps, taken from the first numbered list in SKILL.md.
- Header - Title with pulsing dot indicator, subtitle, and export toolbar
- Main SVG diagram - Contained in rounded border card
- Summary cards - Grid of 3 cards below diagram with key details
- Footer - Minimal metadata line
What it can do on your machine
Read from SKILL.md and the folder at commit 4b9087d. 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 (its code samples are svg and html).
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
cdn.jsdelivr.netfonts.googleapis.com
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
Dark Architecture Diagram Builder loads about 2.1k tokens when it runs. Until then it costs about 51 tokens; SKILL.md has 787 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 Cocoon-AI/architecture-diagram-generator at commit 4b9087d, republished under its MIT licence (© Cocoon-AI). 787 words, ~2,087 tokens.
Download SKILL.mdSave it as
.claude/skills/architecture-diagram/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.- name
- architecture-diagram
- description
- Create polished dark-themed architecture diagrams as self-contained HTML+SVG files. Use when the user asks for system, infrastructure, cloud, security, or network topology diagrams.
Architecture Diagram Skill
Create professional technical architecture diagrams as self-contained HTML files with inline SVG graphics and CSS styling.
Version 1.1 · MIT License · Authored by Cocoon AI
Design System
Color Palette
Use these semantic colors for component types:
| Component Type | Fill (rgba) | Stroke |
|---|---|---|
| Frontend | rgba(8, 51, 68, 0.4) | #22d3ee (cyan-400) |
| Backend | rgba(6, 78, 59, 0.4) | #34d399 (emerald-400) |
| Database | rgba(76, 29, 149, 0.4) | #a78bfa (violet-400) |
| AWS/Cloud | rgba(120, 53, 15, 0.3) | #fbbf24 (amber-400) |
| Security | rgba(136, 19, 55, 0.4) | #fb7185 (rose-400) |
| Message Bus | rgba(251, 146, 60, 0.3) | #fb923c (orange-400) |
| External/Generic | rgba(30, 41, 59, 0.5) | #94a3b8 (slate-400) |
Typography
Use JetBrains Mono for all text (monospace, technical aesthetic):
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">Font sizes: 12px for component names, 9px for sublabels, 8px for annotations, 7px for tiny labels.
Visual Elements
Background: #020617 (slate-950) with subtle grid pattern:
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
</pattern>Component boxes: Rounded rectangles (rx="6") with 1.5px stroke, semi-transparent fills.
Security groups: Dashed stroke (stroke-dasharray="4,4"), transparent fill, rose color.
Region boundaries: Larger dashed stroke (stroke-dasharray="8,4"), amber color, rx="12".
Arrows: Use SVG marker for arrowheads:
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#64748b" />
</marker>Arrow z-order: Draw connection arrows early in the SVG (after the background grid) so they render behind component boxes. SVG elements are painted in document order, so arrows drawn first will appear behind shapes drawn later.
Masking arrows behind transparent fills: Since component boxes use semi-transparent fills (rgba(..., 0.4)), arrows behind them will show through. To fully mask arrows, draw an opaque background rect (e.g., fill="#0f172a") at the same position before drawing the semi-transparent styled rect on top:
<!-- Opaque background to mask arrows -->
<rect x="X" y="Y" width="W" height="H" rx="6" fill="#0f172a"/>
<!-- Styled component on top -->
<rect x="X" y="Y" width="W" height="H" rx="6" fill="rgba(76, 29, 149, 0.4)" stroke="#a78bfa" stroke-width="1.5"/>Auth/security flows: Dashed lines in rose color (#fb7185).
Message buses / Event buses: Small connector elements between services. Use orange color (#fb923c stroke, rgba(251, 146, 60, 0.3) fill):
<rect x="X" y="Y" width="120" height="20" rx="4" fill="rgba(251, 146, 60, 0.3)" stroke="#fb923c" stroke-width="1"/>
<text x="CENTER_X" y="Y+14" fill="#fb923c" font-size="7" text-anchor="middle">Kafka / RabbitMQ</text>Spacing Rules
CRITICAL: When stacking components vertically, ensure proper spacing to avoid overlaps:
- Standard component height: 60px for services, 80-120px for larger components
- Minimum vertical gap between components: 40px
- Inline connectors (message buses): Place IN the gap between components, not overlapping
Example vertical layout:
Component A: y=70, height=60 → ends at y=130
Gap: y=130 to y=170 → 40px gap, place bus at y=140 (20px tall)
Component B: y=170, height=60 → ends at y=230Wrong: Placing a message bus at y=160 when Component B starts at y=170 (causes overlap) Right: Placing a message bus at y=140, centered in the 40px gap (y=130 to y=170)
Legend Placement
CRITICAL: Place legends OUTSIDE all boundary boxes (region boundaries, cluster boundaries, security groups).
- Calculate where all boundaries end (y position + height)
- Place legend at least 20px below the lowest boundary
- Expand SVG viewBox height if needed to accommodate
Example:
Kubernetes Cluster: y=30, height=460 → ends at y=490
Legend should start at: y=510 or below
SVG viewBox height: at least 560 to fit legendWrong: Legend at y=470 inside a cluster boundary that ends at y=490 Right: Legend at y=510, below the cluster boundary, with viewBox height extended
Layout Structure
- Header - Title with pulsing dot indicator, subtitle, and export toolbar
- Main SVG diagram - Contained in rounded border card
- Summary cards - Grid of 3 cards below diagram with key details
- Footer - Minimal metadata line
Show full SKILL.md (342 more words)Show less
Export Toolbar (built-in)
Every diagram ships with a single unobtrusive ⋯ toggle in the header. Click it to reveal three buttons — 📋 Copy (high-DPI PNG to clipboard, scale: 2), 🖼️ PNG (high-DPI PNG download), 📄 PDF (PNG embedded in a one-page PDF via jsPDF). The toolbar collapses back to the icon by default so it doesn't clutter the diagram. All three formats use the same html2canvas capture (with the toolbar excluded and 32px padding around the content), so PDF preserves the dark theme without going through the browser's print dialog.
When generating a new diagram, keep these intact in the template:
- The two CDN scripts in
<head>(pinned versions, with Subresource Integrity hashes andcrossorigin="anonymous"):https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js—integrity="sha384-ZZ1pncU3bQe8y31yfZdMFdSpttDoPmOZg2wguVK9almUodir1PghgT0eY7Mrty8H"https://cdn.jsdelivr.net/npm/jspdf@2.5.2/dist/jspdf.umd.min.js—integrity="sha384-en/ztfPSRkGfME4KIm05joYXynqzUgbsG5nMrj/xEFAHXkeZfO3yMK8QQ+mP7p1/"- SRI ensures generated diagrams are tamper-resistant against CDN compromise. Do not modify the hashes; if the version is bumped, the new hash must be computed fresh.
id="report-container"on the outermost.containerdiv (this is what gets captured).toolbarmarkup with.toolbar-actions(collapsed by default) and.toolbar-toggle(the⋯button).toolbarCSS +@media print { .toolbar { display: none !important; } }copyAsImage(),downloadPNG(), anddownloadPDF()script before</body>, all usinggetBoundingClientRect()+html2canvas(document.body, { x, y, width, height, ignoreElements })to capture a precise rect with breathing room and no toolbar
Caveats: clipboard API needs a user gesture and a secure context (https/file/localhost). SVG <foreignObject> renders inconsistently in html2canvas — stick to plain <svg> shapes and <text>. Bump scale: 2 to 3 or 4 for higher-res output.
Component Box Pattern
<rect x="X" y="Y" width="W" height="H" rx="6" fill="FILL_COLOR" stroke="STROKE_COLOR" stroke-width="1.5"/>
<text x="CENTER_X" y="Y+20" fill="white" font-size="11" font-weight="600" text-anchor="middle">LABEL</text>
<text x="CENTER_X" y="Y+36" fill="#94a3b8" font-size="9" text-anchor="middle">sublabel</text>Info Card Pattern
<div class="card">
<div class="card-header">
<div class="card-dot COLOR"></div>
<h3>Title</h3>
</div>
<ul>
<li>• Item one</li>
<li>• Item two</li>
</ul>
</div>Template
Copy and customize the template at resources/template.html. Key customization points:
- Update the
<title>and header text - Modify SVG viewBox dimensions if needed (default:
1000 x 680) - Add/remove/reposition component boxes
- Draw connection arrows between components
- Update the three summary cards
- Update footer metadata
Output
Always produce a single self-contained .html file with:
- Embedded CSS (no external stylesheets except Google Fonts)
- Inline SVG (no external images)
- No JavaScript required (pure CSS animations)
The file should render correctly when opened directly in any modern browser. The export toolbar uses two CDN scripts (html2canvas and jsPDF) — no other JavaScript dependencies.
© Cocoon-AI, 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 architecture-diagram of Cocoon-AI/architecture-diagram-generator.
- SKILL.md
- resources/template.html
Open the folder on GitHubat commit 4b9087d
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 Cocoon-AI/architecture-diagram-generator, which our catalogue first saw on October 7, 2026.
Compare with similar skills
Dark Architecture Diagram Builder 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 |
|---|---|---|---|---|---|---|
| Dark Architecture Diagram Builder this skillCocoon-AI/architecture-diagram-generator | 7.4k | 1 repos | ~2.1k | Automated safety check: Pass | MIT | |
| Deepwiki Rssopaco/deepwiki-rs | 3.1k | — | ~748 | Automated safety check: Pass | MIT | |
| Mermaid Diagramsjjmartres/opencode | 133 | 6 repos | ~1.9k | Automated safety check: Pass | MIT | |
| C4 Architecture Diagramslexler/skill-factory | 239 | — | ~2.3k | Automated safety check: Pass | Apache-2.0 | |
| Architecture Document Writerimbue-ai/bouncer | 399 | — | ~335 | Automated safety check: Pass | AGPL-3.0 | |
| Archify Diagram BuilderUnclecheng-li/AI_Animation | 1.5k | 2 repos | ~4.1k | Automated safety check: Pass | MIT |
Similar skills
Mermaid Diagrams
jjmartres/opencode
Helps an agent pick the right Mermaid diagram type and write the syntax for class, sequence, flow, ER, C4, state and other software diagrams.
C4 Architecture Diagrams
lexler/skill-factory
Creates C4 model diagrams at every zoom level, from system landscape to code, in ASCII, Mermaid or Structurizr, for designing or documenting software architecture.
Architecture Document Writer
imbue-ai/bouncer
Writes an architecture document for a feature from its goals and requirements, after asking questions and studying the existing codebase.
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.
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.
Related
Categories
Questions about Dark Architecture Diagram Builder
What does Dark Architecture Diagram Builder do?
Creates dark-themed system, cloud, security and network architecture diagrams as self-contained HTML files with inline SVG and CSS. The skill produces architecture diagrams as single HTML files with inline SVG and CSS, following a defined design system. Components are color-coded by type: frontend in cyan, backend in emerald, database in violet, cloud in amber, security in rose, message bus in orange and external or generic items in slate, on a near-black background with a subtle grid.
When should I use Dark Architecture Diagram Builder?
Dark Architecture Diagram Builder fits situations like: drawing a system or infrastructure architecture diagram; documenting cloud, security or network topology; producing a diagram as a standalone HTML file that opens in any browser.
How do I install Dark Architecture Diagram Builder in Claude Code?
Run `npx skills add Cocoon-AI/architecture-diagram-generator --skill architecture-diagram -a claude-code`. Or copy the skill folder (architecture-diagram in Cocoon-AI/architecture-diagram-generator) into .claude/skills/architecture-diagram in your project. Claude Code loads it when a task matches its description.
How do I install Dark Architecture Diagram Builder in Codex?
Run `npx skills add Cocoon-AI/architecture-diagram-generator --skill architecture-diagram -a codex`. Or copy the skill folder (architecture-diagram in Cocoon-AI/architecture-diagram-generator) into .agents/skills/architecture-diagram in your project. Codex loads it when a task matches its description.
Can I use Dark Architecture Diagram Builder 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 Cocoon-AI/architecture-diagram-generator --skill architecture-diagram -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/architecture-diagram, .gemini/skills/architecture-diagram, .github/skills/architecture-diagram and .opencode/skills/architecture-diagram in your project.
What does Dark Architecture Diagram Builder need to run?
SKILL.md names no scripts, command-line tools or credentials: Dark Architecture Diagram Builder is instructions for the agent only.
Does Dark Architecture Diagram Builder access the network?
SKILL.md names 2 domains. In commands or code: cdn.jsdelivr.net and fonts.googleapis.com; the agent is likely to contact these when it follows the instructions. This is read from the text; nothing was executed.
Is Dark Architecture Diagram Builder 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 Dark Architecture Diagram Builder use?
Dark Architecture Diagram Builder 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 Dark Architecture Diagram Builder use?
About 2.1k tokens (SKILL.md is roughly 8.3k 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 Dark Architecture Diagram Builder?
Skills that share tags, products or a category with Dark Architecture Diagram Builder: Deepwiki Rs (sopaco/deepwiki-rs, 3.1k stars), Mermaid Diagrams (jjmartres/opencode, 133 stars), C4 Architecture Diagrams (lexler/skill-factory, 239 stars) and Architecture Document Writer (imbue-ai/bouncer, 399 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Dark Architecture Diagram Builder?
Cocoon-AI (a GitHub organization) maintains it in Cocoon-AI/architecture-diagram-generator, which has 7,414 GitHub stars. The repository was last updated on May 13, 2026.
Source: Cocoon-AI/architecture-diagram-generator on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.