Mermaid.js를 통한 차트 그리기

Mermaid.js 란?

Mermaid.js는 markdown을 통해 텍스트를 다이어그램과 시각화를 할 수 있는 툴 입니다.

앞서 mermaid.js 에 대해 정리해주신 글 들을 참고 해주시면 좋을 것 같습니다.

• https://www.chatgpters.org/c/ai-writing/chatgpt-x-mermaid

• https://www.chatgpters.org/c/beginners/attention-is-all-you-have-1

• https://www.chatgpters.org/c/beginners/gpt-2

또한, show me 플러그인도 mermaid.js를 기반으로 동작하고 있습니다.

적용 사례

회사에서 개발자들 대상으로 서비스 운용시 발생할 수 있는 문제들을

어떻게 해결 할 수 있는지 flow chart를 구성해보라고 문제를 주셨습니다.

이 문제를 해결하기 위해 Chat GPT와 mermaid.js를 사용하였습니다.

• https://chat.openai.com/share/64b5323f-2b25-490d-9f86-19ee6aec414b

• https://mermaid.live/edit#pako:eNp1kc1OwzAMx1_F8gFt0voCPSAhrZNAgIDCqeEQEreN1iYoTVWmde9OPrrtgIiU-G_7Z-friMJIwhzrzkyi5dbB-5Zp8KN03lutGEbBcL2GLLuF15FGqp5oGHhDyftMBVFHZn6mCR7M1ww7cqJVuqnOAm6gJAf3Oqs71bRuqb2kQ_mLNcL3D2VXuYDXQNqpHEXwZ7gT-8pPbaaOZEP_4DuufHqGN3L2UMV1IaNO0IeWZOFR9crN6VZ_kJiE4kcQydAv9a2SWTr600S40DI8ozfhEZf7RvCcxg32ZHuupP-JYyAYupZ6Yph7KbndM2T65Dk-OlMetMDc2ZE2OH5L7mireGN5j3nNu-ESLaRyxi7B0y9LtaHT

이처럼 문제와 개선방향에 대해 서술하고, 개선 방법에 대한 답변을 받을 수 있었습니다.

사용할 수 있는 다른 Diagrams

또한 Mermaid.js에서는 Flow Chart 뿐만 아니라 다른 Diagram도 그릴 수 있습니다.

https://mermaid.js.org/intro/

Pie chart Diagrams

• https://mermaid.js.org/syntax/pie.html

Gantt Chart Diagrams

• https://mermaid.js.org/syntax/gantt.html

• https://chat.openai.com/share/8c6c54d1-4325-4a43-9564-4a12ae8ef3ab

C4 Diagrams (시스템 구성도: https://en.wikipedia.org/wiki/C4_model)

• https://mermaid.js.org/syntax/c4c.html

• https://chat.openai.com/share/05236c6f-c1e9-4863-a7d4-6ccc02865a9a