코드 로 시퀀스 다이어그램 을 그리기 ～mermaid 기법②～

5161 단어 VisualStudioCodemermaidmermaid.jsMarkdown
코드로 시퀀스 다이어그램 그리기 ~ mermaid로 시퀀스 다이어그램 그리기 ~ mermaid 표기법

목적


  • mermaid로 시퀀스 다이어그램을 그릴 때 규칙 그리기
    ※ mermaid.js 공식 에 기재되어 있는 플로우차트를 쓰는 방법을 소개한다.
    ※mermaid에 대해 알고 싶은 분은 여기
    ※기본적인 기입 방법을 알고 싶은 분은 여기
    ※출력 방법을 알고 싶은 분은 여기

    • 누르는 포인트


  • 시퀀스 다이어그램의 경우 sequenceDiagram로 선언하십시오.
  • 처음 정의한 프로세스가 어떻게 작동하는지 설명합니다.

    • 쓰기 방법의 예



    프로세스 정의


  • 프로세스 정의는 praticipant "プロセス名"입니다.
  • 시퀀스 다이어그램의 왼쪽에 그려야하는 프로세스를 먼저 설명합니다.
  • 설명하고 싶은 내용에 등장하는 프로세스(등장 인물이나 시스템, 하드웨어 등)를 최초로 정의한다.

  • 가상의 인물 「타로」와 「하나코」의 상호 작용을 나타낼 때는 아래와 같이 기재한다.
    ※ 참고로 간단한 그림이라면 프로세스를 정의하지 않아도 시퀀스도는 그릴 수 있지만, 그림에 범용성을 갖게 하기 위해서는 프로세스를 정의하는 것을 추천한다.
    sequenceDiagram
    participant 太郎
    participant 花子



    • 프로세스 이름을 변수에 저장


  • 프로세스 이름은 변수에 저장할 수 있습니다.
  • 이 아이디어를 사용하여 상호 작용을 그릴 때마다 프로세스 이름을 설명 할 필요가 없어집니다.

  • 전술한 내용으로 소개한 「타로」와 「하나코」를 각각 「NAME_A」와 「NAME_B」에 격납할 때는 하기와 같이 기재한다.
    sequenceDiagram
    participant NAME_A as 太郎
    participant NAME_B as 花子



    • 상호 작용의 화살표 (작용을 나타내는 화살표)를 그리는 방법


  • 프로세스 A에서 프로세스 B로의 화살표는 A->>B로 표시됩니다.
  • 화살표 위에 텍스트를 낼 때는 A->>B: テキスト로 기재한다.
  • 상기 내용에 기초하여 「타로」와 「하나코」의 관계를 기재를 이하에 기재한다.

    • 맞춤법 오류 확인
    ``` mermaid
sequenceDiagram
    participant NAME_A as 太郎
    participant NAME_B as 花子
    NAME_A->>NAME_B: 好き
    NAME_B->>NAME_A: ちょっと好き
```



    상호 작용의 화살 유형




    기입 방법
    내용


    ->
    실선

    -->
    점선

    ->>
    실선 화살표

    -->>
    점선 화살표

    -x
    실선 화살표 취소

    --x
    점선 화살표 취소


    활성화


  • 외부를 활성화하거나 비활성화할 수 있습니다.

  • 전용 선언 방법이 있다.
    sequenceDiagram
    participant NAME_A as 太郎
    participant NAME_B as 花子
    NAME_A->>NAME_B: 好き
    activate NAME_A
    NAME_B->>NAME_A: ちょっと好き
    deactivate NAME_A

    • 프로세스 옆에 메모를 표시합니다.


  • 시퀀스 다이어그램에 메모를 추가 할 수 있습니다.
  • 시퀀스 다이어그램 옆에 스티커 메모와 같은 느낌으로 텍스트를 쓸 수 있습니다.

  • 코드의 예는 아래에 설명되어 있습니다.
    sequenceDiagram
    participant NAME_A as 太郎
    Note 左右どちらにノートを作るか of プロセス名: ノートに記載する内容

  • 보다 구체적인 예를 이하에 기재한다
    sequenceDiagram
    participant NAME_A as 太郎
    Note right of NAME_A: 太郎は寒がりです



    • 여러 프로세스에 걸친 노트를 표시합니다.


  • 시퀀스 다이어그램의 다중 프로세스를 가로 지르는 노트를 추가 할 수 있습니다.

  • 코드의 예는 아래에 설명되어 있습니다.
    # 図の指定
sequenceDiagram
    # プロセスの定義
    participant NAME_A as 太郎
    participant NAME_B as 花子
    # ノートの指定(ノートが跨るプロセス名をカンマで区切って記載)
    Note over プロセス名,プロセス名: ノートに記載する内容

  • 보다 구체적인 예를 이하에 기재한다.
    sequenceDiagram
    participant NAME_A as 太郎
    participant NAME_B as 花子
    Note over NAME_A,NAME_B: 二人は仲が良い



    • 루프


  • 루프 처리를 표현할 수 있습니다.

  • 코드의 예는 아래에 설명되어 있습니다.
    # 図の指定
sequenceDiagram
    # プロセスの定義
    participant NAME_A as 太郎
    participant NAME_B as 花子
    # ループの記載
    loop ループ処理内に表示したいテキスト
    # ループ内の処理
        ループしたい処理をアローなどで記載する
    end

  • 보다 구체적인 예를 이하에 기재한다.
    sequenceDiagram
    participant NAME_A as 太郎
    participant NAME_B as 花子
    loop 毎分
        NAME_A->>NAME_B: 見る
        NAME_B->>NAME_A: 話しかける
    end

    • 최소한의 UI를 갖춘 오늘의 Svelte 앱!
    Frontmatter가 정확히 무엇입니까?

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage