Agent skill

Architecture Diagram

Create professional, dark-themed architecture diagrams as standalone HTML files with SVG graphics.

MITAuto-check passedDevelopment

Install Architecture Diagram

skills CLI

$ npx skills add smallnest/pigo --skill architecture-diagram -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install smallnest/pigo architecture-diagram --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/smallnest/pigo.git skills-src && mkdir -p .claude/skills && cp -r skills-src/internal/builtinskills/skills/architecture-diagram .claude/skills/architecture-diagram && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "architecture-diagram" agent skill from https://github.com/smallnest/pigo/tree/master/internal/builtinskills/skills/architecture-diagram into .claude/skills/architecture-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "architecture-diagram", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/smallnest/pigo/tree/master/internal/builtinskills/skills/architecture-diagram

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add smallnest/pigo --skill architecture-diagram -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install smallnest/pigo architecture-diagram --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/smallnest/pigo.git skills-src && mkdir -p .agents/skills && cp -r skills-src/internal/builtinskills/skills/architecture-diagram .agents/skills/architecture-diagram && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "architecture-diagram" agent skill from https://github.com/smallnest/pigo/tree/master/internal/builtinskills/skills/architecture-diagram into .agents/skills/architecture-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "architecture-diagram", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add smallnest/pigo --skill architecture-diagram -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install smallnest/pigo architecture-diagram --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/smallnest/pigo.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/internal/builtinskills/skills/architecture-diagram .cursor/skills/architecture-diagram && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "architecture-diagram" agent skill from https://github.com/smallnest/pigo/tree/master/internal/builtinskills/skills/architecture-diagram into .cursor/skills/architecture-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "architecture-diagram", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/smallnest/pigo.git --path internal/builtinskills/skills/architecture-diagram

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add smallnest/pigo --skill architecture-diagram -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install smallnest/pigo architecture-diagram --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/smallnest/pigo.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/internal/builtinskills/skills/architecture-diagram .gemini/skills/architecture-diagram && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "architecture-diagram" agent skill from https://github.com/smallnest/pigo/tree/master/internal/builtinskills/skills/architecture-diagram into .gemini/skills/architecture-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "architecture-diagram", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install smallnest/pigo architecture-diagram

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add smallnest/pigo --skill architecture-diagram -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/smallnest/pigo.git skills-src && mkdir -p .github/skills && cp -r skills-src/internal/builtinskills/skills/architecture-diagram .github/skills/architecture-diagram && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "architecture-diagram" agent skill from https://github.com/smallnest/pigo/tree/master/internal/builtinskills/skills/architecture-diagram into .github/skills/architecture-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "architecture-diagram", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add smallnest/pigo --skill architecture-diagram -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install smallnest/pigo architecture-diagram --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/smallnest/pigo.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/internal/builtinskills/skills/architecture-diagram .opencode/skills/architecture-diagram && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "architecture-diagram" agent skill from https://github.com/smallnest/pigo/tree/master/internal/builtinskills/skills/architecture-diagram into .opencode/skills/architecture-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "architecture-diagram", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: architecture-diagram
GitHub stars: 479
Used in: 1 other repo
Token cost: ~1.6k tokens
SKILL.md length: 529 words
Files: 2 (incl. assets)
Skills in repo: 2
Repo updated: Sep 13, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Create professional, dark-themed architecture diagrams as standalone HTML files with SVG graphics.

Works in 4 steps: Header - Title with pulsing dot… → Main SVG diagram - Contained in rounded… → Summary cards - Grid of 3 cards below… → …
The user asks for system architecture diagrams
SKILL.md covers Design System, Template and Output
Reaches fonts.googleapis.com

What it does

Architecture Diagram is an agent skill from smallnest/pigo. Create professional, dark-themed architecture diagrams as standalone HTML files with SVG graphics. Use when the user asks for system architecture diagrams, infrastructure diagrams, cloud architecture visualizations, security diagrams, network topology diagrams, or any technical diagram showing system components and their relationships.

Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including assets.

It sits in Development, covering Diagrams. The licence is MIT.

When your agent uses it

The user asks for system architecture diagrams
Infrastructure diagrams
Cloud architecture visualizations
Security diagrams

Example prompts

“/architecture-diagram”

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

