설치

터미널에서 다음을 실행하여 설치합니다.

$ brew install yarn
$ yarn global add mermaid
$ yarn global add mermaid.cli

이것으로 설치 완료. 아래와 같은 도움말을 확인해 봅시다.

$ mmdc --help
Usage: mmdc [options]

Options:
  -V, --version                                   output the version number
  -t, --theme [theme]                             Theme of the chart, could be default, forest, dark or neutral. Optional. Default: default (default: "default")
  -w, --width [width]                             Width of the page. Optional. Default: 800 (default: "800")
  -H, --height [height]                           Height of the page. Optional. Default: 600 (default: "600")
  -i, --input <input>                             Input mermaid file. Required.
  -o, --output [output]                           Output file. It should be either svg, png or pdf. Optional. Default: input + ".svg"
  -b, --backgroundColor [backgroundColor]         Background color. Example: transparent, red, '#F0F0F0'. Optional. Default: white
  -c, --configFile [configFile]                   JSON configuration file for mermaid. Optional
  -C, --cssFile [cssFile]                         CSS file for the page. Optional
  -p --puppeteerConfigFile [puppeteerConfigFile]  JSON configuration file for puppeteer. Optional
  -h, --help                                      output usage information

VSCode에서 다이어그램을 작성해보십시오.

에디터로 VSCode를 사용하고 있으므로 VSCode에서 어떻게 그림을 작성하는지 간단히 메모해 둡니다. (mac, VSCode 사용하지 않는 사람 죄송합니다 )

Mermaid Preview라는 확장 프로그램을 설치합니다. 이제 그림을 옆에 표시하면서 파일을 만들 수 있습니다. (Mermaid Markdown Syntax Highlighting이라는 확장 기능도 넣어 구문 강조하고 싶었지만 Mermaid Preview가 활성화되어 있으면 작동하지 않는 것 같습니다?)

예를 들어 다음 파일test.mmd을 만들고 저장합니다. 확장자는 .mermaid에서도 OK인 것 같다.

test.mmd

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

VSCode에서 command + shift + P에서 명령 팔레트를 열고 mermaid 등을 검색하고 > Preview Mermaid를 선택하면 화면 오른쪽에 미리보기가 표시됩니다.

내보내기

저장된 test.mmd을 PNG로 내보냅니다. 터미널로 돌아가

$ mmdc --input test.mmd --output test.png --backgroundColor transparent

등으로 실행하면 배경이 투명한test.png을 출력할 수 있습니다. 명령 옵션 등은 $ mmdc --help에서 참조하십시오. 테마 등도 변경할 수 있는 것 같습니다. 출력할 수 있었던 PNG가 이쪽.