mermaid

mermaid

mermaid

  • 마크다운에서 기반한 자바스크립트 기반 다이어그램 툴
    • 복잡한 다이어그램 및 차트를 그릴 수 있음
    • 개발자의 다이어그램 그리는 시간 / 문서화 시간을 아껴줄 수 있음
    • 개발자가 아니더라도 쉽게 작성 가능
  • 플로우 차트, 시퀀스 다이어그램, 간트 차트, 클래스 다이어그램, 상태 다이어그램, 파이 차트 등을 그릴 수 있음

플로우 차트 기본 문법

  • flowchart LR / TD: 제일 처음 시작에 삽입, LR: 좌우, TD:상하
  • A[Hard]: Hard라는 네모를 그림, A라는 변수로 접근 가능
  • B(Round): Round라는 원을 그림
  • C{Decision}: Decision이라는 마름모를 그림
  • D[(Cylinder)]: Cylinder라는 원통 형태를 그림 (DB를 주로 표시)
  • A — B : A와 B를 선으로 이음
  • A –> B : A와 B를 화살표로 이음
  • A –>|TEXT| B : A와 B를 화살표로 잇되, 중간에 TEXT라는 네모 상자를 둠

References

  1. https://github.com/mermaid-js/mermaid