初めに

Mermaid記法まとめ2回目。
今回はClass Diaglam,Sequence Diagram

mermaid公式ページ
 前回の記事

Class Diagram

classDiageram

クラス図を作成する。
公式ドキュメント
初めにclassDiagramと指定する。

名前空間

namespace 名前{...}

名前空間を指定できる。

classDiagram
namespace foo{
    class Hoge
}

クラス

class 名前
class ID["名前"]

クラスを作成する。
上段がクラス名、中段はメンバ変数や説明(属性)、下段はメンバ関数(処理)を記述する。

classDiagram
    class Test
    Test:Test1
    Test: test2() 
    class Hoge["This is test class"]
    Hoge: String name
    Hoge: SayHello()

クラスの関係

Parent Class <|-- Child Class

クラスの関係を表記できる。
矢印の見た目も変更できる。(前回同様)

classDiagram
    class Animal
    class Dog
    Animal <|-- Dog

メンバ

classID: メンバ

メンバ変数・関数を定義する。
関数は名前の末尾に()を記述する。
その他のものは変数(メソッド)となる。
また、{}を用いてメンバを複数定義も可能

classDiagram
    class Test
        Test:Test1
        Test: test2() 
    
    class Hoge["This is test class"]{
        String name
        SayHello()
    }

その他

関数の返り値

class:メンバ関数() 型

)の後ろに型を記述する。

classDiagram
    class Test
    Test: Test1
    Test: sayHello(name) String

アクセス修飾子

class:メンバ +\-\#\~

メンバの種類を変更できる。

+ Public
- Private
# Protected
~ Package/Internal

Sequence Diagram

sequenceDiagram

シーケンス図を作成する。
公式ドキュメント
初めにsequenceDiagramと指定する。

参加者

participant 名前

参加者を追加できる。

sequenceDiagram
    participant Alice
    participant Bob
    Alice-->Bob: Hello
    Bob-->Alice: How are you?

見た目の変更

actor 名前

人形で表示できる。

sequenceDiagram
    actor Alice
    actor Bob
    Alice-->Bob: Hello
    Bob-->Alice: How are you?

その他にも@{ "type" : "名前"}で様々な見た目にできる。

sequenceDiagram
    participant Alice@{ "type" : "database" }
    participant Bob@{ "type" : "control" }
    Alice->>Bob: Hello
    Bob->>Alice: How are you?

グループ化

box 見た目　名前
...
end

グループ化する。

sequenceDiagram
    box Purple Alice & John
    participant A
    participant J
    end
    box Another Group
    participant B
    participant C
    end
    A->>J: Hello John, how are you?
    J->>A: Great!
    A->>B: Hello Bob, how is Charley?
    B->>C: Hello Charley, how are you?

メッセージの見た目

メッセージの見た目を変更する。

->
-->
->>
-->>
<<->>
<<-->>
-x
--x
-)
--)

sequenceDiagram
    participant hoge
    participant foo
    hoge -> foo : 
    hoge --> foo :
    hoge ->> foo :
    hoge -->> foo :
    hoge <<->> foo :
    hoge <<-->> foo :
    hoge -x foo :
    hoge --x foo :
    hoge -) foo :
    hoge --) foo :

メモ

Note 位置 : 内容

メモを追加する。
指定の箇所にテキストを挿入できる。

sequenceDiagram
    participant Alice
    participant Bob
    Note right of Bob: Text in note
    Note over Alice,Bob: Note1

終わりに

READMEに追加しておこう。
~Thank you for reading~