Product Architecture Diagrams
- 1 installs
- 4 repo stars
- Updated June 5, 2026
- shangbianai/product-architecture-diagrams
product-architecture-diagrams is an agent skill that turns product inputs into classified, presentation-ready architecture diagrams.
About
product-architecture-diagrams is an agent skill for founders and small teams who need presentation-grade architecture visuals without hiring a diagram specialist on day one. Feed it product descriptions, PRDs, screenshots of whiteboards, or rough module lists; it silently clarifies audience, purpose, technical depth, and output format, then picks the right diagram taxonomy and methodology before generating artifacts. The default deliverable is a screenshot-like layered HTML/SVG chart you can export, but it also branches into Mermaid for repo docs, FigJam/Figma-ready structures for collaboration, and prompts for image generation when you need marketing polish. Codex is named explicitly, yet the workflow suits any agent that can follow reference files and iterative refinement. Use it when stakeholders confuse “features” with “platform layers,” when you need separate business, application, data, and technology views, or when a capability map must precede sprint planning.
- Classifies diagram type via references/diagram-types.md before drawing
- Applies methodology checklist for labels, relationships, and abstraction
- Defaults to colorful layered HTML/SVG charts with PNG/JPG export
- Produces Mermaid drafts, FigJam/Figma-ready layouts, and image-gen prompts
- Supports business-facing and engineering-facing architecture views from the same inputs
Product Architecture Diagrams by the numbers
- 1 all-time installs (skills.sh)
- Ranked #2,479 of 3,282 Productivity & Planning skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 7, 2026 (Skillselion catalog sync)
npx skills add https://github.com/shangbianai/product-architecture-diagrams --skill product-architecture-diagramsAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1 |
|---|---|
| repo stars | ★ 4 |
| Security audit | 3 / 3 scanners passed |
| Last updated | June 5, 2026 |
| Repository | shangbianai/product-architecture-diagrams ↗ |
What it does
Turn PRDs, module lists, or messy meeting notes into layered product architecture diagrams you can present or export as HTML/SVG, Mermaid, or Figma-ready views.
Who is it for?
Best when you're scoping SaaS or platform products and need fast layered diagrams from unstructured notes or screenshots.
Skip if: Deep infra-as-code topology with live cloud inventory, or teams that only need ASCII one-liners with no visual artifact.
When should I use this skill?
Codex or your agent needs screenshot-like layered architecture charts, Mermaid drafts, FigJam/Figma-ready diagrams, or image prompts from product descriptions, PRDs, notes, screenshots, or module lists.
What you get
You receive correctly typed, labeled architecture diagrams with export paths (HTML/SVG, Mermaid, design-tool ready) matched to your audience.
- Classified architecture diagram (HTML/SVG with export)
- Optional Mermaid source
- FigJam/Figma-ready structure or image-generation prompt
Files
Product Architecture Diagrams
Purpose
Turn unclear product/system material into a clear, presentation-ready product architecture diagram with the right level of abstraction, diagram type, labels, relationships, and visual style.
Default to a colorful, layered, screenshot-like HTML/SVG architecture chart when the user wants a product architecture diagram they can use directly. Keep the methodology strong, but make the artifact visually useful.
Core Workflow
1. Clarify the diagram job silently when possible: audience, purpose, product scope, known modules, technical depth, output format, and whether the user wants a business-facing or engineering-facing view. 2. Classify the requested diagram using diagram-types.md. If the user provides screenshots, infer the nearest type from the layout. 3. Apply the methodology checklist in methodology.md: business intent, user/experience layers, capability decomposition, architecture domains, platform support, data flow, governance/operations. 4. Choose an output style from templates.md: layered platform, domain relationship, swimlane, capability matrix, C4-style, value-flow, AI/data, or hybrid. 5. Produce the artifact directly. Prefer HTML/SVG with PNG/JPG export for screenshot-like architecture charts; use Mermaid only for quick logical drafts or when the user explicitly requests Mermaid; use Figma/FigJam tools when the user explicitly asks for Figma or an editable board. 6. If producing HTML, follow html-export.md: include 保存为 PNG and 保存为 JPG buttons, export the chart area, and verify the buttons when tooling is available. 7. Include a brief reading guide: what each layer/domain means, what is upstream/downstream, what is support vs core capability, and what assumptions were made.
Diagram Selection
Use these defaults:
- Business/product explanation: business architecture or value-flow map.
- PRD/module planning: capability map plus layered product platform diagram.
- Engineering alignment: layered application/technology/data diagram or C4 context/container view.
- Executive communication: 3-5 architecture domains with sparse relationships.
- Screenshot-like layered boxes: default to a colorful HTML layered product architecture diagram with presentation, gateway, application, business capability, support platform, model/data platform, technology platform, and monitoring/governance side rail.
- Unclear request: provide one recommended diagram and optionally a second alternative if the material supports two valid views.
Output Rules
- Use Chinese labels when the user's material is Chinese.
- Keep labels short: usually 2-8 Chinese characters or 1-4 English words.
- Separate core business capability, support capability, technical support, data capability, operations/governance, and external actors.
- For visual deliverables, use top-down horizontal layers, large colored layer bands, dashed architecture boundaries, and compact module boxes. This should resemble a presentation architecture screenshot, not a generic graph.
- Show relationships with verbs on edges when useful:
细化,实现,支撑,协作,监控,消费,沉淀. - Avoid mixing abstraction levels in one row. If unavoidable, group with clear boundaries.
- Prefer 4-7 major blocks per diagram and 3-9 items per block. Collapse long lists into
...or "其他服务" unless detail is requested. - When input is incomplete, create a useful draft and mark assumptions as
假设. - When creating Mermaid flowcharts, quote node labels that contain punctuation and keep syntax simple.
Visual Deliverable Defaults
- Create a standalone
.htmlfile when the user asks for a usable architecture image, a more polished/绚烂 style, download/export, JPG/PNG, or screenshot-like chart. - The first screen of the HTML should be the diagram itself, not a landing page or long explanation.
- Include a compact toolbar with diagram-type tabs and
保存为 PNG/保存为 JPGbuttons when multiple variants are useful. - Use a vivid but professional palette: cyan/blue for access/application, rose/red for risk services, amber/orange for modeling, pink/purple for data/AI, green for data foundation, indigo/dark blue for monitoring/governance.
- Use image generation only when the user explicitly asks for a bitmap concept image or says to use imagegen/image 2. Prefer HTML/SVG for exact Chinese text, editable structure, and reliable PNG/JPG export. If using image generation, prompt for a clean layered product architecture chart and then also provide a text/HTML source when exact labels matter.
Quality Checklist
Before finalizing, verify:
- The diagram has a clear main story: who uses what, what capabilities create value, what platforms support them, what data/technology enables them.
- Layers flow from user/business intent down to application, data, technology, operations, or from business model to implementation domains.
- Governance/monitoring/DevOps are shown as cross-cutting support when they affect many modules.
- The diagram can be read without a long explanation.
- The chosen style matches the audience: dense and precise for engineers, clean and domain-oriented for executives, process-oriented for business stakeholders.
- HTML exports work: PNG and JPG buttons create downloads or a clear fallback message.
Reference Loading
- Load methodology.md when deciding decomposition logic or when the user asks for "方法论".
- Load diagram-types.md when choosing among multiple forms or matching screenshot styles.
- Load templates.md when generating Mermaid/HTML/SVG structures.
- Load html-export.md when producing a polished HTML diagram or adding download buttons.
.DS_Store
node_modules/
*.log
interface:
display_name: "产品架构图生成"
short_description: "生成可导出图片的绚烂分层产品架构图"
default_prompt: "Use $product-architecture-diagrams to create a polished layered HTML product architecture diagram with PNG/JPG export from my product scope, modules, users, data, and technology stack."
policy:
allow_implicit_invocation: true
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>智能风控产品架构图 Demo</title>
<style>
:root {
--bg: #eef2f7;
--ink: #162033;
--muted: #65748b;
--line: rgba(32, 44, 68, 0.16);
--shadow: 0 18px 50px rgba(24, 39, 75, 0.16);
}
* { box-sizing: border-box; }
body {
margin: 0;
background: radial-gradient(circle at top left, #dbeafe 0, transparent 34%), var(--bg);
color: var(--ink);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}
.app {
max-width: 1480px;
margin: 0 auto;
padding: 22px;
}
.toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 16px;
background: rgba(255, 255, 255, 0.74);
border: 1px solid rgba(255, 255, 255, 0.9);
border-radius: 10px;
padding: 12px;
box-shadow: 0 12px 32px rgba(36, 58, 92, 0.12);
backdrop-filter: blur(10px);
}
.tabs, .actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
button {
min-height: 36px;
border: 1px solid #cbd5e1;
background: #fff;
color: #1f2937;
border-radius: 8px;
padding: 0 14px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
}
button.active {
border-color: #2563eb;
background: linear-gradient(135deg, #2563eb, #7c3aed);
color: #fff;
}
.actions button {
background: #111827;
color: #fff;
border-color: #111827;
}
#status {
min-width: 160px;
color: var(--muted);
font-size: 13px;
}
.stage {
overflow-x: auto;
padding-bottom: 10px;
}
#captureArea {
width: 1360px;
min-height: 920px;
padding: 28px;
background:
linear-gradient(90deg, rgba(255,255,255,0.72) 0 1px, transparent 1px 80px),
linear-gradient(0deg, rgba(255,255,255,0.72) 0 1px, transparent 1px 80px),
linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
border: 1px solid rgba(148, 163, 184, 0.42);
border-radius: 14px;
box-shadow: var(--shadow);
}
.arch-title {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 58px;
margin-bottom: 20px;
padding: 0 24px;
border-radius: 8px;
color: #fff;
background: linear-gradient(135deg, #a6292f 0%, #c24151 45%, #6d28d9 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.arch-title h1 {
margin: 0;
font-size: 25px;
letter-spacing: 0;
}
.arch-title .tag {
font-size: 14px;
padding: 7px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.28);
}
.layout {
display: grid;
grid-template-columns: 1fr 158px;
gap: 18px;
}
.layers {
display: grid;
gap: 14px;
}
.layer {
display: grid;
grid-template-columns: 152px 1fr;
gap: 14px;
align-items: stretch;
min-height: 92px;
}
.layer-label {
display: grid;
place-items: center;
padding: 12px;
border-radius: 7px;
color: #fff;
font-size: 21px;
font-weight: 800;
text-align: center;
line-height: 1.25;
border: 1px solid rgba(255, 255, 255, 0.5);
}
.layer-content {
display: grid;
align-items: center;
gap: 12px;
padding: 16px 22px;
border-radius: 7px;
border: 1px dashed rgba(30, 41, 59, 0.3);
background: rgba(255, 255, 255, 0.72);
}
.grid {
display: grid;
gap: 12px;
}
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.module {
min-height: 48px;
display: grid;
place-items: center;
padding: 10px 12px;
border-radius: 7px;
color: #fff;
font-size: 16px;
font-weight: 800;
text-align: center;
line-height: 1.25;
border: 1px solid rgba(255, 255, 255, 0.55);
box-shadow: 0 10px 22px rgba(25, 37, 66, 0.12);
}
.module.light {
color: #1f2937;
background: #fff;
border-color: rgba(15, 23, 42, 0.22);
}
.subhead {
min-height: 34px;
display: grid;
place-items: center;
border-radius: 6px;
color: #fff;
font-weight: 800;
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255,255,255,0.25);
}
.rail {
display: grid;
gap: 12px;
align-content: stretch;
min-height: 100%;
padding: 16px;
border-radius: 8px;
color: #fff;
background: linear-gradient(180deg, #1d4ed8, #0f766e);
border: 1px dashed rgba(255,255,255,0.55);
}
.rail-title {
display: grid;
place-items: center;
min-height: 44px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.18);
font-size: 18px;
font-weight: 900;
}
.rail .module {
min-height: 58px;
font-size: 15px;
background: rgba(255, 255, 255, 0.95);
color: #1e293b;
}
.c-cyan { background: linear-gradient(135deg, #06b6d4, #2563eb); }
.c-blue { background: linear-gradient(135deg, #60a5fa, #4f46e5); }
.c-red { background: linear-gradient(135deg, #fb7185, #ef4444); }
.c-orange { background: linear-gradient(135deg, #fdba74, #f97316); }
.c-pink { background: linear-gradient(135deg, #f0abfc, #db2777); }
.c-purple { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.c-green { background: linear-gradient(135deg, #86efac, #16a34a); }
.c-yellow { background: linear-gradient(135deg, #fde68a, #ca8a04); }
.c-slate { background: linear-gradient(135deg, #475569, #111827); }
.domain-board {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 18px;
}
.domain {
min-height: 230px;
padding: 20px;
border-radius: 8px;
border: 1px dashed rgba(15, 23, 42, 0.32);
background: rgba(255, 255, 255, 0.72);
}
.domain h2 {
margin: 0 0 16px;
font-size: 24px;
text-align: center;
}
.domain-flow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
min-height: 132px;
}
.arrow {
color: #334155;
font-size: 24px;
font-weight: 900;
}
.matrix {
display: grid;
grid-template-columns: 160px repeat(4, 1fr);
gap: 10px;
}
.matrix .cell {
min-height: 74px;
display: grid;
place-items: center;
padding: 10px;
border-radius: 7px;
text-align: center;
font-weight: 800;
border: 1px solid rgba(255,255,255,0.55);
color: #fff;
}
.matrix .head {
background: #111827;
}
.matrix .rowhead {
background: linear-gradient(135deg, #0891b2, #1d4ed8);
}
.note {
margin-top: 16px;
color: #475569;
font-size: 14px;
}
</style>
</head>
<body>
<main class="app">
<div class="toolbar">
<div class="tabs" id="tabs"></div>
<div class="actions">
<button id="exportPng">保存为 PNG</button>
<button id="exportJpg">保存为 JPG</button>
<span id="status">已就绪</span>
</div>
</div>
<div class="stage">
<section id="captureArea" aria-label="产品架构图"></section>
</div>
</main>
<script>
const diagrams = {
layered: {
tab: "分层平台图",
tag: "默认推荐",
title: "智能风控产品分层架构",
mode: "layers",
layers: [
{ label: "展现层", color: "c-blue", cols: 3, items: ["用户端", "运营端", "风控看板"] },
{ label: "接入层", color: "c-cyan", cols: 4, items: ["统一网关", "身份认证", "权限控制", "API编排"] },
{ label: "风控服务层", color: "c-red", cols: 4, items: ["风控评分", "报告生成", "规则策略", "风险预警"] },
{ label: "建模分析层", color: "c-orange", cols: 4, items: ["模型训练", "评分模型", "策略模型", "特征工程"] },
{ label: "数据处理层", color: "c-pink", cols: 4, items: ["标签系统", "数据清洗", "样本管理", "特征宽表"] },
{ label: "数据平台层", color: "c-green", cols: 4, items: ["数据仓库", "模型仓库", "指标体系", "数据治理"] },
{ label: "技术支撑层", color: "c-yellow", cols: 4, items: ["任务调度", "消息队列", "对象存储", "计算集群"] }
],
rail: ["服务监控", "模型监控", "日志告警", "发布回滚", "审计合规"]
},
business: {
tab: "业务关系图",
tag: "业务/应用/数据/技术",
title: "智能风控业务架构关系图",
mode: "domains"
},
capability: {
tab: "能力地图",
tag: "Capability Map",
title: "智能风控能力地图",
mode: "matrix"
},
ai: {
tab: "AI数据架构",
tag: "AI/Data Product",
title: "智能风控 AI 与数据产品架构",
mode: "layers",
layers: [
{ label: "体验层", color: "c-blue", cols: 3, items: ["风险评估页", "运营工作台", "可视化看板"] },
{ label: "智能服务层", color: "c-red", cols: 4, items: ["评分服务", "报告生成", "策略推荐", "告警推送"] },
{ label: "智能体层", color: "c-purple", cols: 4, items: ["风控Agent", "解释Agent", "报告Agent", "运营Agent"] },
{ label: "模型层", color: "c-orange", cols: 4, items: ["模型训练", "风险模型", "评分模型", "策略模型"] },
{ label: "特征标签层", color: "c-pink", cols: 4, items: ["标签系统", "特征工程", "样本库", "画像构建"] },
{ label: "数据底座", color: "c-green", cols: 4, items: ["数据仓库", "实时数据", "外部征信", "数据治理"] }
],
rail: ["模型监控", "漂移检测", "效果评估", "审计追踪"]
},
c4: {
tab: "C4容器图",
tag: "Context / Container",
title: "智能风控系统容器架构",
mode: "layers",
layers: [
{ label: "外部参与者", color: "c-blue", cols: 4, items: ["业务用户", "运营人员", "管理者", "外部数据源"] },
{ label: "产品容器", color: "c-cyan", cols: 4, items: ["用户端", "运营端", "开放API", "风控看板"] },
{ label: "服务容器", color: "c-red", cols: 5, items: ["评分服务", "报告服务", "策略服务", "标签服务", "模型服务"] },
{ label: "数据容器", color: "c-green", cols: 4, items: ["业务库", "数据仓库", "特征库", "模型仓库"] },
{ label: "基础设施", color: "c-slate", cols: 4, items: ["K8s集群", "消息队列", "监控日志", "CI/CD"] }
],
rail: ["认证授权", "限流熔断", "日志审计", "告警通知"]
}
};
let current = "layered";
function moduleHtml(text, color, light) {
return `<div class="module ${light ? "light" : color}">${text}</div>`;
}
function renderLayers(data) {
const layers = data.layers.map(layer => `
<div class="layer">
<div class="layer-label ${layer.color}">${layer.label}</div>
<div class="layer-content">
<div class="grid cols-${layer.cols}">
${layer.items.map(item => moduleHtml(item, layer.color)).join("")}
</div>
</div>
</div>
`).join("");
const rail = data.rail ? `
<aside class="rail">
<div class="rail-title">监控运维</div>
${data.rail.map(item => moduleHtml(item, "", true)).join("")}
</aside>
` : "";
return `<div class="layout"><div class="layers">${layers}</div>${rail}</div>`;
}
function renderDomains() {
return `
<div class="domain-board">
<section class="domain" style="background:#fff1d6">
<h2>业务架构</h2>
<div class="domain-flow">
${moduleHtml("风险识别", "c-orange")}<span class="arrow">→</span>
${moduleHtml("风险评分", "c-red")}<span class="arrow">→</span>
${moduleHtml("报告决策", "c-purple")}<span class="arrow">→</span>
${moduleHtml("运营处置", "c-blue")}
</div>
</section>
<section class="domain" style="background:#dbeafe">
<h2>应用架构</h2>
<div class="grid cols-2">
${["用户端", "运营端", "评分服务", "报告服务", "策略服务", "标签服务"].map(x => moduleHtml(x, "c-blue")).join("")}
</div>
</section>
<section class="domain" style="background:#dcfce7">
<h2>数据架构</h2>
<div class="grid cols-2">
${["数据仓库", "标签系统", "特征宽表", "样本管理", "模型仓库", "指标体系"].map(x => moduleHtml(x, "c-green")).join("")}
</div>
</section>
<section class="domain" style="background:#f3e8ff">
<h2>技术架构</h2>
<div class="grid cols-2">
${["模型训练", "任务调度", "监控运维", "权限审计", "消息队列", "发布回滚"].map(x => moduleHtml(x, "c-purple")).join("")}
</div>
</section>
</div>
<p class="note">关系：业务能力由应用服务实现，应用服务消费数据与模型，技术平台支撑训练、部署、监控和治理。</p>
`;
}
function renderMatrix() {
const rows = [
["核心风控", "风险识别", "风控评分", "策略决策", "预警处置"],
["智能分析", "模型训练", "特征工程", "报告生成", "解释归因"],
["数据能力", "数据仓库", "标签系统", "样本管理", "指标体系"],
["运营治理", "权限审计", "监控运维", "日志告警", "发布回滚"]
];
return `
<div class="matrix">
${["能力域", "识别", "评估", "决策", "治理"].map(x => `<div class="cell module head">${x}</div>`).join("")}
${rows.map(row => row.map((cell, index) => `<div class="cell module ${index === 0 ? "rowhead" : ["c-red", "c-orange", "c-pink", "c-green"][Math.max(0, rows.indexOf(row))]}">${cell}</div>`).join("")).join("")}
</div>
<p class="note">能力地图更适合做产品规划和边界讨论：它弱化箭头，强调风控产品必须具备哪些稳定能力。</p>
`;
}
function render() {
const data = diagrams[current];
document.querySelectorAll("[data-tab]").forEach(btn => btn.classList.toggle("active", btn.dataset.tab === current));
const body = data.mode === "domains" ? renderDomains() : data.mode === "matrix" ? renderMatrix() : renderLayers(data);
document.getElementById("captureArea").innerHTML = `
<div class="arch-title">
<h1>${data.title}</h1>
<span class="tag">${data.tag}</span>
</div>
${body}
`;
}
function initTabs() {
document.getElementById("tabs").innerHTML = Object.keys(diagrams).map(key => `<button data-tab="${key}">${diagrams[key].tab}</button>`).join("");
document.querySelectorAll("[data-tab]").forEach(btn => {
btn.addEventListener("click", () => {
current = btn.dataset.tab;
render();
});
});
}
function downloadDataUrl(dataUrl, filename) {
const link = document.createElement("a");
link.href = dataUrl;
link.download = filename;
document.body.appendChild(link);
link.click();
link.remove();
}
function roundRect(ctx, x, y, w, h, r) {
const radius = Math.min(r, w / 2, h / 2);
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.arcTo(x + w, y, x + w, y + h, radius);
ctx.arcTo(x + w, y + h, x, y + h, radius);
ctx.arcTo(x, y + h, x, y, radius);
ctx.arcTo(x, y, x + w, y, radius);
ctx.closePath();
}
function fillGradient(ctx, x, y, w, h, colors) {
const gradient = ctx.createLinearGradient(x, y, x + w, y + h);
gradient.addColorStop(0, colors[0]);
gradient.addColorStop(1, colors[1]);
ctx.fillStyle = gradient;
}
const palette = {
"c-cyan": ["#06b6d4", "#2563eb"],
"c-blue": ["#60a5fa", "#4f46e5"],
"c-red": ["#fb7185", "#ef4444"],
"c-orange": ["#fdba74", "#f97316"],
"c-pink": ["#f0abfc", "#db2777"],
"c-purple": ["#a78bfa", "#7c3aed"],
"c-green": ["#86efac", "#16a34a"],
"c-yellow": ["#fde68a", "#ca8a04"],
"c-slate": ["#475569", "#111827"]
};
function drawText(ctx, text, x, y, w, h, size = 18, color = "#fff", weight = 800) {
ctx.fillStyle = color;
ctx.font = `${weight} ${size}px -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", Arial`;
ctx.textAlign = "center";
ctx.textBaseline = "middle";
const chars = String(text).split("");
const lines = [];
let line = "";
for (const char of chars) {
const next = line + char;
if (ctx.measureText(next).width > w - 20 && line) {
lines.push(line);
line = char;
} else {
line = next;
}
}
if (line) lines.push(line);
const lineHeight = size * 1.28;
const start = y + h / 2 - (lines.length - 1) * lineHeight / 2;
lines.slice(0, 3).forEach((item, index) => ctx.fillText(item, x + w / 2, start + index * lineHeight));
}
function drawModule(ctx, text, x, y, w, h, color, light = false) {
roundRect(ctx, x, y, w, h, 9);
if (light) {
ctx.fillStyle = "#ffffff";
} else {
fillGradient(ctx, x, y, w, h, palette[color] || palette["c-blue"]);
}
ctx.fill();
ctx.strokeStyle = light ? "rgba(15,23,42,0.25)" : "rgba(255,255,255,0.65)";
ctx.lineWidth = 1.2;
ctx.stroke();
drawText(ctx, text, x, y, w, h, 18, light ? "#1e293b" : "#ffffff");
}
function drawBackground(ctx, width, height, white) {
ctx.fillStyle = white ? "#ffffff" : "#f8fbff";
ctx.fillRect(0, 0, width, height);
ctx.strokeStyle = "rgba(148,163,184,0.22)";
ctx.lineWidth = 1;
for (let x = 0; x <= width; x += 80) {
ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, height); ctx.stroke();
}
for (let y = 0; y <= height; y += 80) {
ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(width, y); ctx.stroke();
}
}
function drawTitle(ctx, data, width) {
fillGradient(ctx, 28, 28, width - 56, 58, ["#a6292f", "#6d28d9"]);
roundRect(ctx, 28, 28, width - 56, 58, 8);
ctx.fill();
drawText(ctx, data.title, 52, 28, 640, 58, 26, "#fff", 900);
ctx.textAlign = "right";
ctx.fillStyle = "rgba(255,255,255,0.92)";
ctx.font = "800 16px -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', Arial";
ctx.fillText(data.tag, width - 52, 57);
}
function drawLayeredCanvas(ctx, data, width, height) {
const hasRail = Boolean(data.rail);
const left = 28;
const top = 106;
const labelW = 152;
const gap = 14;
const railW = hasRail ? 158 : 0;
const contentW = width - left * 2 - labelW - gap - (hasRail ? railW + 18 : 0);
const rowH = Math.floor((height - top - 28 - gap * (data.layers.length - 1)) / data.layers.length);
data.layers.forEach((layer, index) => {
const y = top + index * (rowH + gap);
fillGradient(ctx, left, y, labelW, rowH, palette[layer.color]);
roundRect(ctx, left, y, labelW, rowH, 8); ctx.fill();
drawText(ctx, layer.label, left, y, labelW, rowH, 23, "#fff", 900);
const cx = left + labelW + gap;
roundRect(ctx, cx, y, contentW, rowH, 8);
ctx.fillStyle = "rgba(255,255,255,0.78)"; ctx.fill();
ctx.setLineDash([8, 6]); ctx.strokeStyle = "rgba(30,41,59,0.35)"; ctx.stroke(); ctx.setLineDash([]);
const cols = layer.cols;
const itemGap = 12;
const itemW = (contentW - 44 - itemGap * (cols - 1)) / cols;
const itemH = Math.min(54, rowH - 32);
layer.items.forEach((item, itemIndex) => {
const ix = cx + 22 + (itemIndex % cols) * (itemW + itemGap);
const iy = y + (rowH - itemH) / 2;
drawModule(ctx, item, ix, iy, itemW, itemH, layer.color);
});
});
if (hasRail) {
const rx = width - left - railW;
const rh = height - top - 28;
fillGradient(ctx, rx, top, railW, rh, ["#1d4ed8", "#0f766e"]);
roundRect(ctx, rx, top, railW, rh, 8); ctx.fill();
drawText(ctx, "监控运维", rx + 14, top + 14, railW - 28, 50, 20, "#fff", 900);
const itemH = 58;
data.rail.forEach((item, index) => drawModule(ctx, item, rx + 16, top + 84 + index * (itemH + 14), railW - 32, itemH, "c-blue", true));
}
}
function drawDomainsCanvas(ctx, width) {
const domains = [
["业务架构", "#fff1d6", "c-orange", ["风险识别", "风控评分", "报告决策", "运营处置"]],
["应用架构", "#dbeafe", "c-blue", ["用户端", "运营端", "评分服务", "报告服务", "策略服务", "标签服务"]],
["数据架构", "#dcfce7", "c-green", ["数据仓库", "标签系统", "特征宽表", "样本管理", "模型仓库", "指标体系"]],
["技术架构", "#f3e8ff", "c-purple", ["模型训练", "任务调度", "监控运维", "权限审计", "消息队列", "发布回滚"]]
];
const x0 = 28, y0 = 106, gap = 18, boxW = (width - 56 - gap) / 2, boxH = 330;
domains.forEach((domain, index) => {
const x = x0 + (index % 2) * (boxW + gap);
const y = y0 + Math.floor(index / 2) * (boxH + gap);
roundRect(ctx, x, y, boxW, boxH, 8); ctx.fillStyle = domain[1]; ctx.fill();
ctx.setLineDash([8, 6]); ctx.strokeStyle = "rgba(15,23,42,0.34)"; ctx.stroke(); ctx.setLineDash([]);
drawText(ctx, domain[0], x, y + 18, boxW, 42, 26, "#1e293b", 900);
const cols = domain[3].length === 4 ? 4 : 2;
const itemW = (boxW - 48 - 12 * (cols - 1)) / cols;
const itemH = 58;
domain[3].forEach((item, i) => {
const ix = x + 24 + (i % cols) * (itemW + 12);
const iy = y + 110 + Math.floor(i / cols) * 78;
drawModule(ctx, item, ix, iy, itemW, itemH, domain[2]);
});
});
}
function drawMatrixCanvas(ctx, width) {
const rows = [
["核心风控", "风险识别", "风控评分", "策略决策", "预警处置", "c-red"],
["智能分析", "模型训练", "特征工程", "报告生成", "解释归因", "c-orange"],
["数据能力", "数据仓库", "标签系统", "样本管理", "指标体系", "c-pink"],
["运营治理", "权限审计", "监控运维", "日志告警", "发布回滚", "c-green"]
];
const heads = ["能力域", "识别", "评估", "决策", "治理"];
const x0 = 44, y0 = 130, gap = 12, colW = (width - 88 - gap * 4) / 5, rowH = 96;
heads.forEach((h, i) => drawModule(ctx, h, x0 + i * (colW + gap), y0, colW, rowH, "c-slate"));
rows.forEach((row, r) => {
row.slice(0, 5).forEach((cell, c) => drawModule(ctx, cell, x0 + c * (colW + gap), y0 + (r + 1) * (rowH + gap), colW, rowH, c === 0 ? "c-cyan" : row[5]));
});
}
async function exportChart(format, shouldDownload = true) {
const data = diagrams[current];
const status = document.getElementById("status");
const width = 1360;
const height = current === "business" ? 820 : current === "capability" ? 690 : 920;
const canvas = document.createElement("canvas");
canvas.width = width * 2;
canvas.height = height * 2;
const ctx = canvas.getContext("2d");
ctx.scale(2, 2);
try {
drawBackground(ctx, width, height, format === "jpg");
drawTitle(ctx, data, width);
if (data.mode === "domains") {
drawDomainsCanvas(ctx, width);
} else if (data.mode === "matrix") {
drawMatrixCanvas(ctx, width);
} else {
drawLayeredCanvas(ctx, data, width, height);
}
const mime = format === "jpg" ? "image/jpeg" : "image/png";
const dataUrl = canvas.toDataURL(mime, 0.95);
if (shouldDownload) downloadDataUrl(dataUrl, `智能风控产品架构图-${diagrams[current].tab}.${format}`);
status.textContent = `已生成 ${format.toUpperCase()}：${width}×${height}`;
return { width, height, length: dataUrl.length, mime };
} catch (error) {
status.textContent = "导出受限，可使用浏览器截图或打印为 PDF";
throw error;
}
}
document.getElementById("exportPng").addEventListener("click", () => exportChart("png"));
document.getElementById("exportJpg").addEventListener("click", () => exportChart("jpg"));
window.__demo = { diagrams, exportChart, setTab: key => { current = key; render(); } };
initTabs();
render();
</script>
</body>
</html>
MIT License
Copyright (c) 2026 shangbianai
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
Product Architecture Diagrams Skill
一个用于 Codex 的产品架构图生成 Skill。
它可以把产品描述、PRD、模块清单或截图风格要求，转成可直接用于汇报的分层产品架构图。默认产物不是普通 Mermaid，而是绚烂的 HTML/SVG 架构图，并支持保存为 PNG / JPG。
能力
- 自动判断图型：分层平台图、业务关系图、能力地图、AI 数据架构、C4 容器图。
- 内置产品架构图方法论：用户体验五层面、C4、业务/应用/数据/技术域、ArchiMate 分层、Capability Mapping。
- 默认生成上下分层、色块清晰、适合 PPT/文档的 HTML 架构图。
- HTML 产物内置
保存为 PNG和保存为 JPG。 - 支持在用户明确要求时生成 imagegen / Image 2 绘图提示词。
安装
cp -R . ~/.codex/skills/product-architecture-diagrams或者只复制核心目录：
mkdir -p ~/.codex/skills/product-architecture-diagrams
cp -R SKILL.md agents references ~/.codex/skills/product-architecture-diagrams/使用
用 $product-architecture-diagrams 帮我画一个智能风控产品架构图，包含用户端、运营端、风控评分、报告生成、模型训练、标签系统、数据仓库、监控运维。示例
示例文件在 examples/：
product-architecture-diagrams-demo.htmlproduct-architecture-diagrams-demo-layered.pngproduct-architecture-diagrams-demo-ai.png
目录
.
├── SKILL.md
├── agents/
│ └── openai.yaml
├── references/
│ ├── diagram-types.md
│ ├── html-export.md
│ ├── methodology.md
│ └── templates.md
└── examples/
├── product-architecture-diagrams-demo.html
├── product-architecture-diagrams-demo-layered.png
└── product-architecture-diagrams-demo-ai.pngProduct Architecture Diagram Types
Choose the diagram type by audience and question. Hybrid diagrams are allowed, but name the primary type.
1. Layered Product Platform Diagram
Best for: screenshot-like platform architecture, SaaS/product backend planning, feature/module inventory, and the default "产品架构图" request.
Typical layers:
- 用户/渠道层: Web, App, mini program, open API, admin console.
- 接入/网关层: API gateway, auth, routing, throttling, protocol conversion.
- 应用层: product-facing systems and business applications.
- 业务能力层: stable core capabilities.
- 支撑平台层: reusable internal platforms and common services.
- 数据层: master data, operational DB, data warehouse/lake, feature store, model data.
- 技术平台层: infra, middleware, DevOps, observability, security.
- 治理/运维: cross-cutting or side rail.
Use when the user wants a full product architecture like the first and third screenshots. For this skill, this type should usually be rendered as a polished HTML/SVG chart, not only Mermaid.
2. Business/Application/Data/Technology Relationship Map
Best for: explaining how strategy, business process, application services, data, and technology fit together.
Domains:
- 业务架构: business model, value flow, business process, org/capability.
- 应用架构: application structure, application interaction, application service.
- 数据架构: data model, data technology, data governance.
- 技术架构: technical components, deployment, infrastructure.
Use sparse boxes and verb-labeled dashed arrows. This matches the second screenshot.
3. Capability Map
Best for: product planning, roadmap scope, platform boundaries, buy/build decisions.
Structure:
- Rows by capability group: core, support, governance, intelligence, data.
- Columns by domain or lifecycle: acquire, serve, operate, analyze, grow.
- No heavy arrows unless showing dependency.
Use when the user provides many functions but no process.
4. Value Flow / Business Flow Architecture
Best for: business stakeholders, explaining how value is created end to end.
Structure:
- Business model -> value stream -> business process -> capabilities -> products/services.
- Add supporting data/tech platforms below or beside the flow.
Use when the user says "业务架构", "商业模式", "价值流", "端到端流程".
5. Swimlane Product Architecture
Best for: multi-role collaboration or cross-system workflows.
Lanes:
- User/role lanes: customer, operator, admin, partner.
- System lanes: frontend, gateway, business service, data service, external platform.
Use when the key question is "who does what with which system".
6. C4-Style Product/System View
Best for: engineering alignment and progressive technical detail.
Levels:
- Context: users, external systems, the product boundary.
- Container: apps/services/datastores.
- Component: major modules inside a service/product.
- Code: only when specifically requested.
Use when the user asks for technical architecture, system boundaries, service dependencies, or implementation planning.
7. AI/Data Product Architecture
Best for: AI agents, model platforms, analytics products, risk engines, recommendation, search.
Common layers:
- Experience layer: user-facing app/pages/dialogue/visualization.
- Orchestration/service layer: agent, workflow, API, report generation, policy engine.
- Modeling/analysis layer: models, rules, feature engineering, training/evaluation.
- Data processing layer: structured/unstructured processing, labeling, feature store.
- Platform layer: LLM, AutoML, vector DB, warehouse/lake, MLOps, monitoring.
Use when the product depends on data/model intelligence like the fourth screenshot.
8. Presentation Architecture Poster
Best for: direct reuse in slides, reports, WeChat articles, sales materials, internal reviews.
Structure:
- A strong title bar.
- 5-7 horizontal layer bands.
- Left labels for layers.
- Center module groups with vivid fills.
- Optional right side rail for monitoring/governance/DevOps.
- Export buttons in HTML for PNG/JPG.
Use when the user says "像截图", "绚烂", "好看", "可下载图片", "HTML", "JPG", "PNG", or wants a diagram that can be pasted into a document.
Selection Heuristic
- If the user gives screenshots, mirror the closest visual form first.
- If the user gives modules only, make a layered platform diagram and render it in HTML unless they ask for Mermaid.
- If the user gives business concepts and relationships, make a relationship map.
- If the user gives user roles/processes, make a swimlane or value-flow diagram.
- If the user gives services/infra, make a C4/container or technical layered diagram.
- If the user says "产品架构图" with no extra detail, produce a polished layered HTML chart plus a short note about two alternative views.
HTML Export Requirements
Use this reference when generating polished product architecture diagrams as HTML.
Required Structure
The HTML file must be standalone: embedded CSS and JavaScript, no external CDN dependency.
Required elements:
#captureArea: the diagram region to export.#exportPng: button labeled保存为 PNG.#exportJpg: button labeled保存为 JPG.#status: small status text for success or fallback errors.
Recommended controls:
- Diagram type tabs when multiple classifications are shown.
- A
fit widthlayout so the exported region has stable dimensions, usually 1200-1600px wide.
Export Behavior
Prefer a reliable data-model canvas export for architecture diagrams:
1. Keep the diagram data as structured arrays: layers, module labels, side rails, domain groups. 2. Render the visible HTML from that data. 3. On export, draw the same data directly to a canvas with rectangles, text, and simple gradients. 4. For PNG, call canvas.toDataURL("image/png"). 5. For JPG, paint a white background first, then call canvas.toDataURL("image/jpeg", 0.95). 6. Create a temporary <a download> element, click it, then remove it. 7. Update #status.
Use SVG foreignObject snapshot only as a secondary approach because local file pages and some browsers may taint the canvas:
1. Clone #captureArea. 2. Inline or preserve the CSS needed for the clone. 3. Wrap the clone inside an SVG foreignObject. 4. Draw the SVG image onto a canvas.
If canvas export is blocked, show a concise fallback message and keep the HTML diagram usable for browser screenshot/print.
Verification
When tooling allows, verify:
- The page renders nonblank.
- Tabs switch the visible diagram.
保存为 PNGand保存为 JPGrun without JavaScript errors.- Exported image dimensions match
#captureArea. - Chinese labels fit inside boxes at desktop width and do not overlap.
Visual Rules
- Keep the diagram, not the toolbar, inside
#captureArea. - Use stable fixed export dimensions with responsive scaling outside the capture area.
- Use readable Chinese fonts and high contrast.
- Put layer names in a left column for layered diagrams.
- Keep module boxes aligned in rows; use grids instead of free-floating coordinates when possible.
- Use arrows only where they explain relationships. Layer order can imply support flow.
Product Architecture Diagram Methodology
Use this reference when the user asks for a method-driven product architecture diagram or when the source material is messy.
Source Methodologies To Cite
- Jesse James Garrett, The Elements of User Experience: use the planes from abstract to concrete: strategy, scope, structure, skeleton, surface. In product architecture diagrams, map them to
business goal -> capability scope -> information/function structure -> interaction/process skeleton -> channels/UI. - C4 model: use progressive abstraction: system context, containers, components, code. In product architecture diagrams, use this as
external actors -> products/apps/services -> modules/capabilities -> implementation units. - Enterprise architecture domains, common in TOGAF-style practice: business, data, application, technology. Use this to avoid drawing only functions while forgetting data and infrastructure.
- ArchiMate layered thinking: business, application, technology layers with services/interfaces/realization relationships. Use this to name relationships such as
serves,realizes,supports, andaccesses data. - Capability mapping: decompose the product into stable business capabilities rather than only current org teams or database tables. Capabilities should describe what the product must be able to do.
Useful public links:
- Garrett: http://www.jjg.net/elements/
- C4 model: https://c4model.com/
- The Open Group TOGAF: https://www.opengroup.org/togaf
- The Open Group ArchiMate: https://www.opengroup.org/archimate-forum/archimate-overview
Decomposition Ladder
Use this ladder from abstract to concrete:
1. Business intent: business model, strategic goal, value proposition, key user/job. 2. Experience/channel: user roles, channels, touchpoints, surface products, admin portals. 3. Business capabilities: order, payment, risk control, dispatch, content, search, membership, analytics. 4. Application services: services/apps that expose or orchestrate capabilities. 5. Data capabilities: data model, master data, analytics, features, labels, warehouse/lake, governance. 6. Technology platform: gateway, identity, workflow, message queue, cache, storage, infra, AI/model platform. 7. Operations/governance: monitoring, logging, alerting, configuration, deployment, security, compliance.
Architecture Questions
Ask or infer:
- Who are the external actors and product channels?
- What value flow or business process does the product serve?
- Which capabilities are core business differentiators, and which are support/platform capabilities?
- Which application services realize the capabilities?
- What data is produced, consumed, governed, or analyzed?
- What technical platforms enable reuse and reliability?
- What cross-cutting governance is needed: security, observability, DevOps, compliance, permissions?
- What is intentionally out of scope?
Relationship Vocabulary
Use concise relationship verbs:
细化: business model to value flow, value flow to process.实现: application/service realizes a capability; technology realizes deployment.支撑: platform supports business/application capabilities.协作: peer modules coordinate.沉淀: process or interaction produces data assets.消费: services consume models/data/API capabilities.治理: security/monitoring/configuration controls services.反馈: analytics or risk results feed product/business decisions.
Common Mistakes To Avoid
- Listing every feature without showing architecture relationships.
- Mixing business capabilities, UI pages, APIs, and databases in the same undifferentiated row.
- Drawing org structure as product architecture unless the request is explicitly organizational.
- Overusing microservice names when the audience needs product capabilities.
- Hiding data, monitoring, permissions, or DevOps even when they are critical to the product.
- Using arrows everywhere without verbs; if the relationship cannot be named, remove or regroup it.
Product Architecture Diagram Templates
Use these as starting points. Replace labels with the product's real modules. For user-facing deliverables, prefer the HTML patterns over Mermaid.
HTML: Polished Layered Architecture
Create a standalone HTML file with this structure:
bodyuses a neutral app background..toolbarcontains type tabs and export buttons.#captureAreais the only exported region..arch-titleis a full-width title bar..layerrows are horizontal bands with a left.layer-labeland right.layer-content..moduleitems are compact boxes with readable text..side-railmay show monitoring/governance/DevOps as a vertical cross-cutting rail.
Minimum controls:
保存为 PNG保存为 JPG- A status text that reports success/fallback errors.
Use html-export.md for the export function.
HTML: Type Variants
When demoing or offering alternatives, use one page with tabs:
分层平台图: top-down product/platform layers.业务关系图: business/application/data/technology domains with dashed arrows.能力地图: capability groups in a matrix.AI数据架构: experience/service/model/data/platform layers.C4容器图: users, channels, services, datastores, external systems.
Each tab should keep the same export buttons and reuse #captureArea.
Mermaid: Layered Platform Diagram
flowchart TB
subgraph L1["用户/渠道层"]
U1["用户 App"]
U2["运营 Web"]
U3["开放 API"]
end
G["统一接入网关<br/>认证 / 路由 / 限流 / 协议转换"]
subgraph L2["应用层"]
A1["订单管理"]
A2["商品管理"]
A3["统计报表"]
end
subgraph L3["业务能力平台"]
C1["订单中心"]
C2["调度中心"]
C3["消息中心"]
C4["规则中心"]
end
subgraph L4["支撑平台"]
S1["会员中心"]
S2["权限中心"]
S3["地图服务"]
S4["搜索中心"]
end
subgraph L5["数据与技术平台"]
D1["主数据"]
D2["数据仓库"]
T1["缓存/消息队列"]
T2["监控/日志/发布"]
end
L1 --> G --> L2 --> L3
L3 --> L4
L3 --> L5Mermaid: Business/Application/Data/Technology Map
flowchart TB
subgraph B["业务架构"]
B1["商业模式"] -->|"细化"| B2["价值流"] -->|"细化"| B3["业务流程"]
B4["组织/角色"] -.->|"实施"| B3
B5["业务能力"] -.->|"支撑"| B3
end
subgraph A["应用架构"]
A1["应用结构"] <-->|"协作"| A2["应用交互"] -->|"实现"| A3["应用服务"]
end
subgraph D["数据架构"]
D1["数据模型"]
D2["数据技术"] -->|"实现"| D1
end
subgraph T["技术架构"]
T1["技术组件"] -->|"实现"| T2["软件部署"]
T3["基础设施"] -.->|"实现"| T2
end
A3 -.->|"支撑"| B5
D1 -.->|"支撑"| A3
T2 -.->|"支撑"| A1Mermaid: AI/Data Product Layered Diagram
flowchart TB
Title["智能产品整体架构"]
subgraph E["展现层"]
E1["评估页面"]
E2["智能体对话"]
E3["可视化看板"]
end
subgraph S["服务层"]
S0["业务智能体"]
S1["评分服务"]
S2["报告生成"]
S3["策略推荐"]
end
subgraph M["建模分析层"]
M1["业务风险模型"]
M2["评分模型"]
M3["政策匹配模型"]
M4["LLM Agent"]
end
subgraph D["数据处理层"]
D1["结构化处理"]
D2["非结构化处理"]
D3["标签系统"]
D4["特征工程"]
end
subgraph P["平台层"]
P1["模型训练平台"]
P2["向量/图谱平台"]
P3["数据仓库"]
P4["MLOps/监控"]
end
Title --> E --> S --> M --> D --> PHTML/SVG Visual Style Guidance
When making a polished screenshot-like visual:
- Use a neutral canvas, 1px borders, 4-8px radius, and vivid but professional fills by layer.
- Use dashed boundaries for architecture domains and solid boxes for concrete modules.
- Use side rails for cross-cutting observability, governance, security, and DevOps.
- Keep color semantic: business warm, application blue, risk/service red, model orange, data pink/purple/green, technology yellow/gray, governance dark blue.
- Avoid decorative gradients, icons that do not add meaning, and overly rounded cards.
- Avoid one-note palettes. A product architecture poster may be colorful, but each color should encode layer/domain meaning.
Final Response Pattern
When returning a diagram, include:
1. Diagram artifact or code. 2. 图型选择: one sentence naming the type and why. 3. 阅读方式: 2-4 bullets explaining top-down or left-right logic. 4. 假设: only if the source material had gaps.
Related skills
Grill MeHave an agent relentlessly pressure-test their plan or design until every decision branch is resolved and shared understanding is reached.691k196kGrill With DocsPressure-test architecture decisions against their live codebase and living documentation before writing production code.585k196k
Lark CalendarLet their coding agents read, create, and manage events inside Lark (Feishu) Calendar directly from natural language instructions.493kLark ImLet their coding agent send instant notifications, post updates, and receive commands directly inside Lark (Feishu) workspaces.493kLark ContactLet their AI coding agents read and write contacts, send messages, and manage user data inside Lark (Feishu).493kLark AttendanceAutomatically fetch and report daily attendance data from Lark (Feishu) into their own tools or agents.493kHow it compares
Product-architecture generator with methodology—not a generic whiteboard MCP or automatic Terraform graph.
FAQ
Who is product-architecture-diagrams for?
Developers preparing scope visuals for cofounders, clients, or agents before and during implementation.
When should I use product-architecture-diagrams?
At Validate scope when locking capabilities, during Build pm/docs when updating system charts, or at Launch distribution when you need investor- or partner-facing platform diagrams from existing PRD text.
Is product-architecture-diagrams safe to install?
Review the Security Audits panel on this page; the skill may read PRDs and generate files locally—avoid piping production secrets into prompts.