architecture-diagrams

architecture-diagrams is a skill for Claude Code, Codex from juspay/xyne-spaces. It costs 34 tokens per session (514 once invoked), scanned A, original, Apache-2.0.

A method for creating architecture, database-relationship, and process-flow diagrams as self-contained HTML pages with inline SVG drawings.

In plain words
What is it for?
Use it to document system components, database tables and links, and separate end-to-end flows in a visual format.
Why use it?
It produces diagrams that work without internet access, external libraries, or JavaScript-based rendering.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one.

Good fit Use it to document system components, database tables and links, and separate end-to-end flows in a visual format.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/juspay/xyne-spaces/architecture-diagrams
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add juspay/xyne-spaces --skill architecture-diagrams
Clone the repo
git clone --depth 1 https://github.com/juspay/xyne-spaces

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for architecture-diagrams

README.md
[![agentmods](https://agentmods.dev/badge/skills/juspay/xyne-spaces/architecture-diagrams/github.svg)](https://agentmods.dev/skills/juspay/xyne-spaces/architecture-diagrams)
Your own site
<a href="https://agentmods.dev/skills/juspay/xyne-spaces/architecture-diagrams"><img src="https://agentmods.dev/badge/skills/juspay/xyne-spaces/architecture-diagrams/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for architecture-diagrams

Your own site · 80×15
<a href="https://agentmods.dev/skills/juspay/xyne-spaces/architecture-diagrams"><img src="https://agentmods.dev/badge/skills/juspay/xyne-spaces/architecture-diagrams.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 34 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 514 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector pass 7 Sept 2026
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00034 $0.00514
Opus 5 $0.00017 $0.00257
Sonnet 5 $0.00007 $0.00103
Haiku 4.5 $0.00003 $0.00051

Measured 11d ago against content hash caf07084cef9, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-11, from the pricing page.

Security

Grade A, and why

architecture-diagrams scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 11d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

apps/xyne-claw/understanding-skills/architecture-diagrams/SKILL.md · 43 lines

What it actually says

Architecture diagrams

Diagrams are hand-authored inline SVG in the page itself. Do not reach for mermaid or any diagram library: the artifact is a single file that must render with no network and no JavaScript, and script-based renderers are stripped or silently blank.

Diagram the FLOWS, not just the system. One overview diagram is not enough for anything real: each end-to-end path in the document's flows section earns its own figure — "a message becomes a desktop notification", "…a mobile push", "…a Slack fallback" are three flows and three diagrams, not one box-and-line sketch that tries to hold all of them. A document explaining a multi-path system with a single diagram under-drew it. Put each flow's diagram immediately beside the numbered walk it illustrates, so a reader sees the path and its picture together.

Pick the diagram by the relationship, and draw at most one idea per figure:

  • Components and who talks to whom: boxes + arrows, direction shown by an arrowhead <marker> in <defs>, reused by every path.
  • Tables and keys: ER style — a <rect> per table with its key columns as <text> lines, edges labelled with the FK column.
  • A request or lifecycle: left-to-right stages with the actor above the line and the artifact it produces below.
  • Anything with more than ~12 nodes: split it, or drop to a table. A diagram nobody can follow is worse than the paragraph it replaced.

Build every figure as <figure> + <figcaption> stating the takeaway, and give the <svg> a viewBox with width="100%" and height="auto" so it scales. Set role="img" and a <title> so it is not invisible to a screen reader. Colour encodes system or ownership, never severity alone; put the mapping in a small key beside the figure, and keep labels in a monospace stack so identifiers read as identifiers.

Style with a <style> block and CSS custom properties in <head>. Use a system font stack — a CDN font link makes the file dependent on the network it was supposed to survive without.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 11d ago First seen · 43 lines · 34 tokens per session scan A caf07084cef9

Subscribe to this mod's changes

architecture-diagrams is a skill published in the GitHub repository juspay/xyne-spaces (143 stars, last pushed today), licensed Apache-2.0. It adds 34 tokens to every session and 514 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

clone-website

Reverse-engineer and clone one or more websites in one shot — extracts assets, CSS, and content section-by-section and proactively dispatches parallel builder agents in worktrees as it goes. Use this whenever the user wants to clone, replicate, rebuild, reverse-engineer, or copy any website. Also triggers on phrases…

JCodesMore/ai-website-cloner-template · 96 tokens

brand-identity

Brand strategy and identity design for businesses and products. Use when creating brand guidelines, developing visual identity systems, or defining brand positioning.

travisjneuman/.claude · 30 tokens

graphic-design

Professional graphic design principles for digital and print media. Use when creating visual designs, choosing color palettes, typography, layouts, or providing design feedback.

travisjneuman/.claude · 32 tokens

generic-react-ux-designer

Professional UI/UX design expertise for React applications. Covers design thinking, user psychology (Hick's/Fitts's/Jakob's Law), visual hierarchy, interaction patterns, accessibility, performance-driven design, and design critique. Use when designing features, improving UX, solving user problems, or conducting design…

travisjneuman/.claude · 69 tokens

guizang-ppt-skill

A generator for presentation decks delivered as a single HTML file that runs in a web browser. It provides magazine-style and Swiss-style visual templates for swipeable presentations.

seaworld008/Commonly-used-high-value-skills · 56 tokens

frontend-enhancer

This skill should be used when enhancing the visual design and aesthetics of web applications. It provides modern UI components, design patterns, color palettes, animations, and layout templates. REQUIRES ui-research skill first. Use this skill for tasks like improving styling, creating responsive designs…

travisjneuman/.claude · 79 tokens