Header - Title with pulsing dot indicator, subtitle
Main SVG diagram - Contained in rounded border card
Summary cards - Grid of 3 cards below diagram with key details
Footer - Minimal metadata line

What it can do on your machine

Read from SKILL.md and the folder at commit 891d1f3. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are svg and html).
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
- fonts.googleapis.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Architecture Diagram loads about 1.6k tokens when it runs. Until then it costs about 90 tokens; SKILL.md has 529 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~90
When it runs · the whole SKILL.md, loaded when a task matches: ~1.6k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from smallnest/pigo at commit 891d1f3, republished under its MIT licence (© smallnest). 529 words, ~1,594 tokens.

Download SKILL.mdSave it as .claude/skills/architecture-diagram/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.

name: architecture-diagram
description: Create professional, dark-themed architecture diagrams as standalone HTML files with SVG graphics. Use when the user asks for system architecture diagrams, infrastructure diagrams, cloud architecture visualizations, security diagrams, network topology diagrams, or any technical diagram showing system components and their relationships.
license: MIT
metadata.version: 1.0
metadata.author: Cocoon AI (hello@cocoon-ai.com)

Architecture Diagram Skill

Create professional technical architecture diagrams as self-contained HTML files with inline SVG graphics and CSS styling.

Design System

Color Palette

Use these semantic colors for component types:

Component Type	Fill (rgba)	Stroke
Frontend	`rgba(8, 51, 68, 0.4)`	`#22d3ee` (cyan-400)
Backend	`rgba(6, 78, 59, 0.4)`	`#34d399` (emerald-400)
Database	`rgba(76, 29, 149, 0.4)`	`#a78bfa` (violet-400)
AWS/Cloud	`rgba(120, 53, 15, 0.3)`	`#fbbf24` (amber-400)
Security	`rgba(136, 19, 55, 0.4)`	`#fb7185` (rose-400)
Message Bus	`rgba(251, 146, 60, 0.3)`	`#fb923c` (orange-400)
External/Generic	`rgba(30, 41, 59, 0.5)`	`#94a3b8` (slate-400)

Typography

Use JetBrains Mono for all text (monospace, technical aesthetic):

html

<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">

Font sizes: 12px for component names, 9px for sublabels, 8px for annotations, 7px for tiny labels.

Visual Elements

Background: #020617 (slate-950) with subtle grid pattern:

svg

<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
  <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
</pattern>

Component boxes: Rounded rectangles (rx="6") with 1.5px stroke, semi-transparent fills.

Security groups: Dashed stroke (stroke-dasharray="4,4"), transparent fill, rose color.

Region boundaries: Larger dashed stroke (stroke-dasharray="8,4"), amber color, rx="12".

Arrows: Use SVG marker for arrowheads:

svg

<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  <polygon points="0 0, 10 3.5, 0 7" fill="#64748b" />
</marker>

Arrow z-order: Draw connection arrows early in the SVG (after the background grid) so they render behind component boxes. SVG elements are painted in document order, so arrows drawn first will appear behind shapes drawn later.

Masking arrows behind transparent fills: Since component boxes use semi-transparent fills (rgba(..., 0.4)), arrows behind them will show through. To fully mask arrows, draw an opaque background rect (e.g., fill="#0f172a") at the same position before drawing the semi-transparent styled rect on top:

svg

<!-- Opaque background to mask arrows -->
<rect x="X" y="Y" width="W" height="H" rx="6" fill="#0f172a"/>
<!-- Styled component on top -->
<rect x="X" y="Y" width="W" height="H" rx="6" fill="rgba(76, 29, 149, 0.4)" stroke="#a78bfa" stroke-width="1.5"/>

