2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Mermaid記法まとめ2 Class DIagram&Sequence Diagram

Last updated at Posted at 2025-12-07

初めに

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~

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?