배경
다른 개발자들과 일할 때 가장 좋은 소통 방식은 다이어그램인 것을 체감했다...
학교에서 소프트웨어 공학이었나? 그 과목을 공부할 땐 왜 다이어그램 같은 걸 쓰지... 뭐 정해진 언어로 문서를 정리하니 편하긴 편할테지만 굳이? 싶은 마음이었는데 아~ 절대 아니다, 학교에서 배우는 건 버릴 게 없다; 진짜 솔직히 학교 다시 한 번 더 다니고 싶다 그 때 놓친 전공지식들이 너무너무 아까워 죽겠음 ㅠㅠ 직장 다니면 다닐 수록 대학원에 대한 욕망은 더욱 커져만 가는데... 다시 한 번 더 배우면 진짜 잘 배울 자신 있는데.....
하여간~
스스로의 플로우 정리라든가, 다른 개발자들 (특히 프론트 내에서만이 아니라 서버든 펌웨어쪽이든 등등)과의 소통을 위해서 다이어그램의 필요성을 절실히 느꼈다.
그러던 와중에 vscode 익스텐션으로 간단하게 코드 짜고, 프리뷰를 바로 볼 수 있는 툴들이 있다는 소식을 접했다!! 기존에 쓰던 uml diagram 툴은 인터넷에서 꼭 다운받아야 했고, 아님 로그인해서 웹 브라우저에서 짜야 했는데 뭔가 좀 불편한 느낌이었어서, 바로 vscode로 갈아타기로 결정했다.
추천!
내가 추천하는 툴은 바로 mermaid-js 이다!!
(공식 문서)[https://mermaid.js.org/]
(vscode 익스텐션 문서)[https://docs.mermaidchart.com/plugins/visual-studio-code]
선택 이유:
- 회사에서 이걸 씀. (왜 쓰는 건지 몰랐는데... 알고보니 mermaid가 Atlassian 제품(confluence 나 jira)과의 통합이 가능하다고 한다, 우리 회사가 confluence, jira를 쓰고 있어서 아마 머메이드를 선택한 게 아닌가 싶다. 회사는 다 이유가 있구나)
- 마크다운 형식으로 작성함. -> 러닝 커브가 낮다!
vscode 에서 쓰는 법
- 먼저 Markdown Preview Mermaid Support 익스텐션을 설치한다.
- Mermaid Markdown Syntax Highlighting 익스텐션을 설치한다.
- 공식은 Mermaid Chart 익스텐션인데 난 설치 안했다. mermaid chart 웹페이지와의 연동 기능이 추가된 익스텐션이라 api 토큰으로 계정 인증도 해야 하고, 무엇보다 mermaid chart는 부분 유료화라서(무료 계정은 다이어그램 5개까지밖에 못 만드는 걸로 앎.) 굳이 써야 하나 싶었다. 익스텐션은 아래 사진에서 위에꺼 2개만 설치해도 충분.
- 이제 md 파일 만들고 문법 작성해 준 후, 아래 사진 커서 올린 부분 보면 돋보기 달린 네모네모 아이콘이 있는데 클릭하면 사이드에 프리뷰로 다이어그램 이미지가 뜬다. 참고로 프리뷰에서 마우스 우클릭을 하면 아래아래 사진처럼 드롭다운 박스가 뜬다. 거기서
Export->Chrome(Puppeteer)을 선택하면 png, jpeg로도 다운받을 수 있다.
- 추가
아직 안 써보긴 했지만.. 아마 Live Share 같은 익스텐션 쓰면 다른 사람들과 동시에 차트 짤 수도 있을 거 같다.
그리고 다이어그램 디자인 솔직히 진짜 안 이쁘긴한데, 그래도 이 정도 간편성에 이 정도 기능이면 그럭저럭 만족함.