architecture-diagram is agent-read markdown (skill) from ulises-jeremias/agent-toolkit: WHAT — Create polished dark-themed architecture diagrams as self-contained HTML+SVG files (inline SVG, CSS styling, PNG/PDF export toolbar). Use when the user asks for system, infrastructure, cloud, security, or network topology diagrams rendered as a shareable visual artifact rather than code..
Indexed from public GitHub and served as immutable, content-addressed versions. Install it pinned to an exact SHA-256 with the mdr CLI, and every file is verified against the hash recorded here before it reaches your agent. The deterministic audit below grades the latest version, and the same file always earns the same grade.
What the file says
# Architecture Diagram — Self-Contained HTML+SVG Diagrams
Create professional technical architecture diagrams as **single self-contained
HTML files** with inline SVG graphics and CSS styling. The output renders
correctly when opened directly in any modern browser — no build step, no
JavaScript framework, no external images.
## When to use
- System, infrastructure, cloud, security, or network-topology diagrams.
- A shareable, presentation-ready visual artifact is the deliverable.
- Dark-theme technical aesthetic is desired.
For methodology (what to draw at each level), pair with `architecture/c4-model`;
for lightweight in-repo text diagrams, use `tooling/mermaid`. This skill covers
the **rendered artifact** case.
## Workflow
1. Copy `resources/template.html` as the starting point.
2. Customize the `<title>`, header text, and footer metadata.
3. Adjust the SVG `viewBox` if needed (default `1000 x 680`).
4. Add/reposition component boxes using the component pattern below.
5. Draw connection arrows early in the SVG (after the background grid) so they
render behind boxes.
6. Update the three summary cards and legend.
7. Deliver one `.html` file.
## Design system
…
Pin to a label to follow the author's releases, or to a sha256 to freeze the exact bytes forever. Either way the resolved hash is written to mdr.lock, and mdr install reproduces it on any machine.
GET https://markdownregistry.com/api/v1/artifacts/art_p2t4l5p7nbjuttd2
GET https://markdownregistry.com/api/v1/resolve?ref=ulises-jeremias/agent-toolkit/architecture-diagram
GET https://markdownregistry.com/api/v1/blob/bc2c8135543edcf44c69524ea8d4a5494fccb8713831602df28d8aba6a45d2c2
Your agent does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
ulises-jeremias/agent-toolkit · plugins/agent-toolkit-complete/.github/skills/adr/SKILL.md · WHAT — Create and maintain Architecture Decision Records (ADRs) per the process. Covers when
ulises-jeremias/agent-toolkit · plugins/agent-toolkit-complete/.github/skills/blast-radius/SKILL.md · Find what a change could break somewhere else before it ships, beyond the diff, and prove the one fact it's safe…
ulises-jeremias/agent-toolkit · plugins/agent-toolkit-complete/.github/skills/bug/SKILL.md · WHAT - Draft and review bugs using the Bug Template; classifies whether an issue should be
ulises-jeremias/agent-toolkit · plugins/agent-toolkit-complete/.github/skills/c4-model/SKILL.md · WHAT — C4 model methodology (Context, Container, Component, Code) guidance — what to draw at each level, when, and how…
ulises-jeremias/agent-toolkit · plugins/agent-toolkit-complete/.github/skills/chrome-devtools/SKILL.md · Use Chrome DevTools MCP to control and inspect a live Chrome instance for network, console, performance, rendering, and…
mohitagw15856/pm-claude-skills · exports/openclaw/architecture-diagram/SKILL.md · Diagram a system or technical architecture — services, data stores, and how they connect. Use when asked to draw an…
taracodlabs/aiden · workspace-templates/skills/architecture-diagram/SKILL.md · Generate dark-themed system architecture and component diagrams as HTML/SVG for rendering in the browser
cowork-os/cowork-os · resources/skills/architecture-diagram/SKILL.md · Generate polished dark-themed architecture diagrams as standalone HTML files with inline SVG, semantic system grouping…
athola/claude-night-market · plugins/cartograph/skills/architecture-diagram/SKILL.md · Generates a Mermaid architecture diagram showing high-level component relationships. Use when visualizing how plugins…
outlinedriven/outline-driven-development · .devin/skills/architecture-diagram/SKILL.md · Use when the user asks to visualize an architecture as a self-contained HTML artifact, or compare two architecture…
