architecture-diagram
產生架構圖
手動建立技術架構圖需要大量時間且需要設計技能。此技能提供可直接使用的 HTML 範本，具有一致的主題深色配色、語義化的色彩和 SVG 圖形，可在任何瀏覽器中正確呈現。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“architecture-diagram”。 為具有 React 前端、Express API、PostgreSQL 資料庫和 Redis 快取的 Web 應用程式建立架構圖，並透過負載平衡器保護。
预期结果:
- 包含深色主題架構圖的獨立 HTML 檔案
- 前端元件以青色標註 React
- 負載平衡器和後端元件使用適當的顏色
- 資料庫和快取元件標註 PostgreSQL 和 Redis
- 連接箭頭顯示 HTTPS 和資料庫通訊流向
- 摘要卡描述關鍵系統元件
安全审计
安全This skill is a pure documentation and template-based skill with no executable code, no file system access, no network calls for data exfiltration, and no command execution capabilities. All 72 static findings are false positives. The scanner misidentified markdown code fences as shell execution, HTML structure comments as reconnaissance, placeholder text as cryptographic algorithms, and CDN links as malicious URLs.
风险因素
🌐 网络访问 (3)
⚙️ 外部命令 (45)
质量评分
你能构建什么
記錄系統設計
為系統設計文件、架構審查簡報和技術規格建立專業圖表
對應基礎設施
為 AWS、Azure 或 GCP 環境視覺化雲端基礎設施、網路拓撲和部署架構
設計安全圖表
使用安全專用的視覺元素記錄安全邊界、授權流程和合規架構
试试这些提示
為三層式 Web 應用程式建立架構圖，包含 React 前端、Node.js API 後端和 PostgreSQL 資料庫。使用架構圖技能搭配深色主題範本。
產生顯示 CloudFront CDN、API Gateway、Lambda 函數、DynamoDB 和 S3 儲存桶的 AWS 架構圖，位於 us-west-2 區域。包含安全群組和 IAM 角色。
建立微服務架構圖，包含多個透過 Kafka 訊息匯流排通訊的後端服務。包含授權服務、使用者服務、付款服務和通知服務。
產生顯示零信任模型的安全架構圖，包含身分提供者、服務之間的相互 TLS、靜態加密和安全群組邊界。安全元素使用玫瑰色。
最佳实践
- Group related components within security groups or region boundaries for visual clarity
- Use consistent color coding across all diagrams for the same component types
- Place legends outside boundary boxes and extend viewBox height to accommodate them
避免
- Overlapping component boxes without adequate vertical spacing between them
- Placing legends inside region or cluster boundaries where they become obscured
- Drawing connection arrows after component boxes, causing arrows to appear on top of fills