Mermaid là một công cụ mã nguồn mở dựa trên JavaScript cho phép bạn tạo các loại biểu đồ và sơ đồ khác nhau (như biểu đồ luồng, biểu đồ trình tự, biểu đồ Gantt, biểu đồ lớp, v.v.) từ cú pháp văn bản đơn giản. Điều này có nghĩa là thay vì phải sử dụng các công cụ kéo và thả phức tạp, bạn chỉ cần viết code văn bản để mô tả biểu đồ bạn muốn tạo.


Người sáng lập và Năm sáng lập

Người sáng lập của Mermaid là Knut Sveidqvist.

Mermaid được sáng lập vào năm 2015.

https://mermaid.js.org/syntax/flowchart.html

https://www.mermaidchart.com/

Lý do ra đời

Lý do chính khiến Knut Sveidqvist tạo ra Mermaid là để giải quyết một vấn đề phổ biến trong quá trình phát triển phần mềm và tài liệu: việc tạo và duy trì các biểu đồ trở nên cồng kềnh và khó khăn khi cần thay đổi hoặc khi làm việc trong môi trường kiểm soát phiên bản.

Các công cụ tạo biểu đồ truyền thống thường lưu trữ biểu đồ dưới dạng tệp nhị phân (binary files), gây ra các vấn đề như:

  • Khó kiểm soát phiên bản: So sánh sự khác biệt giữa các phiên bản biểu đồ hoặc hợp nhất các thay đổi trở nên phức tạp.
  • Tốn thời gian: Vẽ thủ công hoặc sử dụng giao diện kéo thả có thể mất nhiều thời gian, đặc biệt với các biểu đồ phức tạp.
  • Không linh hoạt: Việc sửa đổi nhỏ trong biểu đồ có thể đòi hỏi phải vẽ lại một phần lớn hoặc toàn bộ.

Mermaid ra đời như một giải pháp để tạo biểu đồ theo "code" (Diagrams as Code), giúp biểu đồ dễ dàng được quản lý, kiểm soát phiên bản, và tích hợp vào quy trình làm việc của nhà phát triển.

Quá trình hình thành và phát triển

Quá trình hình thành và phát triển của Mermaid có thể được tóm tắt như sau:

  • Năm 2015: Khởi đầu và Phát hành ban đầu. Knut Sveidqvist nhận thấy nhu cầu về một công cụ tạo biểu đồ dễ sử dụng và dễ quản lý bằng văn bản. Anh đã phát triển phiên bản đầu tiên của Mermaid và phát hành nó như một dự án mã nguồn mở. Ban đầu, Mermaid tập trung vào các loại biểu đồ cơ bản như biểu đồ luồng và biểu đồ trình tự.
  • Đón nhận và Cộng đồng phát triển. Mermaid nhanh chóng được cộng đồng nhà phát triển đón nhận vì tính tiện lợi và khả năng tích hợp tốt với các công cụ lập trình và tài liệu (như GitHub, GitLab, VS Code, Notion, Obsidian, v.v.). Sự quan tâm của cộng đồng đã thúc đẩy sự phát triển của dự án.
  • Mở rộng các loại biểu đồ. Theo thời gian, Mermaid đã liên tục bổ sung hỗ trợ cho nhiều loại biểu đồ mới, bao gồm biểu đồ Gantt, biểu đồ lớp (class diagrams), biểu đồ trạng thái (state diagrams), biểu đồ hành trình của người dùng (user journey diagrams), biểu đồ bánh (pie charts), và nhiều loại khác. Điều này đã làm cho Mermaid trở thành một công cụ đa năng hơn.
  • Tích hợp rộng rãi. Một trong những yếu tố quan trọng nhất trong sự phát triển của Mermaid là khả năng tích hợp rộng rãi vào nhiều nền tảng và ứng dụng khác nhau. Nhiều trình soạn thảo văn bản, nền tảng tài liệu và hệ thống quản lý mã nguồn đã tích hợp sẵn hoặc cung cấp plugin để hiển thị biểu đồ Mermaid.
  • Phát triển liên tục và Cộng đồng đóng góp. Hiện tại, Mermaid vẫn đang được phát triển tích cực với sự đóng góp của một cộng đồng mã nguồn mở lớn. Các nhà phát triển liên tục cải thiện hiệu suất, thêm tính năng mới, và sửa lỗi để nâng cao trải nghiệm người dùng.

Với sự tiện lợi, khả năng tích hợp cao và cộng đồng mạnh mẽ, Mermaid đã trở thành một công cụ không thể thiếu cho nhiều nhà phát triển, kỹ sư, và người làm tài liệu trên toàn thế giới.



Code:

---
config:
  theme: neutral
  look: neo
  layout: dagre
title: Basic flowchart with Mermaid
---
flowchart TD
 subgraph s1["Flowchart"]
        nDatabase[("Database/Stored Data")]
        nConnector1a(("C1"))
        nConnector1b(("C1"))
        nConnector2(((C2)))
        nSubroutine[["Subroutine/Predifined Process"]]
        nRoundEdges("Node with round edges")
        nDecision{"Decision"}
        nAction["Process/ Action"]
        nTerminal(["Stadium Node: Start/End/Terminal"])
        nInputOutput[/Input/Ouput/]
        nManualInput[\Manual Input/]
        nManualOperation[/Manual Operation\]
        nDecision2{Decision}
        nInitialization{{Initialization/Preparation }}
  end
 subgraph s2["Demo"]
        A([Start]) --> B{{"Initialize Sum = 0, Count = 1"}}
        B --> C[/Read Number/]
        C --> D{Is Number valid?}
        D -- Yes --> E[Add Number to Sum]
        E --> F{{"Increment Count"}}
        F --> G{All numbers processed?}
        D -- No --> G
        G -- No --> C
        G -- Yes --> H[Calculate Average = Sum / Count]
        H --> I([End])
  end
    nTerminal --> nAction
    nAction --> nDecision
    nDecision --> nRoundEdges
    nDecision --> nInputOutput
    nRoundEdges --> nSubroutine
    nSubroutine --> nConnector1a

    nConnector1b --> nDatabase
    nInputOutput --> nDecision2
    nDecision2 --> nManualInput & nManualOperation

    nConnector2 --> nInitialization