Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Architecture Diagram — measured AI agent skill | DecimalAI

agentera/architecture-diagram

NewSkillScoreMaintained

Create a professional, dark-themed software/system architecture diagram as a single self-contained HTML file with inline SVG. Use when asked to visualize system components, layers, services, or how parts of a codebase fit together.

design-mediaby agentera

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Design & UX Review pack

decimalai skills pull agentera-architecture-diagram

Get this skill — curl · raw file

curl -fsSL https://app.decimal.ai/s/agentera-architecture-diagram/SKILL.md

Raw file: /s/agentera-architecture-diagram/SKILL.md ↗ · machine-readable summary at /s/agentera-architecture-diagram.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 4h ago

No — -9% lift+16% tokens0% turns14% of whole cases pass with skill (3/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-03	✗→✓	▲ Improved	8%	0%
case-15	✗→✓	▲ Improved	8%	0%
case-10	✓→✗	▼ Worse	13%	0%
case-22	✓→✗	▼ Worse	191%	0%
case-20	✓→✗	▼ Worse	8%	0%

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

agentera / agently

examples/skills_executor/skills/architecture-diagram/SKILL.md

View on GitHub ↗

License Apache-2.0Imported 8/3/2026Version v1

Skill contents

SKILL.md

Architecture Diagram

Produce ONE self-contained HTML document (embedded CSS + inline SVG, no JavaScript, no external images; Google Fonts link is allowed). It must render correctly when opened directly in a browser.

Visual design system

Background #020617 with a subtle 40px grid pattern.
Font: JetBrains Mono (monospace) via Google Fonts.
Component boxes: rounded rects (rx="6"), 1.5px stroke, semi-transparent

fills. Colour components by role:

facade / developer surface: fill rgba(8,51,68,0.4), stroke #22d3ee
core contracts: fill rgba(6,78,59,0.4), stroke #34d399
plugins / providers: fill rgba(120,53,15,0.3), stroke #fbbf24
execution environment / capabilities: fill rgba(76,29,149,0.4), stroke #a78bfa
observation / event bus: fill rgba(251,146,60,0.3), stroke #fb923c
external / generic: fill rgba(30,41,59,0.5), stroke #94a3b8
Component name at 11px white bold; sublabel at 8-9px #94a3b8.
Arrows via an SVG marker arrowhead; draw connecting arrows before boxes so

they sit behind them.

Layout rules

Lay the system out as labelled horizontal bands stacked top-to-bottom, one band

per architectural layer, with each layer's components inside its band.

Keep ≥40px vertical gaps between stacked rows; never overlap boxes.
Add a short header (title + subtitle) and a small legend mapping each colour to

a layer. Place the legend outside every band.

Output

Return the complete HTML document as a single string. Do not include commentary outside the HTML.

Want to see if agentera/architecture-diagram would activate on your phrasing? Try it before you install — no LLM call, no signup.

Other measured skills in the registry, with their headline benchmark lift.