# DaC Tools and Technique

Software တွေဖန်တီးရေးဆွဲ တဲ့အခါ Business System နဲ့ Software System ချိတ်ဆက် အလုပ်လုပ်ပုံတွေ၊ logic တွေ၊ workflow တွေကို Developer ဘက်ရော Business ဘက်က stakeholder တွေပါ နားလည်အောင် diagram တွေ ဆွဲပြီး communicate လုပ်ကြရပါတယ်။ Business Analysts, System Analysts တွေနဲ့ Developer တွေ အများဆုံးသုံးကြတာ Flowchart Diagram တွေဖြစ်ပါတယ်။

ပိုရှုပ်ထွေးတဲ့ Software တွေ တည်ဆောက်ရတဲ့ အခါ Flowchart အပြင်၊ ER Diagram, Sequence Diagram, Class Diagram, Use Case Diagram စတာတွေပါ ဆွဲပြီး communicate လုပ်ရလေ့ ရှိပါတယ်။

Diagram as Code (DaC) ဆိုတာ အထက်ပါပြောခဲ့တဲ့ Diagram တွေ အပြင် နည်းပညာနဲ့ သက်ဆိုင်တဲ့ Diagram တွေအများစုကို ကို instruction အချက်အလက်တွေနဲ့ Code ရေးပြီး ပုံဖော်လို့ရနိုင်တဲ့ နည်းလမ်း တစ်ခုပါ။

Google မှာ diagram as code လို့ရှာကြည့်ရင် MermaidJS, PlantUML, ... စတဲ့ DaC tools တွေအများကြီး တွေ့ရပါလိမ့်မယ်။

ဒီ post မှာတော့ DaC tool တစ်ခုဖြစ်တဲ့ MermaidJS နဲ့ တစ်ခြား tool ၂ ခု ပေါင်းစပ် အသုံးပြုပြီး Diagram တွေ ဘယ်လို ဆွဲလို့ရလဲဆိုတာကို မျှဝေပေးသွားမှာ ဖြစ်ပါတယ်။

1. [Mermaid JS](https://mermaid.js.org/) (DaC Tool)
    
2. [ChatGPT](https://chat.openai.com) (AI Tool)
    
3. [Diagrams.net](https://app.diagrams.net/) (Diagramming Tool)
    

DaC ဘယ်လိုအလုပ်လုပ်လဲ ဆိုတာနဲ့ ရေးသားနည်းကို အဓိကမထားဘဲ၊ အထက်ပါ tools တွေကိုသုံးပြီး ကိုယ့်စိတ်ကူးထဲက ပုံဖော်ချင်တာတွေကို ဘယ်လို အမြန်ဆုံး အသုံးချလို့ရမလဲ ဆိုတာကို မျှဝေပေးသွားမှာ ဖြစ်ပါတယ်။

အရင်ဆုံး အောက်ပါ **ChatGPT prompt** format ကို သုံးပြီး DaC ကို generate လုပ်ကြည့်ပါမယ်။

> Could you write me a \[what **DaC tool?**\] code for \[**what diagram?**\] diagram that presents \[**what function?**\]

**\[what DaC tool?\]** နေရာမှာ ရေးစေချင်တဲ့ DaC tool (mermaid js) ကို ထည့်ပါ။ **\[what diagram?\]** နေရာမှာ ဆွဲစေချင်တဲ့ diagram အမည် နဲ့ **\[what function?\]** နေရာမှာ ရှင်းလင်းရေးဆွဲစေလိုတဲ့ အကြောင်းအရာ ကိုထည့်ပါ။

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706944277335/0bd58112-7011-406d-9d01-752109d46a10.png align="center")

ChatGPT ကထုတ်ပေးလိုက်တဲ့ code ကို ပုံပြန်ဖော်ဖို့အတွက်၊ Copy Code လုပ်ပါ။

https://app.diagrams.net ကိုသွားပါ။ ပုံပါ နေရာ အတိုင်းသွားပြီး code ကို Phase လုပ်ပြီး Insert လုပ်ပါ။

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706943889903/11d4e29b-2e5e-434c-a8fa-3c4138a94c8a.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706944330357/b2d64be4-ce5b-44b0-935a-8354758ab194.png align="center")

Insert နှိပ်ပြီးတာနဲ့ အောက်ပါအတိုင်း diagram ထွက်လာတာတွေ့ပါလိမ့်မယ်။

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706944377036/19175c4b-4df8-4c54-93a0-5c9f0c2c67a0.png align="center")

အထက်မှာ လုပ်ပြခဲ့တာဟာ tools တွေကို ဒီ လို technique သုံးပြီး လုပ်လို့ရတယ် ဆိုတာကို အဓိကပြောချင်တာပါ။

ပိုပြီး မှန်ကန်တိကျတဲ့ result တွေရဖို့ အတွက်ကတော့ ChatGPT prompt ရဲ့ \[what functions?\] ဆိုတဲ့ နေရာမှာ instruction statement, scenario တွေ သေချာ စဉ်းစားပြီး ရိုက်ထည့်ပေးဖို့လိုပါတယ်။

ဒီလမ်းကို သုံးပြီး လေ့လာသင်ယူတဲ့ နေရာမှာ၊ အလုပ်လုပ်တဲ့နေရာမှာ ပိုမို အကျိုးများလိမ့်မယ်လို့ မျှော်လင့်ပါတယ်။

ဖတ်ရှုလေ့လာတဲ့ အတွက် ကျေးဇူးတင်ပါတယ် ခင်ဗျာ။

Aung Kyaw Minn | Head of Technology

[Onenex](https://onenex.co/)