Sonolart

Mermaid

11 min read

up:: Programming
same:: PlantUML

About Mermaid | Mermaid

ライブエディタ。
Online FlowChart & Diagrams Editor - Mermaid Live Editor

フローチャート

処理の流れを記述する。

シーケンス図

プロセスが互いにどのような順序で動作するか。

クラス図

classDiagramでクラスが描ける。多分一番使う。

classDiagram
      Animal <|-- Duck
      Animal <|-- Fish
      Animal <|-- Zebra
      Animal : +int age
      Animal : +String gender
      Animal: +isMammal()
      Animal: +mate()
      class Duck{
          +String beakColor
          +swim()
          +quack()
      }
      class Fish{
          -int sizeInFeet
          -canEat()
      }
      class Zebra{
          +bool is_wild
          +run()
      }

クラス

classDiagram
    class BankAccount
    BankAccount : +String owner
    BankAccount : +Bigdecimal balance
    BankAccount : +deposit(amount)
    BankAccount : +withdrawl(amount)

基本的にはこのように呼び出す。始め大文字推奨。
クラスの上段にはクラスの名前が入る。
中央にはAttributeが入る。(クラスの持つメンバのこと)
下段にはメソッドが入る。この二つは小文字推奨。

クラス定義

class hogeとしたらクラスになるのは当然として、実はhoge <|-- hugaなどの関係定義の時点で既に宣言したことになる。
また、クラス名に使える文字は英数字とアンダースコアのみ。

メンバー定義

2種類ある。

classDiagram
	class BankAccount
	BankAccount : +String owner

こちらはクラス名の後ろにコロンを挟んでメンバー名とする書き方。
1つずつ定義できる。

classDiagram
	class BankAccount{
	+String owner
	}

対してカーリーブラケットを使い一度に複数定義するやり方。

リターンタイプ

クラスの持つメソッドには戻り値を指定できる。

classDiagram
	class BankAccount{
	owner(stick) bool
	}

このように、メソッドの後ろに戻り値タイプを書いておく。

ジェネリック型

classDiagram
	class BankAccount{
	+owner(stick) List~int~
	}

波線で囲うことでジェネリック型、複数種類の値型に同じ操作を行える型を定義できる。ListとかDictとか。

Visibility

アクセス修飾子は手前に記号を付けることで表現する。

  • + Public
  • - Private
  • # Protected
  • ~ Package/Internal

note you can also include additional classifiers:

  • * Abstract e.g.: someAbstractMethod()*
  • $ Static e.g.: someStaticMethod()$

関係の定義

矢印の書き方。クラスとクラスの間に書く。
その後ろにコロンを挟んでラベルがつけられる。
大体の関係は子のほうから繋ぐ。 なぜなら、継承元は誰に継承されているか認知していないから。

classDiagram
classI -- classJ : Association(関連)
classG --> classH : Association(関連)
classE --o classF : Aggregation(集約)
classC --* classD : Composition(構成)
classK ..> classL : Dependency(依存)
classA --|> classB : Inheritance(継承)
classM ..|> classN : Realization(実現)

classO .. classP : Link(Dashed)(破線)

関連

操作を呼び出したり、データを属性として保持している関係。

集約

全体と部分の関係。

構成

全体が部分の生成や削除を担っている関係。
全体インスタンスが削除されると基本的に部分インスタンスも削除される。

依存

弱い関連。
例えば一度だけあるクラスを生成するだけ、といった関係。
依存元が変更されたら、依存先は変更する。

以上四つはプログラムをクラス図に落とし込む場合、明確な変換が決まっていない。

継承

いつもの。汎化とも。
型を継承して具体化する関係。伸ばすのは子クラスから親クラス。

実現

インターフェースとサブクラスの関係。継承の一種。

クラス図の書き方とは。初心者にもわかりやすく解説 | Cacooブログ
クラス図とは？書くために必要な知識を初心者にもわかりやすく解説 - WEBCAMP MEDIA (web-camp.io)
UMLのクラス図における関係の考察 - Crieit

Cardinality/関係の多様性

あるクラスのインスタンスが他のクラスの1つのインスタンスにリンクされている数。
端的に言うと、あるインスタンスはどれだけそのインスタンスを含んでいるのかを書いておける。もちろん、あるインスタンスは複数でもいい。

  • 11のみ
  • 0..1ゼロまたはワン
  • 1..*1つ以上
  • *たくさんの
  • nn {ここでn> 1}
  • 0..nゼロからn {ここでn> 1}
  • 1..n1からn {ここでn> 1}

これをどこに書くのかというと、ここ。矢印前後にダブルクォーテーションで囲って追加で書く。

classDiagram
    Customer "1" --> "*" Ticket
    Student "1" --> "1..*" Course
    Galaxy --> "many" Star : Contains

クラスの注釈