Auth/security flows: Dashed lines in rose color (#fb7185).

Message buses / Event buses: Small connector elements between services. Use orange color (#fb923c stroke, rgba(251, 146, 60, 0.3) fill):

svg

<rect x="X" y="Y" width="120" height="20" rx="4" fill="rgba(251, 146, 60, 0.3)" stroke="#fb923c" stroke-width="1"/>
<text x="CENTER_X" y="Y+14" fill="#fb923c" font-size="7" text-anchor="middle">Kafka / RabbitMQ</text>

Spacing Rules

CRITICAL: When stacking components vertically, ensure proper spacing to avoid overlaps:

Standard component height: 60px for services, 80-120px for larger components
Minimum vertical gap between components: 40px
Inline connectors (message buses): Place IN the gap between components, not overlapping

Example vertical layout:

Component A: y=70,  height=60  → ends at y=130
Gap:         y=130 to y=170   → 40px gap, place bus at y=140 (20px tall)
Component B: y=170, height=60  → ends at y=230

Wrong: Placing a message bus at y=160 when Component B starts at y=170 (causes overlap) Right: Placing a message bus at y=140, centered in the 40px gap (y=130 to y=170)

Show full SKILL.md (196 more words)Show less

Legend Placement

CRITICAL: Place legends OUTSIDE all boundary boxes (region boundaries, cluster boundaries, security groups).

Calculate where all boundaries end (y position + height)
Place legend at least 20px below the lowest boundary
Expand SVG viewBox height if needed to accommodate

Example:

Kubernetes Cluster: y=30, height=460 → ends at y=490
Legend should start at: y=510 or below
SVG viewBox height: at least 560 to fit legend

Wrong: Legend at y=470 inside a cluster boundary that ends at y=490 Right: Legend at y=510, below the cluster boundary, with viewBox height extended

Layout Structure

Header - Title with pulsing dot indicator, subtitle
Main SVG diagram - Contained in rounded border card
Summary cards - Grid of 3 cards below diagram with key details
Footer - Minimal metadata line

Component Box Pattern

svg

<rect x="X" y="Y" width="W" height="H" rx="6" fill="FILL_COLOR" stroke="STROKE_COLOR" stroke-width="1.5"/>
<text x="CENTER_X" y="Y+20" fill="white" font-size="11" font-weight="600" text-anchor="middle">LABEL</text>
<text x="CENTER_X" y="Y+36" fill="#94a3b8" font-size="9" text-anchor="middle">sublabel</text>

Info Card Pattern

html

<div class="card">
  <div class="card-header">
    <div class="card-dot COLOR"></div>
    <h3>Title</h3>
  </div>
  <ul>
    <li>• Item one</li>
    <li>• Item two</li>
  </ul>
</div>

Template

Copy and customize the template at assets/template.html. Key customization points:

Update the <title> and header text
Modify SVG viewBox dimensions if needed (default: 1000 x 680)
Add/remove/reposition component boxes
Draw connection arrows between components
Update the three summary cards
Update footer metadata

Output

Always produce a single self-contained .html file with:

Embedded CSS (no external stylesheets except Google Fonts)
Inline SVG (no external images)
No JavaScript required (pure CSS animations)

The file should render correctly when opened directly in any modern browser.

Files

SKILL.md and 1 other file (assets) in internal/builtinskills/skills/architecture-diagram of smallnest/pigo.

SKILL.md
assets/template.html

Open the folder on GitHubat commit 891d1f3

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in smallnest/pigo, which our catalogue first saw on October 7, 2026.

aiskillstore/marketplaceskills/cocoon-ai/architecture-diagram

Compare with similar skills

Architecture Diagram next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Architecture Diagram compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Architecture Diagram this skillsmallnest/pigo	479	1 repos	~1.6k	Automated safety check: Pass	MIT	27 days ago
HTML Diagramplannotator/effective-html	3.6k	—	~678	Automated safety check: Pass	MIT	26 days ago
Process Flow DiagramCocoon-AI/process-flow-diagram-generator	103	—	~4.3k	Automated safety check: Pass	MIT	5 mo ago
Architecture Diagrammateaix/mateclaw	1.2k	5 repos	~1.7k	Automated safety check: Pass	Apache-2.0	yesterday
Whatissuyuan2022/suyuan-skill	308	—	~606	Automated safety check: Pass	MIT	1 mo ago
Mobius Architecture Drawmobius-system/mobius	138	—	~1.7k	Automated safety check: Pass	Custom licence	today

Similar skills

HTML Diagram
plannotator/effective-html
Direct-invocation specialist for self-contained HTML diagrams whose layout, notation, and interaction clarify relationships, sequence, topology, state, hierarchy, or quantitative structure.
3.6k GitHub stars~678 tokensUpdated 26 days ago
DevelopmentAuto-check passed
Process Flow Diagram
Cocoon-AI/process-flow-diagram-generator
Create polished dark-themed process flow diagrams as self-contained HTML+SVG files.
103 GitHub stars~4.3k tokensUpdated 5 mo ago
DevelopmentAuto-check passed
Architecture Diagram
mateaix/mateclaw
Dark-themed SVG architecture/cloud/infra diagrams as HTML. An agent skill from mateaix/mateclaw.
1.2k GitHub starsUsed in 5 repos~1.7k tokens
DevelopmentAuto-check passed
Whatis
suyuan2022/suyuan-skill
What Is This — explain anything as a picture-first HTML page.
308 GitHub stars~606 tokensUpdated 1 mo ago
DevelopmentAuto-check passed
Mobius Architecture Draw
mobius-system/mobius
Analyze a Mobius project repository and generate a single-file HTML/SVG architecture diagram at .imac/generatedfigures/arch.html, with optional image fallbacks.
138 GitHub stars~1.7k tokensUpdated today
DevelopmentAuto-check passed
Flowchart
Unclecheng-li/AI_Animation
生成教育/科普类流程图、概念图、原理演示的动画 HTML 页面。用 CSS/SVG 绘制节点和连线，支持流动箭头、逐步出现、hover 高亮等动画效果。适合技术讲解、视频科普、PPT 配图场景。
1.5k GitHub stars~616 tokensUpdated 5 days ago
DevelopmentAuto-check passed

Questions about Architecture Diagram

What does Architecture Diagram do?

Create professional, dark-themed architecture diagrams as standalone HTML files with SVG graphics. Architecture Diagram is an agent skill from smallnest/pigo. Create professional, dark-themed architecture diagrams as standalone HTML files with SVG graphics.

When should I use Architecture Diagram?

Architecture Diagram fits situations like: the user asks for system architecture diagrams; infrastructure diagrams; cloud architecture visualizations; security diagrams.

How do I install Architecture Diagram in Claude Code?

Run `npx skills add smallnest/pigo --skill architecture-diagram -a claude-code`. Or copy the skill folder (internal/builtinskills/skills/architecture-diagram in smallnest/pigo) into .claude/skills/architecture-diagram in your project. Claude Code loads it when a task matches its description.

How do I install Architecture Diagram in Codex?

Run `npx skills add smallnest/pigo --skill architecture-diagram -a codex`. Or copy the skill folder (internal/builtinskills/skills/architecture-diagram in smallnest/pigo) into .agents/skills/architecture-diagram in your project. Codex loads it when a task matches its description.

Can I use Architecture Diagram in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add smallnest/pigo --skill architecture-diagram -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/architecture-diagram, .gemini/skills/architecture-diagram, .github/skills/architecture-diagram and .opencode/skills/architecture-diagram in your project.

What does Architecture Diagram need to run?

SKILL.md names no scripts, command-line tools or credentials: Architecture Diagram is instructions for the agent only.

Does Architecture Diagram access the network?

SKILL.md names 1 domain. In commands or code: fonts.googleapis.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Architecture Diagram safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Architecture Diagram use?

Architecture Diagram is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Architecture Diagram use?

About 1.6k tokens (SKILL.md is roughly 6.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Architecture Diagram?

Skills that share tags, products or a category with Architecture Diagram: HTML Diagram (plannotator/effective-html, 3.6k stars), Process Flow Diagram (Cocoon-AI/process-flow-diagram-generator, 103 stars), Architecture Diagram (mateaix/mateclaw, 1.2k stars) and Whatis (suyuan2022/suyuan-skill, 308 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Architecture Diagram?

smallnest (a GitHub user) maintains it in smallnest/pigo, which has 479 GitHub stars. The repository holds 2 skills in this directory. The repository was last updated on September 13, 2026.

Source: smallnest/pigo on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Architecture Diagram

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Architecture Diagram Skill

Design System

Color Palette

Typography

Visual Elements

Spacing Rules

Legend Placement

Layout Structure

Component Box Pattern

Info Card Pattern

Template

Output

Files

Used in 1 other repository

Compare with similar skills

Similar skills

HTML Diagram

Process Flow Diagram

Architecture Diagram

Whatis

Mobius Architecture Draw

Flowchart

More from smallnest/pigo

To Issues

Related

Questions about Architecture Diagram