Ready to supercharge your AI agents?

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

Architecture Diagram Creator — measured AI agent skill | DecimalAI

mhattingpete/architecture-diagram-creator

NewSkillScoreMaintained

Create comprehensive HTML architecture diagrams showing data flows, business objectives, features, technical architecture, and deployment. Use when users request system architecture, project documentation, high-level overviews, or technical specifications.

Documentationby mhattingpete

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

Automatic

Doc Ops pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/mhattingpete-architecture-diagram-creator/SKILL.md

decimalai skills pull mhattingpete-architecture-diagram-creator --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/mhattingpete-architecture-diagram-creator/SKILL.md https://app.decimal.ai/s/mhattingpete-architecture-diagram-creator/SKILL.md

Raw file: /s/mhattingpete-architecture-diagram-creator/SKILL.md ↗ · machine-readable summary at /s/mhattingpete-architecture-diagram-creator.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

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

Yes — +9% lift+17% tokens0% turns22% of whole cases pass with skill (5/23)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-07	✗→✓	▲ Improved	27%	0%
case-16	✗→✓	▲ Improved	12%	0%
case-18	✗→✓	▲ Improved	12%	0%
case-21	✓→✗	▼ Worse	112%	0%
case-20	✓→✓	＝ Same ✓	55%	0%

Showing 5 of 23 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

mhattingpete / claude-skills-marketplace

visual-documentation-plugin/skills/architecture-diagram-creator/SKILL.md

View on GitHub ↗

License Apache-2.0Imported 8/3/2026Version v1Bundled 1 file

Skill contents

references/

SKILL.md

Architecture Diagram Creator

Create comprehensive HTML architecture diagrams with data flows, business context, and system architecture.

When to Use

"Create architecture diagram for project]"
"Generate high-level overview"
"Document system architecture"
"Show data flow and processing pipeline"

Components to Include

Business Context: objectives, users, value, metrics
Data Flow: sources → processing → outputs with SVG diagram
Processing Pipeline: multi-stage visualization
System Architecture: layered components (data/processing/services/output)
Features: functional and non-functional requirements
Deployment: model, prerequisites, workflows

HTML Structure

html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[Project] Architecture</title>
  <style>
    body { font-family: system-ui; max-width: 1200px; margin: 0 auto; padding: 20px; }
    h1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; }
    .section { margin: 30px 0; }
    svg { max-width: 100%; }
    /* Use semantic colors: #4299e1 (data), #ed8936 (processing), #9f7aea (AI), #48bb78 (success) */
  </style>
</head>
<body>
  <h1>[Project Name] - Architecture Overview</h1>

  <!-- Business Context Section -->
  <!-- Data Flow Diagram (SVG) -->
  <!-- Processing Pipeline (SVG) -->
  <!-- System Architecture Layers -->
  <!-- Features Grid -->
  <!-- Deployment Info -->
</body>
</html>

SVG Pattern for Data Flow

html
<svg viewBox="0 0 800 400">
  <!-- Data sources (left, blue) -->
  <rect x="50" y="150" width="120" height="80" fill="#4299e1"/>

  <!-- Processing (center, orange) -->
  <rect x="340" y="150" width="120" height="80" fill="#ed8936"/>

  <!-- Outputs (right, green) -->
  <rect x="630" y="150" width="120" height="80" fill="#48bb78"/>

  <!-- Arrows connecting -->
  <path d="M170,190 L340,190" stroke="#666" stroke-width="2" marker-end="url(#arrow)"/>
</svg>

Workflow

Analyze project (README, code structure)
Extract: purpose, data sources, processing, tech stack, outputs
Create HTML with all 6 sections
Use semantic colors for visual hierarchy
Write to [project]-architecture.html

Keep diagrams clear, use consistent styling, include real project details.

Want to see if mhattingpete/architecture-diagram-creator 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.