Ready to supercharge your AI agents?

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

Get Started Free →

Architecture Diagram · hezaohezao | DecimalAI

hezaohezao/architecture-diagram

NewSkillScoreMaintained

Dark-themed SVG architecture/cloud/infra diagrams as HTML.

design-mediaby hezaohezao

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

Automatic

DevOps & SRE pack

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

pip install decimalai

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

decimalai skills pull hezaohezao-architecture-diagram --out .claude/skills/

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

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

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

No — -42% lift+16% tokens0% turns23% of whole cases pass with skill (5/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-13	✗→✓	▲ Improved	17%	0%
case-17	✗→✓	▲ Improved	-20%	0%
case-06	✓→✗	▼ Worse	61%	0%
case-12	✓→✓	＝ Same ✓	36%	0%
case-21	✓→✓	＝ Same ✓	10%	0%

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v5 — 8/27/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

hezaohezao / poirot

poirot/backend/agents/skill/builtin_skills/creative/architecture-diagram/SKILL.md

View on GitHub ↗

License MITImported 8/27/2026Version v1

Skill contents

SKILL.md

Architecture Diagram

Overview

Generate professional, dark-themed technical architecture diagrams as standalone HTML files with inline SVG graphics. No external tools, no API keys, no rendering libraries — just write the HTML file and open it in a browser.

Scope

Best suited for:

Software system architecture (frontend / backend / database layers)
Cloud infrastructure (VPC, regions, subnets, managed services)
Microservice / service-mesh topology
Database + API map, deployment diagrams
Anything with a tech-infra subject that fits a dark, grid-backed aesthetic

Look elsewhere first for:

Physics, chemistry, math, biology → use concept-diagrams
Floor plans, educational visuals → use concept-diagrams
Hand-drawn sketches → use excalidraw

Workflow

User describes their system architecture (components, connections,

technologies)

Generate the HTML file following the design system below
Save with write_file to a .html file
User opens in any browser — works offline, no dependencies

write_file("architecture.html", "<full HTML with inline SVG + CSS>")

Output Location

bash
# Default to current working directory
./[project-name]-architecture.html

Design System

Aesthetic

Dark background: deep navy or black (#0a0a1a, #111)
Grid pattern: subtle dot or line grid in background
Neon accents: luminous colors for different component types
Monospace labels: for technical authenticity
Rounded corners: on boxes (rx=6)
Glow effects: subtle box-shadow on key components

Color Palette

css
:root {
  --bg: #0a0a1a;
  --grid: #1a1a2e;

  /* Component types */
  --c-frontend: #00D9FF;    /* cyan */
  --c-backend: #50C878;     /* green */
  --c-database: #F5A623;    /* orange */
  --c-external: #C4A7E7;    /* purple */
  --c-queue: #FF6B6B;       /* red */
  --c-cache: #FFD700;       /* gold */

  --text: #E0E0E0;
  --text-dim: #888;
  --border: #333;
}

SVG Template

html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Architecture Diagram</title>
<style>
  body {
    margin: 0; padding: 40px;
    background: var(--bg);
    background-image: radial-gradient(circle, var(--grid) 1px, transparent 1px);
    background-size: 30px 30px;
  }
  svg { display: block; margin: 0 auto; }
  .component {
    stroke-width: 2; rx: 6; ry: 6;
    fill-opacity: 0.1;
  }
  .label {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 13px; fill: var(--text);
  }
  .label-type {
    font-size: 10px; fill: var(--text-dim);
    text-transform: uppercase; letter-spacing: 1px;
  }
  .connection {
    stroke: var(--text-dim); stroke-width: 1.5;
    fill: none; stroke-dasharray: 4 2;
    marker-end: url(#arrow);
  }
</style>
</head>
<body>
<svg width="1000" height="700" viewBox="0 0 1000 700">
  <defs>
    <marker id="arrow" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
      <path d="M0,0 L8,3 L0,6 Z" fill="var(--text-dim)"/>
    </marker>
  </defs>

  <!-- Frontend Layer -->
  <rect class="component" x="50" y="50" width="200" height="80"
        stroke="var(--c-frontend)" fill="var(--c-frontend)"/>
  <text class="label" x="150" y="85" text-anchor="middle">Web App</text>
  <text class="label-type" x="150" y="105" text-anchor="middle">Frontend</text>

  <!-- Backend Layer -->
  <rect class="component" x="400" y="50" width="200" height="80"
        stroke="var(--c-backend)" fill="var(--c-backend)"/>
  <text class="label" x="500" y="85" text-anchor="middle">API Server</text>
  <text class="label-type" x="500" y="105" text-anchor="middle">Backend</text>

  <!-- Database Layer -->
  <rect class="component" x="750" y="50" width="200" height="80"
        stroke="var(--c-database)" fill="var(--c-database)"/>
  <text class="label" x="850" y="85" text-anchor="middle">PostgreSQL</text>
  <text class="label-type" x="850" y="105" text-anchor="middle">Database</text>

  <!-- Connections -->
  <path class="connection" d="M 250 90 L 400 90"/>
  <path class="connection" d="M 600 90 L 750 90"/>
</svg>
</body>
</html>

Diagram Patterns

Layered Architecture

Frontend (top) → Backend (middle) → Database (bottom)
Horizontal layers with vertical connections

Microservice Topology

Central API gateway + surrounding services
Bidirectional connections for sync, one-way for async

Cloud Infrastructure

VPC as a large container box
Subnets as inner boxes
Managed services as icons (S3, Lambda, RDS)

Data Flow

Left-to-right flow
Different line styles for sync (solid) vs async (dashed)

Pitfalls

Too many components: keep to 5-10 boxes max. More = unreadable.

Split into multiple diagrams if needed.

Crossing lines: route connections to minimize crossings. Use right-angle

paths.

No legend: if using color-coded component types, include a legend.
Font sizing: labels must be readable. 13px minimum for component names.

Illustrative Want to see what hezaohezao/architecture-diagram would put in front of your model? Preview the rendered body and check its trigger phrases — no LLM call, no signup.

Latest benchmark · publisher runVerified

9/26/2026, 20:47 UTC · 22 cases

Lift

-42%

25% vs 67%

Agent turns

0%

1.0 vs 1.0

Tokens

+16%

8,445.86 vs 7,298.91

fail → pass · 2pass → pass · 3fail → fail · 16pass → fail · 1

Per-case results (22)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-01 Can you generate a standalone HTML visual diagram for our new SaaS platform's system architecture? We have a React single-page application talking to a Node.js API Gateway, which delegates traffic to an Auth microservice, a Billing service, and a MongoDB cluster, with Redis handling session caching. Save it to an HTML file so I can view it directly in my browser.	fail→fail	46,231	38,862	-16%	1	1	0%	9,538	9,886	+4%	0	0	—
case-02 I need a technical deployment map for our cloud setup saved as an HTML file with inline graphics. The setup consists of an Nginx load balancer forwarding requests to three Python backend workers, connected to a Kafka message broker, a PostgreSQL database, and an AWS S3 bucket for media storage. Please produce an HTML diagram file that visualizes these components and their connections.	fail→fail	94,270	17,784	-81%	1	1	0%	8,420	4,882	-42%	0	0	—
case-03 We are designing an e-commerce platform and need a browser-ready HTML file containing an architecture diagram. The architecture includes a Vue.js frontend, an API Gateway, a Payment Gateway external integration, an Order Processing service, a RabbitMQ queue, and a Redis cache. Save this overview into a standalone HTML file.	fail→fail	43,088	38,253	-11%	1	1	0%	8,253	9,875	+20%	0	0	—
case-04 We are preparing a physics lecture explaining wave-particle duality and double-slit photon interference patterns. Please generate an SVG visual diagram showing light passing through double slits.	fail→fail	63,552	31,043	-51%	1	1	0%	8,221	5,931	-28%	0	0	—
case-05 Our facility management team needs an architectural floor plan showing office desk allocations, conference room doors, and fire escape paths. Please build this floor plan for us.	fail→fail	44,070	67,412	+53%	1	1	0%	8,750	11,652	+33%	0	0	—
case-06 I need a rough hand-drawn sketch visual for a low-fidelity UI wireframe so it looks like a sketchy whiteboard brainstorming session. How should we create this hand-drawn visual?	pass→fail	21,927	22,932	+5%	1	1	0%	4,178	6,722	+61%	0	0	—
case-07 We need an HTML file containing a color-coded tech stack diagram with a Next.js client, a NestJS backend, a Redis cache, and a MySQL database. Make sure each service type uses a distinct neon color accent. Save the diagram to a file.	fail→fail	61,653	41,103	-33%	1	1	0%	7,719	9,864	+28%	0	0	—
case-08 Can you create an interactive web-based diagram for an IoT pipeline featuring MQTT broker, InfluxDB, and Grafana? Many developers default to loading CDN scripts for Mermaid.js or D3.js. Save the standalone HTML output.	fail→fail	44,568	35,893	-19%	1	1	0%	8,278	6,061	-27%	0	0	—
case-09 Create a deployment topology map saved to an HTML file for a Kubernetes cluster running an Ingress controller, 4 microservices, and a PostgreSQL DB. We want smooth rounded rectangles for each service box.	fail→fail	77,062	61,348	-20%	1	1	0%	8,229	9,851	+20%	0	0	—
case-10 Generate a standalone HTML file for a microservice mesh diagram containing Gateway, Auth, Catalog, Cart, and Checkout services. Ensure text labels inside service boxes are clearly readable.	fail→fail	36,490	41,643	+14%	1	1	0%	8,223	9,857	+20%	0	0	—
case-11 Our enterprise system has 18 distinct microservices, 4 databases, 3 caching layers, and 2 message brokers. We want an HTML file with an architecture diagram. How should this vast topology be presented in the file?	fail→fail	41,248	34,614	-16%	1	1	0%	6,153	9,858	+60%	0	0	—
case-12 Produce an HTML architecture file for a serverless stack with AWS API Gateway, Lambda, DynamoDB, and S3. What font styling should be applied to the technical labels?	pass→pass	28,503	24,611	-14%	1	1	0%	4,979	6,776	+36%	0	0	—
case-13 Draw an SVG architecture layout saved to HTML showing a GraphQL gateway connecting to User, Order, and Inventory services, each linking to separate DB instances. How should connection lines between nodes be formatted?	fail→pass	81,942	38,923	-52%	1	1	0%	8,422	9,849	+17%	0	0	—
case-14 Create a data flow diagram as a standalone HTML file showing REST synchronous calls from Frontend to Backend, and asynchronous event streaming from Backend to Kafka and Elasticsearch. Save to file.	fail→fail	36,938	39,586	+7%	1	1	0%	6,695	9,845	+47%	0	0	—
case-15 Generate a web-based architecture view saved to an HTML file for a financial transaction platform (API, Fraud Detector, PostgreSQL, Redis). The visual background needs a sleek dark grid effect.	fail→fail	38,476	82,334	+114%	1	1	0%	8,226	16,567	+101%	0	0	—
case-16 Build an AWS cloud infrastructure map in HTML showing a VPC container, public and private subnets, an EC2 auto-scaling group, and an RDS instance. Save the HTML file.	fail→fail	42,847	21,874	-49%	1	1	0%	8,226	5,989	-27%	0	0	—
case-17 Generate a standalone HTML architecture file for a classic 3-tier web application (Angular, Spring Boot, Oracle DB). How should the layers be structured visually?	fail→pass	50,035	49,734	-1%	1	1	0%	8,221	6,578	-20%	0	0	—
case-18 We need an architecture diagram file for an air-gapped secure environment with no internet access. Create an HTML file for a Kubernetes worker node with Envoy proxy, Fluentd, and Prometheus. Save it to a file.	fail→fail	38,486	42,614	+11%	1	1	0%	8,233	9,854	+20%	0	0	—
case-19 Build an HTML system diagram for a web app using React, Express, PostgreSQL, Redis, RabbitMQ, and Stripe API. Save the file and use CSS custom properties for component colors.	fail→fail	34,876	25,713	-26%	1	1	0%	8,226	6,201	-25%	0	0	—
case-20 I want an architecture diagram file generated for our project named 'payment-service'. What file name and location should be used when writing the output file?	fail→fail	8,645	3,510	-59%	1	1	0%	1,329	1,996	+50%	0	0	—
case-21 Create a standalone HTML file depicting a microservice architecture with API Gateway communicating with Service A and Service B. Show directed flow between components.	pass→pass	38,694	33,880	-12%	1	1	0%	8,216	9,070	+10%	0	0	—
case-22 Generate an HTML diagram for a microservice topology where an API Gateway routes traffic to Payment, Inventory, and User services. How should the layout be organized?	pass→pass	18,051	33,253	+84%	1	1	0%	3,841	8,645	+125%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of -42 percentage points is the difference between those two pass rates over the 22 comparable cases. 8 cases got worse with the skill loaded, and they are included in that figure.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 66.7%
Pass rate with the skill: 25%
Cases attempted: 22
Cases counted toward lift: 22
Cases that regressed: 8
Skill version measured: v1
Run completed: 9/26/2026, 20:47 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-13

Prompt

Draw an SVG architecture layout saved to HTML showing a GraphQL gateway connecting to User, Order, and Inventory services, each linking to separate DB instances. How should connection lines between nodes be formatted?

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signalsno signals yet

BenchmarkRun a verified benchmark with positive lift

Live evalNeeds ≥10 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

No signals yet — run a benchmark or collect evaluated traces to earn a score.

Verified on gemini-3.6-flash · re-tested today

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