Sơ đồ kiến trúc - Sơ đồ kiến trúc/đám mây/hạ tầng SVG theo chủ đề tối dưới dạng HTML
{/* Trang này được tạo tự động từ SKILL.md của kỹ năng bởi website/scripts/generate-skill-docs.py. Chỉnh sửa nguồn SKILL.md, không phải trang này. */}`#Sơ đồ kiến trúc
Sơ đồ kiến trúc/đám mây/hạ tầng SVG theo chủ đề tối dưới dạng HTML.
Siêu dữ liệu kỹ năng
| Nguồn | Đi kèm (được cài đặt theo mặc định) |
| Đường dẫn |
skills/creative/architecture-diagram ` | | Phiên bản |
1.0.0 ` | | Tác giả | Cocoon AI (hello@cocoon-ai.com), do Đại lý Hermes chuyển đến | | Giấy phép | MIT | | Nền tảng | Linux, macOS, Windows | | Thẻ |
architecture
, `diagrams
, `SVG
,
,
`visualization
,
`infrastructure
,
`cloud
` |
| Kỹ năng liên quan | [XPROTECTX14XPROTECTX](/docs/user-guide/skills/optional/creative/creative-concept-diagrams), [XPROTECTX15XPROTECTX](/docs/user-guide/skills/bundled/creative/creative-excalidraw) |
## Tham khảo: đầy đủ SKILL.md
:::info
Sau đây là định nghĩa kỹ năng đầy đủ mà Hermes tải khi kỹ năng này được kích hoạt. Đây là những gì tác nhân coi là hướng dẫn khi kỹ năng được kích hoạt.
:::
#Kỹ năng sơ đồ kiến trúc
Tạo sơ đồ kiến trúc kỹ thuật theo chủ đề tối, chuyên nghiệp dưới dạng tệp HTML độc lập với đồ họa SVG nội tuyến. Không có công cụ bên ngoài, không có khóa API, không có thư viện kết xuất — chỉ cần viết tệp HTML và mở tệp đó trong trình duyệt.
## Phạm vi`**Thích hợp nhất cho:**
- Kiến trúc hệ thống phần mềm (các lớp frontend/backend/database)
- Cơ sở hạ tầng đám mây (VPC, vùng, mạng con, dịch vụ được quản lý)
- Cấu trúc liên kết microservice/service-mesh
- Cơ sở dữ liệu + Bản đồ API, sơ đồ triển khai
- Bất cứ thứ gì có chủ đề công nghệ-hồng ngoại phù hợp với thẩm mỹ tối, có lưới`**Trước tiên hãy tìm ở nơi khác để tìm:**
- Vật lý, hóa học, toán học, sinh học hoặc các môn khoa học khác
- Đối tượng vật lý (phương tiện, phần cứng, giải phẫu, mặt cắt)
- Sơ đồ mặt bằng, hành trình kể chuyện, hình ảnh mang tính giáo dục/sách giáo khoa
- Bản phác thảo bảng trắng vẽ tay (xem xét
`excalidraw
)
- Người giải thích hoạt hình (xem xét kỹ năng hoạt hình)
Nếu có sẵn một kỹ năng chuyên biệt hơn cho chủ đề đó, hãy ưu tiên kỹ năng đó. Nếu không phù hợp, kỹ năng này cũng có thể đóng vai trò dự phòng chung cho sơ đồ SVG - đầu ra sẽ chỉ mang tính thẩm mỹ công nghệ tối được mô tả bên dưới.
Dựa trên [Cocoon AI's architecture-diagram-generator](https://GitHub.com/Cocoon-AI/architecture-diagram-generator) (MIT).
## Quy trình làm việc
1. Người dùng mô tả kiến trúc hệ thống của họ (các thành phần, kết nối, công nghệ)
2. Tạo file HTML theo hệ thống thiết kế bên dưới
3. Lưu bằng
`write_file
` vào tệp
.html
` (ví dụ:
~/architecture-diagram.html
)
4. Người dùng mở trong bất kỳ trình duyệt nào - hoạt động ngoại tuyến, không phụ thuộc
### Vị trí đầu ra
Lưu sơ đồ vào đường dẫn do người dùng chỉ định hoặc mặc định vào thư mục làm việc hiện tại:
`
./[project-name]-architecture.html
`
### Xem trước
Sau khi lưu, đề nghị người dùng mở nó:
`
``` bash
# macOS
open ./my-architecture.html
# Linux
xdg-open ./my-architecture.html
`
## Hệ thống thiết kế & Ngôn ngữ hình ảnh
### Bảng màu (Ánh xạ ngữ nghĩa)
Sử dụng các nét tô và nét lục giác
`rgba
` cụ thể để phân loại các thành phần:
| Loại thành phần | Điền (rgba) | Đột quỵ (Hex) |
| :--- | :--- | :--- |
| **Giao diện người dùng** |
rgba(8, 51, 68, 0.4)
` |
#22d3ee
` (lục lam-400) |
| **Phần cuối** |
rgba(6, 78, 59, 0.4)
` |
#34d399
` (ngọc lục bảo-400) |
| **Cơ sở dữ liệu** |
rgba(76, 29, 149, 0.4)
` |
#a78bfa
` (tím-400) |
| **AWS/Đám mây** |
rgba(120, 53, 15, 0.3)
` |
#fbbf24
` (hổ phách-400) |
| **An ninh** |
rgba(136, 19, 55, 0.4)
` |
#fb7185
` (hoa hồng-400) |
| **Xe buýt tin nhắn** |
rgba(251, 146, 60, 0.3)
` |
#fb923c
` (cam-400) |
| **Bên ngoài** |
rgba(30, 41, 59, 0.5)
` |
#94a3b8
` (đá phiến-400) |
### Kiểu chữ & Nền
- **Phông chữ:** JetBrains Mono (Monospace), được tải từ Google Fonts
- **Kích thước:** 12px (Tên), 9px (Nhãn phụ), 8px (Chú thích), 7px (Nhãn nhỏ)
- **Nền:** Slate-950 (
#020617
) với mẫu lưới 40px tinh tế
`svg
<!-- Background Grid Pattern -->
<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
`
## Chi tiết triển khai kỹ thuật
### Kết xuất thành phần
Các thành phần là hình chữ nhật bo tròn (
`rx="6"
) với các nét 1,5px. Để ngăn mũi tên hiển thị qua các vùng tô màu bán trong suốt, hãy sử dụng **kỹ thuật tạo mặt nạ chỉnh lưu kép**:
1. Vẽ một hình chữ nhật nền mờ (
#0f172a
)
2. Vẽ hình chữ nhật theo kiểu bán trong suốt lên trên
### Quy tắc kết nối
- **Z-Order:** Vẽ mũi tên *sớm* trong SVG (sau lưới) để chúng hiển thị phía sau các hộp thành phần
- **Đầu mũi tên:** Được xác định thông qua điểm đánh dấu SVG
- **Luồng bảo mật:** Sử dụng các đường đứt nét màu hoa hồng (
#fb7185
)
- **Ranh giới:**
- *Nhóm bảo mật:* Nét đứt (
`4,4
), màu hồng
- *Vùng:* Nét đứt lớn (
`8,4
), màu hổ phách,
`rx="12"
### Khoảng cách và bố cục hợp lý
- **Chiều cao tiêu chuẩn:** 60px (Dịch vụ); 80-120px (Thành phần lớn)
- **Khoảng cách dọc:** Tối thiểu 40px giữa các thành phần
- **Xe buýt tin nhắn:** Phải được đặt *ở khoảng cách* giữa các dịch vụ, không chồng chéo lên nhau
- **Vị trí chú giải:** **TIÊU CHUẨN.** Phải được đặt bên ngoài tất cả các ô ranh giới. Tính toán tọa độ Y thấp nhất trong tất cả các ranh giới và đặt chú giải bên dưới nó ít nhất 20px.
## Cấu trúc tài liệu
Tệp HTML được tạo tuân theo bố cục gồm bốn phần:
1. **Tiêu đề:** Tiêu đề có chỉ báo dấu chấm nhấp nháy và phụ đề
2. **SVG chính:** Sơ đồ chứa trong thẻ viền tròn
3. **Thẻ tóm tắt:** Một lưới gồm ba thẻ bên dưới sơ đồ để biết chi tiết cấp cao
4. **Chân trang:** Siêu dữ liệu tối thiểu
### Mẫu thẻ thông tin
`
``` html
<div class="card">
<div class="card-header">
<div class="card-dot cyan"></div
<h3Title</h3
</div
<ul
<li• Item one</li
<li• Item two</li
</ul
</div
`
## Yêu cầu đầu ra
- **Tệp đơn:** Một tệp
.html
` độc lập
- **Không phụ thuộc bên ngoài:** Tất cả CSS và SVG phải ở cùng dòng (ngoại trừ Google Fonts)
- **Không có JavaScript:** Sử dụng CSS thuần túy cho mọi hoạt ảnh (như các chấm nhấp nháy)
- **Khả năng tương thích:** Phải hiển thị chính xác trong mọi trình duyệt web hiện đại
## Tham khảo mẫu
Tải mẫu HTML đầy đủ để biết các ví dụ về cấu trúc, CSS và thành phần SVG chính xác:
`
skill_view(name="architecture-diagram", file_path="templates/template.html")
`
``Mẫu chứa các ví dụ hoạt động của mọi loại thành phần (frontend, backend, cơ sở dữ liệu, đám mây, bảo mật), kiểu mũi tên (tiêu chuẩn, nét đứt, cong), nhóm bảo mật, ranh giới vùng và chú giải — hãy sử dụng mẫu này làm tham chiếu cấu trúc của bạn khi tạo sơ đồ.