Sơ đồ PlantUML trong Markdown

943 từ
5 phút
Sơ đồ PlantUML trong Markdown

Hướng dẫn sử dụng biểu đồ PlantUML trong Markdown#

PlantUML là một công cụ mô tả biểu đồ bằng văn bản thuần túy. Chỉ cần viết một đoạn cú pháp có cấu trúc, bạn có thể tạo ra các biểu đồ kỹ thuật phổ biến như biểu đồ tuần tự, biểu đồ lớp, biểu đồ use case, biểu đồ hoạt động và nhiều loại khác.

Công cụ này đặc biệt phù hợp để sử dụng trong blog kỹ thuật và tài liệu dự án:

  • Biểu đồ và nội dung được quản lý phiên bản cùng nhau, thuận tiện cho cộng tác và review
  • Chỉnh sửa biểu đồ chỉ cần thay đổi văn bản, phù hợp với các vòng lặp cập nhật thường xuyên
  • Tích hợp liền mạch với Markdown, giúp tài liệu nhất quán

Trong Thinhem, khối code plantuml sẽ được mã hóa trong giai đoạn build để tạo địa chỉ SVG từ server. Phía client sẽ tự động chuyển đổi nguồn ảnh theo theme sáng/tối, đồng thời hỗ trợ thu phóng, kéo thả và toàn màn hình.

Nếu bạn muốn bắt đầu nhanh, hãy ghi nhớ template tối giản sau:

@startuml
Alice -> Bob: Hello
Bob --> Alice: Hii
@enduml

Ví dụ biểu đồ hoạt động#

@startuml
start
:Người dùng đặt hàng;
if (Còn hàng?) then (Có)
	:Khóa tồn kho;
	:Tạo phiếu thanh toán;
	if (Thanh toán thành công?) then (Có)
		:Tạo phiếu giao hàng;
		:Thông báo kho lấy hàng;
	else (

Ví dụ biểu đồ trạng thái#

@startuml
[*] --> Nháp

Nháp --> ChờDuyệt : Gửi duyệt
ChờDuyệt --> Nháp : Từ chối
ChờDuyệt --> ĐãĐăng : Duyệt thành công
ĐãĐăng --> ĐãLưuTrữ : Lưu trữ khi hết hạn
ĐãĐăng --> Nháp : Rút lại để chỉnh sử

Ví dụ biểu đồ use case#

@startuml
left to right direction
actor Khách
actor NguoiDung as "Người dùng"
actor QuanTriVien as "Quản trị viên"

rectangle "Hệ thống Blog" {
	usecase "Xem bài viết" as UC1
	usecase "Tìm kiếm nội du

Ví dụ biểu đồ thành phần#

@startuml
package "Thinhem Site" {
	[Astro App] as App
	[Markdown Parser] as Parser
	[PlantUML Encoder] as Encoder
	[Theme Switcher] as Theme
	[Search Indexer] as Search
}

cloud "PlantUML Server" as

Ví dụ biểu đồ triển khai#

@startuml
node "Thiết bị người dùng" {
	artifact "Trình duyệt"
}

node "CDN / Edge" {
	artifact "Tài nguyên tĩnh"
}

node "Cloudflare Worker" {
	artifact "SSR Handler"
}

node "Dịch vụ PlantUML" {
	ar

Ví dụ biểu đồ ER#

@startuml
entity User {
	*id : uuid <<PK>>
	--
	username : varchar
	email : varchar
	created_at : datetime
}

entity Post {
	*id : uuid <<PK>>
	--
	author_id : uuid <<FK>>
	title : varchar
	content :

Ví dụ biểu đồ tuần tự (Đăng nhập và làm mới token)#

@startuml
autonumber
actor User as "Người dùng"
participant Web as "Trang frontend"
participant API as "API Gateway"
participant Auth as "Dịch vụ xác thực"
database Redis as "Cache phiên"

"Người dùng

Ví dụ biểu đồ container theo phong cách C4#

@startuml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

Person(user, "Độc giả Blog", "Đọc bài viết và tìm kiếm nội dung")

System_Boundary(system,

Ủng Hộ & Chia Sẻ

Nếu bài viết này giúp ích cho bạn, hãy chia sẻ hoặc ủng hộ nhé!

Tài Trợ
Sơ đồ PlantUML trong Markdown
https://thinhem.id.vn/posts/markdown-plantuml/
Tác Giả
Duy Thịnh
Đăng lúc
2026-04-23
Giấy Phép
CC BY-NC-SA 4.0

Bình Luận

Profile Image of the Author
Duy Thịnh
Hello, I'm Thinhem.
Chào mừng đến với blog của tôi 🎉
Đây là nơi mình sẽ chia sẻ những album, cách sắp xếp và tóm tắt tài liệu hàng ngày và tâm sự của mình, hy vọng chúng sẽ hữu ích cho các bạn :)💖
Âm Nhạc
Ảnh Bìa

Âm Nhạc

Không có bài đang phát

0:00 0:00
Không có lời bài hát
Bạn bè
Bình luận mới nhất
Đang tải...
Danh Mục
Thẻ
Thống Kê Trang Web
Bài Viết
26
Danh Mục
9
Thẻ
83
Tổng Số Từ
46,711
Ngày Hoạt Động
0 ngày
Hoạt Động Gần Nhất
0 ngày trước

Mục Lục