クラスにメタデータをつけられる機能。一般にはこういったものをつける。

  • <<Interface>>インターフェイスクラスを表すには
  • <<abstract>>抽象クラスを表すには
  • <<Service>>サービスクラスを表すには
  • <<enumeration>>列挙型を表すには

<<>>で囲って書くだけ。クラスの書き方によって二通りの書き方がある。

classDiagram
class Shape
<<interface>> Shape

クラスの定義の一番初めに書く
`。

### スタイリング
classDefという物が使える。他のフローチャートとかと同様。
CSSで状態を飾れる。複合状態と最初と最後は飾れない。

まず`classDef ClassName CSS:CSS:...`でCSSクラスを宣言。
その後`class ID ClassName`をどっかに書くか、`ID:::ClassName`を書くことで適用できる。



[State diagrams | Mermaid](https://mermaid.js.org/syntax/stateDiagram.html)

## 実体関連図
相互に関心のある事柄を記述する。ER。
クラス図には振る舞いがあり、ER図には外部キーがある。

[オブジェクト指向設計とクラス図 ER図 - Qiita](https://qiita.com/_kurihara/items/23bce54519b9dd1d88fa)

外部キーは参照用。

クラス図はメソッドを整理する。C#。
ER図はデータを整理できる。SQL。

[SQLにおけるER図のキー: 主キー、外部キー、候補キーの識別方法 | IT trip](https://ittrip.xyz/sql/identify-keys-in-erd)

## ユーザージャーニー
タスクを完了するためにユーザーが実行する手順。ワークフロー。
## Gantt
```mermaid
gantt
    dateFormat  YYYY-MM-DD
    title       Adding GANTT diagram functionality to mermaid
    excludes    weekends
    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)

    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2              :         des4, after des3, 5d

    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :1d
    Functionality added                 :milestone, done, 2014-01-25, 10d

    section Documentation
    Describe gantt syntax               :active, a1, after des1, 3d
    Add gantt diagram to demo page      :after a1  , 20h
    Add another diagram to demo page    :doc1, after a1  , 48h

    section Last section
    Describe gantt syntax               :after doc1, 3d
    Add gantt diagram to demo page      :20h
    Add another diagram to demo page    :48h

section セクション名

セクション内にタスクを纏めておく

タスク名 :(特定タグ), (タグ), (開始位置), 終了位置or期間

特定タグはcrit, done, active, milestoneが使える
重要タスクはcrit、終わったタスクはdone、手を付けてるタスクはactive
milestoneはごく短い時間を表現できる、その時までに達成すべき目標など
併用可能

タグはタスクに付ける短い名前
開始位置として使うことが出来る

開始位置は期日、もしくはafter タグ
省略する場合は終了位置は使えない、期間のみ
afterを使うがbeforeが使えるわけじゃない
dateFormatで形式指定可能

終了位置or期間
milestoneの場合でも0dなど適当な指定が必要
axisFormatで形式指定可能

Gantt diagrams | Mermaid

円グラフ

象限チャート

4つの領域に分かれたデータ。Quadrant Chart。

要件図

requirementDiagramで要件図が書ける。

    requirementDiagram

    Physicalrequirement test_req {
    id: 1
    text: the test text.
    risk: high
    verifymethod: test
    }

    element test_entity {
    type: simulation
    }

    test_entity - satisfies -> test_req
KeywordOptions
Typerequirement, functionalRequirement, interfaceRequirement, performanceRequirement, physicalRequirement, designConstraint
RiskLow, Medium, High
VerifcationMethodAnalysis, Inspection, Test, Demonstration

例についてるプロパティは必須のもの。
また例にあるように、両要素を矢印でつなぐことで関係を示せる。

Gitグラフ

C4 Diagram

クラス図やアクティビティ図なんかを一つの記述方式で書くための新しいDiagram。Mermaid内でC4がラップされてるっぽく、PlantUMLでの記法と同じ。
PlantUMLやMermaidが矛盾した(互いに継承したクラスなど)ものも描ける描画ツールだったのに対し、C4はソフトウェアの構造を反映した抽象化優先アプローチらしい。

C4はContext, Container, Component, Codeの略。この順で変更度が増えていく。そのためComponentやCodeのDiagramはあまり手動作成が推奨されてないっぽい。

新しいが優れているとは言っていない。単純な静的モデルに特化しているため、例えばステートマシン図などを書きたいならUMLのほうがいいって開発者が言ってる。

The C4 model for visualising software architecture
ソフトウェアアーキテクチャのためのC4モデル
C4-PlantUML/README.md at master · plantuml-stdlib/C4-PlantUML · GitHub
Visualising software architecture with the C4 model - Simon Brown, Agile on the Beach 2019 - YouTube
mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.

MindMaps

Timeline

ZenUML

標準より詳しいシーケンス図が書ける。
C4と同じく別記法。

Sankey

ある値セットから別の値セットへのフローを表す。

XYチャート

バーと折れ線。

ブロック図

ブロックの配置場所を制御できる。関係に余計な文言を加えられない。

グラフビュー

バックリンク