{/* 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ơ đồ khái niệm

Tạo sơ đồ SVG phẳng, nhận biết sáng/tối tối thiểu dưới dạng tệp HTML độc lập, sử dụng ngôn ngữ hình ảnh giáo dục thống nhất với 9 dải màu ngữ nghĩa, kiểu chữ viết hoa chữ thường và chế độ tối tự động. Phù hợp nhất cho hình ảnh giáo dục và phi phần mềm — thiết lập vật lý, cơ chế hóa học, đường cong toán học, vật thể vật lý (máy bay, tua-bin, điện thoại thông minh, đồng hồ cơ), giải phẫu, sơ đồ tầng, mặt cắt, hành trình kể chuyện (vòng đời của X, quy trình của Y), tích hợp hệ thống nan hoa (thành phố thông minh, IoT) và chế độ xem lớp bùng nổ. Nếu chủ đề tồn tại một kỹ năng chuyên biệt hơn (phần mềm/kiến trúc đám mây chuyên dụng, bản phác thảo vẽ tay, người giải thích hoạt hình, v.v.), hãy ưu tiên điều đó - nếu không, kỹ năng này cũng có thể đóng vai trò như một dự phòng sơ đồ SVG cho mục đích chung với giao diện mang tính giáo dục rõ ràng. Đi kèm với 15 sơ đồ mẫu.

Siêu dữ liệu kỹ năng


Nguồn	Tùy chọn — cài đặt với
`Hermes skills install official/creative/concept-diagrams
`
Đường dẫn

optional-skills/creative/concept-diagrams ` | | Phiên bản |

diagrams

, `svg

, `visualization

, `education

, `physics

, `chemistry

, engineering | | Kỹ năng liên quan | XPROTECTX21XPROTECTX, XPROTECTX22XPROTECTX, generative-widgets |

Tham khảo: đầy đủ SKILL.md

thông tin

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.

Sơ đồ khái niệm

Tạo sơ đồ SVG chất lượng sản xuất với hệ thống thiết kế tối giản, phẳng thống nhất. Đầu ra là một tệp HTML độc lập duy nhất hiển thị giống hệt nhau trong bất kỳ trình duyệt hiện đại nào, với chế độ sáng/tối tự động.

Phạm vi`Thích hợp nhất cho:

Thiết lập vật lý, cơ chế hóa học, đường cong toán học, sinh học
Vật thể vật lý (máy bay, tua-bin, điện thoại thông minh, đồng hồ cơ, tế bào)
Giải phẫu, mặt cắt, chế độ xem lớp bùng nổ
Sơ đồ mặt bằng, chuyển đổi kiến trúc
Hành trình tường thuật (vòng đời của X, quá trình của Y)
Tích hợp hệ thống hub-spoke (thành phố thông minh, mạng IoT, lưới điện)
Hình ảnh mang phong cách giáo dục/sách giáo khoa trong bất kỳ lĩnh vực nào
Biểu đồ định lượng (thanh nhóm, hồ sơ năng lượng)

Trước tiên hãy tìm ở nơi khác để tìm:

Kiến trúc cơ sở hạ tầng phần mềm / đám mây chuyên dụng với tính thẩm mỹ công nghệ tối (xem xét architecture-diagram nếu có)
Bản phác thảo bảng trắng vẽ tay (xem xét excalidraw nếu có)
Người giải thích hoạt hình hoặc đầu ra video (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ó thể đóng vai trò như một bản dự phòng sơ đồ SVG cho mục đích chung - đầu ra sẽ mang tính thẩm mỹ giáo dục rõ ràng được mô tả bên dưới, đây là một mặc định hợp lý cho hầu hết mọi chủ đề.

Quy trình làm việc

Quyết định loại sơ đồ (xem Loại sơ đồ bên dưới).
Bố trí các thành phần bằng cách sử dụng các quy tắc của Hệ thống thiết kế.
Viết trang HTML đầy đủ bằng cách sử dụng templates/template.html làm trình bao bọc - dán SVG của bạn vào nơi mẫu ghi

. 4. Lưu dưới dạng tệp

.html ` độc lập (ví dụ:

~/my-diagram.html ` hoặc

./my-diagram.html

). 5. Người dùng mở nó trực tiếp trong trình duyệt - không cần máy chủ, không phụ thuộc.

Tùy chọn: nếu người dùng muốn có một thư viện có thể duyệt gồm nhiều sơ đồ, hãy xem "Máy chủ xem trước cục bộ" ở phía dưới.

Tải mẫu HTML:

skill_view(name="concept-diagrams", file_path="templates/template.html")

``Mẫu nhúng hệ thống thiết kế CSS đầy đủ (các lớp màu c-*

, các lớp văn bản, các biến sáng/tối, kiểu đánh dấu mũi tên). SVG bạn tạo phụ thuộc vào các lớp này có trên trang lưu trữ.

Hệ thống thiết kế`###Triết học

Phẳng: không có hiệu ứng chuyển màu, đổ bóng, làm mờ, phát sáng hoặc hiệu ứng neon.
Tối thiểu: thể hiện những điều thiết yếu. Không có biểu tượng trang trí bên trong hộp.
Nhất quán: cùng màu sắc, khoảng cách, kiểu chữ và độ rộng nét trên mọi sơ đồ.
Sẵn sàng cho chế độ tối: tất cả các màu tự động điều chỉnh thông qua các lớp CSS — không có SVG cho mỗi chế độ.

Bảng màu`9 dốc màu, mỗi dốc có 7 điểm dừng. Đặt tên lớp trên

<g> hoặc phần tử hình dạng; CSS mẫu xử lý cả hai chế độ.| Lớp | 50 (nhẹ nhất) | 100 | 200 | 400 | 600 | 800 | 900 (tối nhất) | |----------||---------------|---------|----------|----------|----------|----------|---------------| | c-purple | #EEEDFE | #CECBF6 | #AFA9EC | #7F77DD | #534AB7 | #3C3489 | #26215C | | c-teal | #E1F5EE | #9FE1CB | #5DCAA5 | #1D9E75 | #0F6E56 | #085041 | #04342C | | c-coral | #FAECE7 | #F5C4B3 | #F0997B | #D85A30 | #993C1D | #712B13 | #4A1B0C | | c-pink | #FBEAF0 | #F4C0D1 | #ED93B1 | #D4537E | #993556 | #72243E | #4B1528 | | c-gray | #F1EFE8 | #D3D1C7 | #B4B2A9 | #888780 | #5F5E5A | #444441 | #2C2C2A | | c-blue | #E6F1FB | #B5D4F4 | #85B7EB | #378THÊM | #185FA5 | #0C447C | #042C53 | | c-green | #EAF3DE | #C0DD97 | #97C459 | #639922 | #3B6D11 | #27500A | #173404 | | c-amber | #FAEEDA | #FAC775 | #EF9F27 | #BA7517 | #854F0B | #633806 | #412402 | | c-red ` | #FCEBEB | #F7C1C1 | #F09595 | #E24B4A | #A32D2D | #791F1F | #501313 |

Quy tắc gán màu

Màu sắc mã hóa ý nghĩa chứ không phải trình tự. Đừng bao giờ chuyển đổi màu sắc như cầu vồng.

Nhóm các nút theo danh mục — tất cả các nút cùng loại đều có chung một màu.
Sử dụng c-gray cho các nút trung tính/cấu trúc (bắt đầu, kết thúc, các bước chung, người dùng).
Sử dụng 2-3 màu cho mỗi sơ đồ, không phải 6+.
Ưu tiên `c-purple

, `c-teal

, `c-coral

, c-pink cho các danh mục chung.

Dự trữ `c-blue

, `c-green

, `c-amber

, c-red cho ý nghĩa ngữ nghĩa (thông tin, thành công, cảnh báo, lỗi).

Ánh xạ dừng sáng/tối (được xử lý bởi CSS mẫu - chỉ cần sử dụng lớp):

Chế độ ánh sáng: 50 fill + 600 nét + 800 tiêu đề/600 phụ đề
Chế độ tối: 800 tô + 200 nét + 100 tiêu đề / 200 phụ đề

Kiểu chữ

Chỉ có hai cỡ chữ. Không có ngoại lệ.

Lớp	Kích thước	Cân nặng	Sử dụng

`th
`	14px	500	Tiêu đề nút, nhãn vùng

` | 12px | 400 | Phụ đề, mô tả, nhãn mũi tên |
| 
`t
` | 14px | 400 | Văn bản chung |
- **Luôn luôn viết hoa.** Không bao giờ viết hoa tiêu đề, không bao giờ viết hoa TẤT CẢ.

- Mỗi 

&lt;text>
` PHẢI mang một lớp (
`t

, 
``` ts
` hoặc 
`th

). Không có văn bản chưa được phân loại.

- 
`dominant-baseline="central"
` trên tất cả văn bản bên trong các hộp.
- 
`text-anchor="middle"
` cho văn bản được căn giữa trong hộp.

**Ước tính chiều rộng (xấp xỉ):**
- 14px có trọng lượng 500: ~8px mỗi ký tự
- 12px có trọng lượng 400: ~6,5px mỗi ký tự
- Luôn xác minh: 
`box_width >= (char_count × px_per_char) + 48
` (đệm 24px mỗi bên)

### Khoảng cách & Bố cục
- **ViewBox**: 
`viewBox="0 0 680 H"
` trong đó H = chiều cao nội dung + vùng đệm 40px.
- **Vùng an toàn**: x=40 đến x=640, y=40 đến y=(H-40).
- **Giữa các ô**: Khoảng cách tối thiểu 60px.
- **Hộp bên trong**: khoảng đệm ngang 24px, khoảng đệm dọc 12px.
- **Khoảng cách đầu mũi tên**: 10px giữa đầu mũi tên và cạnh hộp.
- **Hộp một dòng**: chiều cao 44px.
- **Hộp hai dòng**: chiều cao 56px, khoảng cách giữa đường cơ sở của tiêu đề và phụ đề là 18px.
- **Phần đệm vùng chứa**: tối thiểu 20px bên trong mỗi vùng chứa.
- **Lồng tối đa**: sâu 2-3 cấp. Sâu hơn không thể đọc được ở chiều rộng 680px.

### Nét & Hình dạng
- **Độ rộng nét**: 0,5px trên tất cả các viền nút. Không phải 1px, không phải 2px.
- **Làm tròn hình chữ nhật**: 
`rx="8"
` cho các nút, 
`rx="12"
` cho các vùng chứa bên trong, 
`rx="16"
` đến 
`rx="20"
` cho các vùng chứa bên ngoài.
- **Đường dẫn kết nối**: PHẢI có 
`fill="none"

. SVG mặc định là 
`fill: black
` nếu không.

### Điểm đánh dấu mũi tên

Bao gồm khối 

&lt;defs>
` này khi bắt đầu **mọi** SVG:

`xml
&lt;defs
  &lt;marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5"
          markerWidth="6" markerHeight="6" orient="auto-start-reverse"
    <path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke"
          stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  &lt;/marker
&lt;/defs

`
``Sử dụng 
`marker-end="url(#arrow)"
` trên đường dây. Đầu mũi tên kế thừa màu đường thông qua 
`context-stroke

.

### Các lớp CSS (Được cung cấp bởi Mẫu)

Trang mẫu cung cấp:
- Văn bản: 

.t

, 

.ts

, 

.th

- Trung tính: 

.box

, 

.arr

, 

.leader

, 

.node

- Dải màu: 

.c-purple

, 

.c-teal

, 

.c-coral

, 

.c-pink

, 

.c-gray

, 

.c-blue

, 

.c-green

, 

.c-amber

, 

.c-red
` (tất cả đều có chế độ sáng/tối tự động)

Bạn **không** cần xác định lại những điều này - chỉ cần áp dụng chúng trong SVG của bạn. Tệp mẫu chứa các định nghĩa CSS đầy đủ.

---

## Bản soạn sẵn SVGMọi SVG bên trong trang mẫu đều bắt đầu bằng cấu trúc chính xác này:

`xml
&lt;svg width="100%" viewBox="0 0 680 \&#123;HEIGHT&#125;" xmlns="http://www.w3.org/2000/svg">
  &lt;defs>
    &lt;marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5"
            markerWidth="6" markerHeight="6" orient="auto-start-reverse"
      <path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke"
            stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    &lt;/marker
  &lt;/defs>`&lt;!-- Diagram content here -->`&lt;/svg>

`
``Thay thế 

\&#123;HEIGHT&#125;
` bằng chiều cao tính toán thực tế (phần tử cuối cùng dưới cùng + 40px).

### Mẫu nút`**Nút một dòng (44px):**

`
`xml
&lt;g class="node c-blue"
  <rect x="100" y="20" width="180" height="44" rx="8" stroke-width="0.5"/>
  &lt;text class="th" x="190" y="42" text-anchor="middle" dominant-baseline="central"Service name&lt;/text
&lt;/g

`
``**Nút hai dòng (56px):**

`
`xml
&lt;g class="node c-teal"
  <rect x="100" y="20" width="200" height="56" rx="8" stroke-width="0.5"/>
  &lt;text class="th" x="200" y="38" text-anchor="middle" dominant-baseline="central"Service name&lt;/text
  &lt;text class="ts" x="200" y="56" text-anchor="middle" dominant-baseline="central"Short description&lt;/text
&lt;/g

`
``**Đầu nối (không có nhãn):**

`
`xml
&lt;line x1="200" y1="76" x2="200" y2="120" class="arr" marker-end="url(#arrow)"/

`
``**Vùng chứa (nét đứt hoặc liền nét):**

`
`xml
&lt;g class="c-purple"
  <rect x="40" y="92" width="600" height="300" rx="16" stroke-width="0.5"/>
  &lt;text class="th" x="66" y="116"Container label&lt;/text
  &lt;text class="ts" x="66" y="134"Subtitle info&lt;/text
&lt;/g

`

---

## Các loại sơ đồ

Chọn bố cục phù hợp với chủ đề:
1. **Sơ đồ quy trình** — Quy trình CI/CD, vòng đời yêu cầu, quy trình phê duyệt, xử lý dữ liệu. Luồng một chiều (từ trên xuống hoặc trái-phải). Tối đa 4-5 nút mỗi hàng.
2. **Cấu trúc / Ngăn chặn** — Lồng ghép cơ sở hạ tầng đám mây, kiến ​​trúc hệ thống với các lớp. Thùng chứa lớn bên ngoài với các khu vực bên trong. Đường nét đứt cho các nhóm hợp lý.
3. **API / Bản đồ điểm cuối** — Các tuyến REST, lược đồ GraphQL. Cây từ gốc, phân nhánh tới các nhóm tài nguyên, mỗi nhóm chứa các nút điểm cuối.
4. **Cấu trúc liên kết vi dịch vụ** — Lưới dịch vụ, hệ thống hướng sự kiện. Các dịch vụ như các nút, mũi tên cho mô hình giao tiếp, hàng đợi tin nhắn giữa.
5. **Luồng dữ liệu** — Đường dẫn ETL, kiến ​​trúc phát trực tuyến. Luồng từ trái sang phải từ nguồn thông qua xử lý đến bồn.
6. **Vật lý / Kết cấu** — Xe cộ, tòa nhà, phần cứng, giải phẫu. Sử dụng các hình dạng phù hợp với hình dạng vật lý — 

&lt;path>
` cho phần thân cong, 

&lt;polygon>
` cho hình dạng côn, 

&lt;ellipse>

/

&lt;circle>
` cho các bộ phận hình trụ, 

&lt;rect>
` lồng nhau cho các ngăn. Xem 
`references/physical-shape-cookbook.md

.
7. **Tích hợp cơ sở hạ tầng / hệ thống** — Thành phố thông minh, mạng IoT, hệ thống đa miền. Bố trí dạng nan hoa với nền tảng trung tâm kết nối các hệ thống con. Các kiểu dòng ngữ nghĩa (

.data-line

, 

.power-line

, 

.water-pipe

, 

.road

). Xem 
`references/infrastructure-patterns.md

.
8. **Mô hình giao diện người dùng / bảng điều khiển** — Bảng quản trị, bảng thông tin giám sát. Khung màn hình với các thành phần biểu đồ/thước đo/chỉ báo lồng nhau. Xem 
`references/dashboard-patterns.md

.

Đối với sơ đồ vật lý, cơ sở hạ tầng và bảng điều khiển, hãy tải tệp tham chiếu phù hợp trước khi tạo - mỗi tệp cung cấp các lớp CSS và hình dạng nguyên thủy được tạo sẵn.

---

## Danh sách kiểm tra xác thực

Trước khi hoàn thiện bất kỳ SVG nào, hãy xác minh TẤT CẢ những điều sau:
1. Mỗi 

&lt;text>
` đều có lớp 
`t

, 
``` ts
` hoặc 
`th

.

2. Mỗi 

&lt;text>
` bên trong hộp đều có 
`dominant-baseline="central"

.
3. Mỗi đầu nối 

&lt;path>
` hoặc 

&lt;line>
` được sử dụng làm mũi tên đều có 
`fill="none"

.
4. Không có đường mũi tên nào đi qua ô không liên quan.
5. 
`box_width >= (longest_label_chars × 8) + 48
` cho văn bản 14px.
6. 
`box_width >= (longest_label_chars × 6.5) + 48
` cho văn bản 12px.
7. Chiều cao của ViewBox = phần tử dưới cùng + 40px.
8. Tất cả nội dung nằm trong khoảng x=40 đến x=640.
9. Các lớp màu (
`c-*

) có trên 

&lt;g>
` hoặc các thành phần hình dạng, không bao giờ có trên đầu nối 

&lt;path>

.
10. Có khối mũi tên 

&lt;defs>

.
11. Không có hiệu ứng chuyển màu, đổ bóng, làm mờ hoặc phát sáng.
12. Độ rộng nét là 0,5px trên tất cả các viền nút.

---

## Xuất & Xem trước

### Mặc định: tệp HTML độc lập

Viết một tệp 

.html
` mà người dùng có thể mở trực tiếp. Không có máy chủ, không phụ thuộc, hoạt động ngoại tuyến. mẫu:

``` python

# 1. Load the template
template = skill_view("concept-diagrams", "templates/template.html")

# 2. Fill in title, subtitle, and paste your SVG
html = template.replace(
    "&lt;!-- DIAGRAM TITLE HERE -->", "SN2 reaction mechanism"
).replace(
    "&lt;!-- OPTIONAL SUBTITLE HERE -->", "Bimolecular nucleophilic substitution"
).replace(
    "&lt;!-- PASTE SVG HERE -->", svg_content
)

# 3. Write to a user-chosen path (or ./ by default)
write_file("./sn2-mechanism.html", html)

`
``Cho người dùng biết cách mở nó:

`
# macOS
open ./sn2-mechanism.html
# Linux
xdg-open ./sn2-mechanism.html

`

### Tùy chọn: máy chủ xem trước cục bộ (thư viện đa sơ đồ)

Chỉ sử dụng điều này khi người dùng rõ ràng muốn có một thư viện có thể duyệt được gồm nhiều sơ đồ.

**Quy tắc:**
- Chỉ liên kết với 
`127.0.0.1

. Không bao giờ 
`0.0.0.0

. Việc hiển thị sơ đồ trên tất cả các giao diện mạng là một mối nguy hiểm về bảo mật trên các mạng dùng chung.
- Chọn một cổng miễn phí (KHÔNG mã hóa cứng một cổng) và cho người dùng biết URL đã chọn.
- Máy chủ là tùy chọn và được chọn tham gia — trước tiên hãy ưu tiên tệp HTML độc lập.

Mẫu được đề xuất (cho phép HĐH chọn một cổng phù du miễn phí):

``` bash

# Put each diagram in its own folder under .diagrams/
mkdir -p .diagrams/sn2-mechanism
# ...write .diagrams/sn2-mechanism/index.html...

# Serve on loopback only, free port
cd .diagrams && Python3 -c "
 import http.server, socketserver
with socketserver.TCPServer(('127.0.0.1', 0), http.server.SimpleHTTPRequestHandler) as s:
    print(f'Serving at http://127.0.0.1:\&#123;s.server_address[1]&#125;/')
    s.serve_forever()
" &

`
``Nếu người dùng muốn có một cổng cố định, hãy sử dụng 
`127.0.0.1:&lt;port

 - vẫn không bao giờ sử dụng 
`0.0.0.0

. Ghi lại cách dừng máy chủ (
`kill %1
` hoặc 
`pkill -f "http.server"

).

---

## Ví dụ Tham khảo

Thư mục 
`examples/
` chứa 15 sơ đồ hoàn chỉnh đã được thử nghiệm. Duyệt qua chúng để tìm các mẫu hoạt động trước khi viết sơ đồ mới thuộc loại tương tự:| Tập tin | Loại | Chứng minh |
|------|------|--------------|
| 
`hospital-emergency-department-flow.md
` | Sơ đồ | Định tuyến ưu tiên với màu sắc ngữ nghĩa |
| 
`feature-film-production-pipeline.md
` | Sơ đồ | Quy trình làm việc theo từng giai đoạn, luồng phụ theo chiều ngang |
| 
`automated-password-reset-flow.md
` | Sơ đồ | Luồng xác thực có các nhánh lỗi |
| 
`autonomous-LLM-research-agent-flow.md
` | Sơ đồ | Mũi tên quay ngược, nhánh quyết định |
| 
`place-order-uml-sequence.md
` | Trình tự | Kiểu sơ đồ trình tự UML |
| 
`commercial-aircraft-structure.md
` | Vật lý | Đường dẫn, đa giác, hình elip cho hình dạng thực tế |
| 
`wind-turbine-structure.md
` | Mặt cắt vật lý | Phân tách ngầm/trên mặt đất, mã màu |
| 
`smartphone-layer-anatomy.md
` | Chế độ xem bùng nổ | Các nhãn trái/phải xen kẽ, các thành phần xếp lớp |
| 
`apartment-floor-plan-conversion.md
` | Sơ đồ mặt bằng | Tường, cửa, đề xuất thay đổi chấm đỏ |
| 
`banana-journey-tree-to-smoothie.md
` | Hành trình kể chuyện | Con đường quanh co, thay đổi trạng thái lũy tiến |
| 
`cpu-ooo-microarchitecture.md
` | Đường ống phần cứng | Fan-out, thanh bên phân cấp bộ nhớ |
| 
`sn2-reaction-mechanism.md
` | Hóa học | Phân tử, mũi tên cong, hồ sơ năng lượng |
| 
`smart-city-infrastructure.md
` | Hub-nói | Kiểu dòng ngữ nghĩa trên mỗi hệ thống |
| 
`electricity-grid-flow.md
` | Dòng chảy nhiều giai đoạn | Phân cấp điện áp, đánh dấu dòng chảy |
| 
`ml-benchmark-grouped-bar-chart.md
` | Biểu đồ | Thanh nhóm, trục kép |

Tải bất kỳ ví dụ nào với:

`

skill_view(name="concept-diagrams", file_path="examples/&lt;filename")

`

---

## Tham khảo nhanh: Sử dụng cái gì khi nào

| Người dùng nói | Loại sơ đồ | Màu sắc gợi ý |
|----------||--------------|-------------------|
| "hiển thị đường ống" | Sơ đồ | bắt đầu/kết thúc màu xám, các bước màu tím, lỗi màu đỏ, triển khai màu xanh mòng két |
| "vẽ luồng dữ liệu" | Đường dẫn dữ liệu (trái-phải) | nguồn màu xám, chế biến màu tím, bồn rửa màu xanh mòng két |
| "hình dung hệ thống" | Kết cấu (ngăn chặn) | container tím, dịch vụ mòng két, dữ liệu san hô |
| "ánh xạ các điểm cuối" | Cây API | gốc màu tím, một đoạn đường nối cho mỗi nhóm tài nguyên |
| "hiển thị các dịch vụ" | Cấu trúc liên kết microservice | xâm nhập màu xám, dịch vụ mòng két, xe buýt màu tím, công nhân san hô |
| "vẽ máy bay/phương tiện" | Vật lý | đường dẫn, đa giác, hình elip cho các hình dạng thực tế |
| "thành phố thông minh/IoT" | Tích hợp trung tâm | kiểu dòng ngữ nghĩa trên mỗi hệ thống con |
| "hiển thị bảng điều khiển" | Mô hình giao diện người dùng | màn hình tối, màu biểu đồ: xanh mòng két, tím, san hô để cảnh báo |
| "lưới điện / điện" | Dòng chảy nhiều giai đoạn | phân cấp điện áp (trọng số đường dây HV/MV/LV) |
| "tuabin gió/tua bin" | Mặt cắt vật lý | móng + tháp cắt + vỏ bọc màu |
| “hành trình của X/vòng đời” | Hành trình kể chuyện | con đường quanh co, thay đổi trạng thái lũy tiến |
| "lớp X / phát nổ" | Chế độ xem lớp nổ | ngăn xếp dọc, nhãn xen kẽ |
| "CPU / đường ống" | Đường ống phần cứng | các tầng dọc, phân nhánh đến các cổng thực thi |
| "sơ đồ mặt bằng / căn hộ" | Sơ đồ mặt bằng | tường, cửa, đề xuất thay đổi chấm đỏ |
| "cơ chế phản ứng" | Hóa học | nguyên tử, liên kết, mũi tên cong, trạng thái chuyển tiếp, hồ sơ năng lượng |

Siêu dữ liệu kỹ năng​

Tham khảo: đầy đủ SKILL.md​

Sơ đồ khái niệm

Phạm vi`Thích hợp nhất cho:​

Quy trình làm việc​

Hệ thống thiết kế`###Triết học​

Bảng màu`9 dốc màu, mỗi dốc có 7 điểm dừng. Đặt tên lớp trên​

Quy tắc gán màu​

Kiểu chữ​

Siêu dữ liệu kỹ năng

Tham khảo: đầy đủ SKILL.md

Phạm vi`Thích hợp nhất cho:

Quy trình làm việc

Hệ thống thiết kế`###Triết học

Bảng màu`9 dốc màu, mỗi dốc có 7 điểm dừng. Đặt tên lớp trên

Quy tắc gán màu

Kiểu chữ