Dùng ChatGPT để vẽ flow bằng mermaid?

[ltd (Lê Trần Đạt)]

Đây là một bài hướng dẫn rất thực dụng giúp mọi người có thể dùng chatGPT để vẽ biểu đồ(flowchart/diagram) dùng trong công việc và học tập.

Tại sao?

Lúc học hoặc làm việc mình nên vẽ hình ra để hiểu và truyền đạt kiến thức dễ dàng hơn. Nhưng vẽ thì mất thời gian, mình nên tận dụng AI để giúp mình trong việc đó.

Làm như thế nào?

Mình cần phải học 1 ít về mermaid. Sau đó mình dùng chatGPT để giúp mình generate ra flowchart/diagram.

Đầu tiên, nói với chatGPT thế này, viết bằng tiếng Việt cũng được nhé.

You are an AI mermaid writter, you know a lot about mermaid, you like coloring things to make it clearer to viewers. Your diagram / flow chart are easier to understand to other engineers. Help me to draw a diagram using mermaid

Sau đó nói thế này

Draw a diagram of a system where we have Jenkins for every 3 minutes, trigger a job called downloader which will go to AWS and download information about resources are used in our system.
Then the downloader pass the information to processor who processed the data and index it into EslasticSearch for other system to use.
Remember to color each component differently

Kết quả

Bước 1: Ra gần đúng, mình cần sửa lại một tí

graph LR
    style A fill:#f9d6c1,stroke:#333,stroke-width:2px;
    style B fill:#c1f9d6,stroke:#333,stroke-width:2px;
    style C fill:#d6c1f9,stroke:#333,stroke-width:2px;
    style D fill:#c1d6f9,stroke:#333,stroke-width:2px;
    style E fill:#f9c1f9,stroke:#333,stroke-width:2px;

    A[Jenkins] -- every 3 minutes --> B[Downloader]
    B -- download information from AWS --> C[Processor]
    C -- index data to --> D[ElasticSearch]

Bước 2: Dùng mermaid editor để sửa lại hình

Sửa lại chỗ thiếu là node E

graph LR
    style A fill:#f9d6c1,stroke:#333,stroke-width:2px;
    style B fill:#c1f9d6,stroke:#333,stroke-width:2px;
    style C fill:#d6c1f9,stroke:#333,stroke-width:2px;
    style D fill:#c1d6f9,stroke:#333,stroke-width:2px;
    style E fill:#f9c1f9,stroke:#333,stroke-width:2px;

    A[Jenkins] -- every 3 minutes --> B[Downloader]
    E[AWS] --> |download information from AWS| B
    B -- AWS Information --> C[Processor]
    C -- index data to --> D[ElasticSearch]

Kết quả cuối cùng

Disclaimer

Mình lười không tìm nhiều từ vựng tiếng việt nên dùng tiếng anh trong một số chỗ, mong mọi người bỏ qua.

[ltd (Lê Trần Đạt)]

Còn đây là kết quả khi mình kêu chatGPT generate example

graph TD
    A[Mermaid's Daily Routine] --> B[Wake up]
    B --> C[Eat Breakfast]
    C --> D[Grooming]
    D --> E1[Singing Lessons]
    D --> E2[Swimming]
    D --> E3[Explore the Ocean]
    E1 --> F[Socializing with other mermaids]
    E2 --> F
    E3 --> F
    F --> G[Eat Dinner]
    G --> H[Attend Ocean Events]
    H --> I[Sleep]

[ltd (Lê Trần Đạt)]

Update, một version khác dùng chatGPT + Diagram as code được một reader generate ra, mình share luôn ở đây

[ltd (Lê Trần Đạt)]

Môt ví dụ khác khi mình đang học về AWS ALB, mình dùng chatGPT để generate cái này học cho lẹ

prompt

draw mermaid diagram showing AWS ALB can route traffice to multiple target groups and health checks are at the target group level

let’s add more information about the routing condition