Playground¶

Playground dành cho người muốn thử hoặc xuất sơ đồ ngay trong trình duyệt mà không cần cài extension. Bạn có thể soạn mã, xem trước, đổi cách hiển thị và tải kết quả.

Trước khi bắt đầu¶

Bạn cần:

Địa chỉ Code To UML do quản trị viên cung cấp, ví dụ https://code-to-uml.example.
Token truy cập.
Trình duyệt kết nối được tới địa chỉ đó.

Mở Playground tại {SERVER_URL}/playground.

Tạo và xem trước diagram¶

Chọn loại sơ đồ, ví dụ plantuml.
Mở Token, nhập shared rendering token rồi lưu.
Dán mã sơ đồ vào vùng Source.
Chọn Render hoặc chờ preview tự cập nhật.
Kiểm tra hình và cảnh báo bên dưới preview.

Ví dụ PlantUML:

@startuml
Alice -> Bob: Request review
Bob --> Alice: Approved
@enduml

Kết quả mong đợi: preview hiển thị sequence diagram và không có cảnh báo chặn render.

Để thử Mermaid, chọn mermaid rồi dùng:

flowchart LR
  Source --> Gateway
  Gateway --> Diagram

Khi đổi loại sơ đồ, Playground khôi phục bản nháp gần nhất của loại đó. Hãy kiểm tra lại mã trước khi render vì mỗi loại dùng cú pháp riêng.

Điều chỉnh cách hiển thị¶

Chọn chế độ phù hợp:

%%krokup khi mã sơ đồ đã chứa dòng tùy chọn.
Fenced block khi muốn nhập tùy chọn giống dòng mở Markdown fence.

Ví dụ với %%krokup:

%%krokup {theme=corporate scale=1.5 direction=lr}
@startuml
Alice -> Bob: Review
@enduml

Trong chế độ Fenced block, giữ vùng Source chỉ chứa phần thân sơ đồ và nhập {theme=dark scale=2} vào ô Params. Playground sẽ áp dụng các tùy chọn đó khi render.

Các mục theme, scale, background, direction và padding chỉ có tác dụng khi loại sơ đồ hoặc định dạng hỗ trợ. Xem Diagram Customization để chọn cú pháp và xử lý cảnh báo.

Xem diagram lớn¶

Dùng zoom, pan và Fit để thay đổi góc nhìn trong trình duyệt. Những thao tác này không sửa mã sơ đồ và không thay đổi kích thước file export.

Tải diagram¶

Kiểm tra preview đã đúng.
Mở Export.
Chọn định dạng được Playground cung cấp.
Nếu cần, chọn background white, black hoặc transparent.
Tải file và mở lại để kiểm tra.

Định dạng phụ thuộc loại sơ đồ. Không phải loại nào cũng hỗ trợ đủ SVG, PNG và PDF. Background trong hộp Export áp dụng lên file cuối, độc lập với option background trong mã sơ đồ.

Dữ liệu được giữ trong trình duyệt¶

Playground giữ token trong sessionStorage của tab và giữ bản nháp theo loại sơ đồ trong localStorage. Đóng tab sẽ xóa token nhưng không tự xóa bản nháp. Không dùng máy dùng chung cho nội dung nhạy cảm nếu chưa xóa dữ liệu trình duyệt.

Xử lý sự cố¶

Hiện tượng	Cách xử lý
`401`	Mở Token và nhập lại token truy cập
`404`	Kiểm tra loại sơ đồ và định dạng đang chọn
`429`	Chờ theo thời gian được thông báo rồi render lại
`504`	Giảm độ phức tạp hoặc thử lại sau
Preview không đổi	Kiểm tra cảnh báo, token và kết nối tới Code To UML
Option không có tác dụng	Kiểm tra hỗ trợ trong Diagram Customization
Kết quả quá lớn	Giảm scale, width, height hoặc padding