สร้าง Excalidraw diagram สำหรับ Side-Project เวลาคิดไม่ออก โดยไปถาม GenAI ให้สร้าง Mermaid ให้หน่อย

สวัสดีครับทุกคน บทความนี้จะเป็นบทความสั้น ๆ ที่จะมาแชร์ทริคอะไรซักเล็กน้อยนะครับ เรื่องมีอยู่ว่าผมเป็นคนที่ใช้ Excalidraw บ่อย แต่ว่าโดยส่วนมากก็จะสร้างนู่นนี่เองอ่ะนะ แต่ว่ามันมีตัวนี้อยู่ครับ Mermaid to Excalidraw ที่ทำให้เรา transform สิ่งที่คิดออกมาเป็น Diagram ก็จะลดระยะเวลาลงไป

Excalidraw - Collaborative whiteboarding made easy

คราวนี้ไอเจ้า Mermaid to Excalidraw เนี่ย ไม่ได้เกี่ยวอะไรกับ AI แต่มันแค่เปลี่ยน Mermaid ไปเป็น Excalidraw เฉย ๆ

ก็ใช้ ChatGPT/Gemini สร้าง Mermaid ให้เราสิ

ผมใช้ Gemini Advanced เป็นตัวอย่างนะครับ (เพราะผมได้ Storage 2 TB นั่นแหละเหตุผลที่ผมใช้ Gemini)

Create system prompt

ขั้นแรก สร้าง System Prompt ขึ้นมาก่อน จริง ๆ ก่อนหน้านี้ผมก็ไม่ได้สร้างอะไรที่มันยาวขนาดนี้หรอก ก็ให้ Gemini สร้าง Prompt ให้

หลังจากนั้น ปรับแต่ง Prompt ให้เหมาะสมตามที่เราเห็นสมควร

You are a skilled AI assistant specializing in system design. 

Your primary functions are to: 
1. **Architecture Design:** 
* Understand and analyze business domains provided by the user. 
* Design comprehensive system architectures based on those domains, considering: 
* Components and modules required 
* Interactions and dependencies between them 
* Data flow and storage mechanisms 
* Scalability and performance considerations 
* Security and compliance aspects 

2. **Business Flow & Logic Tree Design:** 
* Collaborate with the user to identify key business processes. 
* Design detailed business flows.

Outlining: 
* Steps involved in each process 
* Decision points and branching logic 
* Inputs, outputs, and transformations of data 
* Roles and responsibilities of stakeholders 
* Develop clear and concise logic trees that visually represent the relationships and dependencies within business flows. 

Additional Guidelines: 
* Ask clarifying questions to ensure a deep understanding of the user's needs. 
* Provide explanations and justifications for your design decisions. 
* Suggest alternative approaches when appropriate. 
* Generate diagrams and visual representations to enhance clarity. 
* Prioritize accuracy and thoroughness in your designs. 
* Maintain a professional and collaborative tone throughout the interaction.

The result should output as correct Mermaid syntax including
- High Level system interaction
- Architectural communication
- Logic tree for core domain and related domains

Put system prompt to another chat

Give desire business domain and get mermaid result

ตัวอย่าง prompt ที่ใช้

I want to implement the application which utilize the world of cashless payment.
It might be QR Payment, Prepaid Card, Credit Card depending on the situation.
Feel free to design in resilient, complexity of project is optional but can be included if needed.
The stakeholders I believe the customers, merchants, or entrepreneurs who need to receive the payment via this cashless method. Include push notification system and loyalty program.
I hope I gave the description clearly.

ตัวอย่าง Mermaid syntax output

[Optional] Sequence diagram on specific use-case

เป็น Optional นะครับ ผมคิดว่าถึงตรงนี้ทุกคนคงน่าจะไปต่ออะไรเองได้แล้ว แต่ผมใส่ไว้ให้ เผื่อใช้เป็นแนวทางครับ

อ้าวรอบนี้มันพัง ให้ Gemini ช่วยแก้หน่อยละกัน

ผลลัพธ์

sequenceDiagram
    participant CustomerApp as Customer's Mobile App
    participant APIGateway as API Gateway
    participant PaymentService as Payment Service
    participant QRPaymentProvider as QR Payment Provider
    participant TransactionDB as Transaction Database
    participant LoyaltyService as Loyalty Service
    participant LoyaltyDB as Loyalty Database
    participant NotificationService as Notification Service
    participant PushNotificationProvider as Push Notification Provider

    CustomerApp->>APIGateway: HTTPS POST /payment/qr (QR Code Data)
    activate APIGateway
    APIGateway->>PaymentService: gRPC PayWithQR(QR Code Data)
    activate PaymentService
    PaymentService->>QRPaymentProvider: Initiate QR Payment Request
    activate QRPaymentProvider
    QRPaymentProvider->>PaymentService: QR Payment Status (Pending/Success/Failure)
    deactivate QRPaymentProvider

    PaymentService->>TransactionDB: Store Transaction Details
    activate TransactionDB
    TransactionDB->>PaymentService: Success
    deactivate TransactionDB

    alt Payment Success
        PaymentService->>LoyaltyService: Update Loyalty Points (Customer ID)
        activate LoyaltyService
        LoyaltyService->>LoyaltyDB: Update Loyalty Points
        activate LoyaltyDB
        LoyaltyDB->>LoyaltyService: Success
        deactivate LoyaltyDB
        deactivate LoyaltyService

        PaymentService->>NotificationService: Send Success Notification (Customer ID)
        activate NotificationService
        NotificationService->>PushNotificationProvider: Send Push Notification
        deactivate NotificationService
    end

    alt Payment Failure
        PaymentService->>NotificationService: Send Failure Notification (Customer ID)
        activate NotificationService
        NotificationService->>PushNotificationProvider: Send Push Notification
        deactivate NotificationService
    end
    PaymentService->>APIGateway: gRPC (Payment Result)
    deactivate PaymentService

    APIGateway->>CustomerApp: HTTPS 200 OK (Payment Result)
    deactivate APIGateway

Conclusions

ก็เป็น Trick อย่างนึงที่ Generative AI มาช่วยเราได้ เวลาที่จะใช้ Excalidraw ในเวลาที่เราต้องการที่จะฝึกฝนเพื่อเพิ่มทักษะทาง Business problem เพียงแต่ว่า เราอาจจะต้องบีบ scope หรือ detail ค่อย ๆ เจาะไปทีละนิด เวลาที่เห็น Process คร่าว ๆ เราก็จะได้ design system นู่นนี่ได้หลากหลายมากขึ้น

ขอบคุณที่อ่านจนจบ ไว้เจอกันใหม่บทความหน้าครับ ขอให้ทุกคนมีความสุข 🙇‍♂️

Facebook: Thanaphoom Babparn
FB Page: TP Coder
LinkedIn: Thanaphoom Babparn
Website: TP Coder — Portfolio