{/* 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. */}
Rút tiền
Sơ đồ JSON Excalidraw vẽ tay (vòm, luồng, seq).
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/excalidraw ` | | Phiên bản |
1.0.0 ` | | Tác giả | Đại lý Hermes | | Giấy phép | MIT | | Nền tảng | Linux, macOS, Windows | | Thẻ |
Excalidraw
, `Diagrams
, `Flowcharts
, `Architecture
, `Visualization
,
` |
## 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ơ đồ Excalidraw
Tạo sơ đồ bằng cách viết JSON phần tử Excalidraw tiêu chuẩn và lưu dưới dạng tệp
.excalidraw
. Các tệp này có thể được kéo và thả vào [excalidraw.com](https://excalidraw.com) để xem và chỉnh sửa. Không có tài khoản, không có khóa API, không có thư viện kết xuất -- chỉ có JSON.
## Khi nào nên sử dụng
Tạo các tệp
.excalidraw
` cho sơ đồ kiến trúc, sơ đồ, sơ đồ trình tự, bản đồ khái niệm, v.v. Các tập tin có thể được mở tại excalidraw.com hoặc tải lên để có các liên kết có thể chia sẻ.
## Quy trình làm việc
1. **Tải kỹ năng này** (bạn đã làm rồi)
2. **Viết các phần tử JSON** -- một mảng các đối tượng phần tử Excalidraw
3. **Lưu tệp** bằng
`write_file
` để tạo tệp
.excalidraw
4. **Tùy chọn tải lên** đối với liên kết có thể chia sẻ bằng
`scripts/upload.py
` qua
`terminal
### Lưu sơ đồ
Gói mảng phần tử của bạn trong phong bì
.excalidraw
` tiêu chuẩn và lưu bằng
`write_file
:
``` json
{
"type": "excalidraw",
"version": 2,
"source": "Hermes-agent",
"elements": [ ...your elements array here... ],
"appState": {
"viewBackgroundColor": "#ffffff"
}
}
`
``Lưu vào bất kỳ đường dẫn nào, ví dụ:
~/diagrams/my_diagram.excalidraw
.
### Tải lên để có liên kết có thể chia sẻ
Chạy tập lệnh tải lên (nằm trong thư mục
`scripts/
` của kỹ năng này) qua terminal:
`bash
Python skills/diagramming/excalidraw/scripts/upload.py ~/diagrams/my_diagram.excalidraw
`
``Điều này tải lên excalidraw.com (không cần tài khoản) và in một URL có thể chia sẻ. Yêu cầu gói pip
`cryptography
` (
`pip install cryptography
).
---
## Tham khảo định dạng phần tử
### Trường bắt buộc (tất cả các phần tử)
`type
,
`id
` (chuỗi duy nhất),
`x
,
`y
,
`width
,
`height
### Giá trị mặc định (bỏ qua những giá trị này -- chúng được áp dụng tự động)
-
`strokeColor
:
"#1e1e1e"
-
`backgroundColor
:
"transparent"
-
`fillStyle
:
"solid"
-
`strokeWidth
:
`2
-
`roughness
:
`1
` (vẽ tay)
-
`opacity
:
`100
``Nền canvas có màu trắng.
### Các loại phần tử`**Hình chữ nhật**:
`
``` json
{ "type": "rectangle", "id": "r1", "x": 100, "y": 100, "width": 200, "height": 100 }
`
`
-
`roundness: { "type": 3 }
` cho các góc bo tròn
-
`backgroundColor: "#a5d8ff"
,
`fillStyle: "solid"
` để đổ đầy`**Hình elip**:
`
``` json
{ "type": "ellipse", "id": "e1", "x": 100, "y": 100, "width": 150, "height": 150 }
`
``**Kim cương**:
`
`JSON
{ "type": "diamond", "id": "d1", "x": 100, "y": 100, "width": 150, "height": 150 }
`
``**Hình dạng được gắn nhãn (ràng buộc vùng chứa)** -- tạo thành phần văn bản được liên kết với hình dạng:`> **CẢNH BÁO:** KHÔNG sử dụng
"label": { "text": "..." }
` trên các hình dạng. Đây KHÔNG phải là hợp lệ
> Thuộc tính Excalidraw và sẽ bị bỏ qua một cách âm thầm, tạo ra các hình dạng trống. Bạn PHẢI
> sử dụng phương pháp liên kết vùng chứa bên dưới.
Hình dạng cần
`boundElements
` liệt kê văn bản và văn bản cần
`containerId
` trỏ lại:
`
`JSON
{ "type": "rectangle", "id": "r1", "x": 100, "y": 100, "width": 200, "height": 80,
"roundness": { "type": 3 }, "backgroundColor": "#a5d8ff", "fillStyle": "solid",
"boundElements": [{ "id": "t_r1", "type": "text" }] },
{ "type": "text", "id": "t_r1", "x": 105, "y": 110, "width": 190, "height": 25,
"text": "Hello", "fontSize": 20, "fontFamily": 1, "strokeColor": "#1e1e1e",
"textAlign": "center", "verticalAlign": "middle",
"containerId": "r1", "originalText": "Hello", "autoResize": true }
`
`
- Hoạt động trên hình chữ nhật, hình elip, hình thoi
- Văn bản được Excalidraw tự động căn giữa khi
`containerId
` được đặt
- Văn bản
`x
/
`y
/
`width
/
`height
` là gần đúng -- Excalidraw tính toán lại chúng khi tải
-
`originalText
` phải phù hợp với
``` text
`
- Luôn bao gồm
`fontFamily: 1
` (phông chữ Virgil/vẽ tay)
**Mũi tên được gắn nhãn** -- cách tiếp cận liên kết vùng chứa tương tự:
`
``` json
{ "type": "arrow", "id": "a1", "x": 300, "y": 150, "width": 200, "height": 0,
"points": [[0,0],[200,0]], "endArrowhead": "arrow",
"boundElements": [{ "id": "t_a1", "type": "text" }] },
{ "type": "text", "id": "t_a1", "x": 370, "y": 130, "width": 60, "height": 20,
"text": "connects", "fontSize": 16, "fontFamily": 1, "strokeColor": "#1e1e1e",
"textAlign": "center", "verticalAlign": "middle",
"containerId": "a1", "originalText": "connects", "autoResize": true }
`
``**Văn bản độc lập** (chỉ tiêu đề và chú thích -- không chứa):
`
`JSON
{ "type": "text", "id": "t1", "x": 150, "y": 138, "text": "Hello", "fontSize": 20,
"fontFamily": 1, "strokeColor": "#1e1e1e", "originalText": "Hello", "autoResize": true }
`
`
-
`x
` là cạnh TRÁI. Vào giữa tại vị trí
`cx
:
`x = cx - (text.length * fontSize * 0.5) / 2
- KHÔNG dựa vào
`textAlign
` hoặc
`width
` để định vị`**Mũi tên**:
`
``` json
{ "type": "arrow", "id": "a1", "x": 300, "y": 150, "width": 200, "height": 0,
"points": [[0,0],[200,0]], "endArrowhead": "arrow" }
`
`
-
`points
:
[dx, dy]
` bù trừ từ phần tử
`x
,
`y
-
`endArrowhead
:
`null
` |
"arrow"
` |
"bar"
` |
"dot"
` |
"triangle"
-
`strokeStyle
:
"solid"
` (mặc định) |
"dashed"
` |
"dotted"
### Ràng buộc mũi tên (nối mũi tên với hình dạng)
``` json
{
"type": "arrow", "id": "a1", "x": 300, "y": 150, "width": 150, "height": 0,
"points": [[0,0],[150,0]], "endArrowhead": "arrow",
"startBinding": { "elementId": "r1", "fixedPoint": [1, 0.5] },
"endBinding": { "elementId": "r2", "fixedPoint": [0, 0.5] }
}
`
```fixedPoint
` tọa độ:
`top=[0.5,0]
,
`bottom=[0.5,1]
,
`left=[0,0.5]
,
`right=[1,0.5]
### Thứ tự vẽ (thứ tự z)
- Thứ tự mảng = thứ tự z (đầu = sau, cuối = trước)
- Phát ra dần dần: vùng nền → hình dạng → văn bản bị ràng buộc → mũi tên → hình dạng tiếp theo
- BAD: tất cả các hình chữ nhật, sau đó là tất cả văn bản, rồi tất cả các mũi tên
- TỐT: bg_zone → hình dạng1 → văn bản_for_shape1 → mũi tên1 → mũi tên_nhãn_văn bản → hình dạng2 → văn bản_for_shape2 → ...
- Luôn đặt phần tử văn bản được đóng khung ngay sau hình dạng vùng chứa của nó
### Nguyên tắc định cỡ`**Cỡ chữ:**
-
`fontSize
` tối thiểu: **16** cho nội dung, nhãn, mô tả
-
`fontSize
` tối thiểu: **20** cho tiêu đề và đề mục
-
`fontSize
` tối thiểu: **14** chỉ dành cho chú thích phụ (một cách tiết kiệm)
- KHÔNG BAO GIỜ sử dụng
`fontSize
` dưới 14`**Kích thước phần tử:**
- Kích thước hình dạng tối thiểu: 120x60 đối với hình chữ nhật/hình elip được gắn nhãn
- Để lại khoảng cách tối thiểu 20-30px giữa các phần tử
- Thích ít phần tử hơn, lớn hơn nhiều phần tử nhỏ
### Bảng màu
Xem
`references/colors.md
` để biết bảng màu đầy đủ. Tham khảo nhanh:
| Sử dụng | Tô màu | Hex |
|------|-------------|------|
| Chính / Đầu vào | Xanh nhạt |
#a5d8ff
` |
| Thành công/Đầu ra | Xanh nhạt |
#b2f2bb
` |
| Cảnh báo / Bên ngoài | Màu cam nhạt |
#ffd8a8
` |
| Đang xử lý / Đặc biệt | Tím nhạt |
#d0bfff
` |
| Lỗi / Nghiêm trọng | Đỏ nhạt |
#ffc9c9
` |
| Ghi chú / Quyết định | Vàng nhạt |
#fff3bf
` |
| Lưu trữ / Dữ liệu | Màu xanh nhạt |
#c3fae8
` |
### Mẹo
- Sử dụng bảng màu nhất quán trên toàn sơ đồ
- **Độ tương phản của văn bản là TUYỆT VỜI** -- không bao giờ sử dụng màu xám nhạt trên nền trắng. Màu văn bản tối thiểu trên nền trắng:
#757575
- KHÔNG sử dụng biểu tượng cảm xúc trong văn bản -- chúng không hiển thị bằng phông chữ của Excalidraw
- Để biết sơ đồ chế độ tối, hãy xem
`references/dark-mode.md
- Để biết các ví dụ lớn hơn, xem
`references/examples.md
`