Nhật ký học tập

Mermaid Architecture Trong quá trình làm tài liệu kỹ thuật, việc trình bày kiến trúc hệ thống rõ ràng và dễ hiểu là rất quan trọng. Thay vì dùng PowerPoint hay vẽ tay bằng draw.io, Mermaid Architecture Diagram mang lại một cách viết sơ đồ bằng cú pháp text thuần — gọn gàng, version control tốt, dễ chỉnh sửa và tích hợp vào Markdown. Mermaid giờ đây hỗ trợ vẽ sơ đồ kiến trúc hệ thống (architecture diagram) với các thành phần như API, database, storage, và icon sinh động từ Iconify. Sơ đồ kiến trúc %%{ init: { "theme": "base" } }%% architecture-beta group frontend(cloud)[Frontend App] service web(server)[Web Client] in frontend group backend(cloud)[Backend Service] service api(cloud)[API Gateway] in backend service db(database)[PostgreSQL] in backend web:R -- L:api api:B -- T:db Note : Mình chỉ giải thích 1 số thành phần trong diagram architecture-beta: khai báo một sơ đồ kiến trúc sử dụng cú pháp architecture-beta của Mermaid grou...

Giới thiệu Trong quá trình làm việc với Git, đôi khi git log không đủ trực quan để hiểu các nhánh, commit, merge, rebase… Lúc này, Mermaid Git Graph là một công cụ tuyệt vời để vẽ sơ đồ trực quan từ Git history. Mermaid là một công cụ dạng text-based để vẽ sơ đồ như flowchart, Gantt, sequence diagram… và đặc biệt, hỗ trợ cả gitGraph Ví dụ thêm commit vào branch hiện tại gitGraph commit commit commit gitGraph commit commit commit Switch branch và thêm 1 commit gitGraph commit branch develop commit gitGraph commit branch develop commit Ví dụ gitGraph commit id: "Init" branch feature/login checkout feature/login commit id: "Login UI" commit id: "Login Logic" checkout main merge feature/login gitGraph commit id: "Init" branch feature/login checkout feature/login commit id: "Login UI" commit id: "Login Logic" checkout main merge feature/login Chọn theme p...

Mermaid là gì? Mermaid là một công cụ vẽ sơ đồ và biểu đồ trực quan dựa trên JavaScript, sử dụng cú pháp lấy cảm hứng từ Markdown để tạo và chỉnh sửa các sơ đồ một cách linh hoạt. Với bản phát hành gần đây và sự hỗ trợ trực tiếp trên GitHub, Mermaid đã giúp loại bỏ nhu cầu chèn hình ảnh hoặc đoạn mã cứng trong phần văn bản. Bạn có thể chèn trực tiếp biểu đồ vào nội dung sử dụng cú pháp JavaScript.  Ưu điểm Tích hợp dễ dàng: Bạn có thể dùng trực tiếp trong các công cụ phổ biến như GitHub, GitLab, VS Code, v.v. Dễ dàng tích hợp vào Blogger, Wordpress, website. Hỗ trợ Visual Studio code và một số công cụ khác Sử dụng online tại https://mermaid.live Hỗ trợ nhiều loại sơ đồ: Flowchart, Sequence diagram, Gantt chart, Class diagram, Entity Relationship diagram, v.v.  Các loại Diagram types hỗ trợ Diagram Type Mermaid Syntax Description Flowchart graph TD / graph LR Biểu đồ luồng – mô tả quá trình, điều kiện, luồng ...