Go to Qiita Advent Calendar Top
LoginSignup
78
59

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@opengl-8080inTIS株式会社

Mermaid使い方メモ

Posted at

Mermaid とは

  • UML やフローチャートなどの図をテキストで記述できるツール
  • JavaScript 製
  • 似たものとして PlantUML がある
    • こっちはJava製
    • PlantUML は名前の通り UML に特化している
    • Mermaid は UML だけでなくガントチャートや Git グラフ、折れ線グラフや円グラフなどその他の様々な図も描ける
  • GitHub や Qiita などでは Markdown 中に簡単に埋め込むことができる
  • ここでは個人的に気になった図だけに絞って書き方をまとめている

環境構築

VS Code を使って Mermaid を書ける環境を用意する。

Markdown Preview Enhanced という Extension を入れると、 Markdown の中で Mermaid を書けるようになる。

image.png

基本構文

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
  • Mermaid の構文は、まず最初に図の種類を記述するところがあり、そのあとに図の内容を記述する形になっている
    • sequenceDiagram が図の種類を表している

設定

---
title: Hello Title
config:
  theme: forest
---
flowchart
	Hello --> World
  • 図の種類の前に設定を記述できる
    • これを Frontmatter と呼ぶらしい
    • v10.5.0 以降はこの書き方が推奨されている
    • それ以前は Directives という書き方があったようだが、現在は非推奨となっている
    • でも、 Qiita でこの Frontmatter を利用すると一部の設定しか反映されない（themeVariables とかは無視される。同じテキストを本家のオンラインエディタで試したら普通に反映されたので、 Qiita の問題っぽい）
  • 設定は Yaml 形式で記述する
  • title には図のタイトルを記載できる
  • config では、図の細かい設定を指定できる 
flowchart

Hello --> World
  • 図の部分は別にインデントが無くても良いっぽい

フォントサイズの変更

---
title: Hello Title
config:
  theme: forest
  themeVariables:
    fontSize: 10px
---
flowchart
	Hello --> World

image.png

※Qiita だと themeVariables が反映されないので、VSCodeでのレンダリング結果画像を添付している。

  • 前述の Mermaid Config Schema だと、 theme とかと同じ並びで fontSize を設定できそうな書き方になっているけど、実際は themeVariables の下に記載する必要がある
  • 指定は 10pt とか 80% など、 CSS で指定できる書き方が使えるっぽい
  • 反映されるのは図中のフォントサイズだけで、タイトル部分のフォントには反映されないっぽい

テーマ

default

---
config:
  theme: default
---
flowchart
    Hello --> World
  • デフォルトのテーマ
  • なにも指定しなければこれが適用される

neutral

---
config:
  theme: neutral
---
flowchart
	Hello --> World
  • 白黒印刷に適したテーマ

dark

---
config:
  theme: dark
---
flowchart
	Hello --> World
  • ダークモードに合うテーマ

forest

---
config:
  theme: forest
---
flowchart
	Hello --> World
  • 緑を基調としたテーマ

base

---
config:
  theme: base
---
flowchart
	Hello --> World
  • 細かいカスタマイズをする場合の元（ベース）となるテーマ

コメント

flowchart

    %% comment
	Hello --> World
  • %% で始まる部分はコメントとして無視される

◆クラス図

Class diagrams | Mermaid

  • UML のクラス図を書くことができる

クラスの定義

classDiagram

class Hoge
class Fuga
  • class <クラス名> でクラスを定義できる

クラスラベル

classDiagram

class Hoge ["Hoge Label"]
class Fuga ["Fuga Label"]

Hoge --> Fuga
  • クラス名のうしろに ["ラベル"] とつけることで、クラスの表示名を変更できる

メンバーの定義

classDiagram

class Hoge {
  attr1
  attr2: String
  method1()
  attr3: int = 10
  method2(param1: int)
  method3() String
}
  • クラス宣言の後に波括弧 {} を追加すると、その中でメンバーを定義できる
    • メンバーを定義する記法はもう１つあるけど、属性の型を記述できなかったりして不便なのと個人的にこちらの書き方のほうが好きなので、こちらだけ記載する
  • 属性とメソッドの違いは丸括弧 () の有無で判定される
  • 属性の方は、書いたママが適用されるっぽい
  • メソッドの方は、戻り値の型を書くときに method() String のようにコロンは書かないようにする(書くとコロンが二重に表示されてしまう)

可視性

classDiagram

class Hoge {
    + publicAttribute
    # protectedAttribute
    ~ packagePrivateAttribute
    - privateAttribute

    + publicMethod()
    # protectedMethod()
    ~ packagePrivateMethod()
    - privateMethod()
}
  • 可視性は各メンバーの先頭に記号を記述する
    • 記号自体は UML のクラス図のルールのママ

静的メンバ、抽象メンバ

classDiagram

class Hoge {
    staticAttribute: String $
    staticMethod() String $
    abstractMethod() String *
}
  • メンバーの定義の末尾に $, * を追加することで、静的メンバ、抽象メンバを定義できる
  • 静的メンバが $
  • 抽象メンバが *

関連

classDiagram

ClassA -- ClassB: --
ClassC --> ClassD: -->
ClassE .. ClassF: ..
ClassG ..> ClassH: ..>
ClassI <|-- ClassJ: <|--
ClassK <|.. ClassL: <|..
ClassM *-- ClassN: *--
ClassO o-- ClassP: o--
  • <クラス> <関連> <クラス> という形でクラス間の関連を定義できる
  • <--> のように双方向で記述することも可能
  • 継承や実現に関しては、この方法でしか記述できないもよう
    • PlantUML のような class Hoge extends Fuga implements Piyo みたいな書き方はダメっぽい

関連のラベル

classDiagram

Hoge -- Fuga: ラベル
  • 関連を書いた後に : ラベル と続けることで、関連にラベルを付けることができる

多重度

classDiagram

Hoge "1" -- "0..*" Fuga
  • 関連の線の前後にダブルクォーテーションで括った多重度を記述できる

名前空間

classDiagram

namespace Foo {
    class Hoge
}

namespace Bar {
    class Fuga
}
  • namespace <名前> {} で名前空間を定義できる
  • 名前空間の入れ子はできないっぽい
  • 名前空間の間で関連を定義することはできないっぽい

総称型

  • List<T> のような総称型を記述したい場合は List~T~ のようにチルダ ~ を使用して記述する
  • List<List<T>> のような単純な入れ子は List~List~T~~ でできるが、入れ子の中にカンマがあると記述できない
    • List<Map<String, String>> のようなケースは記述できない、ということ

ステレオタイプ

classDiagram

class Hoge
<<interface>> Hoge
  • クラスの宣言とは別に <<ステレオタイプ>> クラス名 と記述することでステレオタイプを設定できる

向きの変更

LR : Left -> Right

classDiagram
direction LR

Hoge -- Fuga
Piyo -- Fuga

class Foo
class Bar

RL : Right -> Left

classDiagram
direction RL

Hoge -- Fuga
Piyo -- Fuga

TB : Top -> Bottom (デフォルト)

classDiagram
direction TB

Hoge -- Fuga
Piyo -- Fuga

BT : Bottom -> Top

classDiagram
direction BT

Hoge -- Fuga
Piyo -- Fuga
  • direction <向き> と記述することで、図の配置の向きを変更できる

ノート

classDiagram

note "普通のノート"
note for Hoge "Hogeのノート"

class Hoge
  • note "テキスト" でノートを追加できる
  • note for <クラス名> で、クラスに対してノートを設定できる

URLリンク

classDiagram

class Hoge
link Hoge "https://www.google.co.jp"
  • link <クラス名> "URL" と記述することで、クラスをリンクにできる
  • Qiita 上だと、そのままクリックしてもリンク先には飛べない（セキュリティ的な制限？）
    • 右クリックして別タブで開くことはできる

スタイルの調整

  • style <クラス名> <スタイル定義> と記述することで、クラスのスタイルを変更できる
    • CSS でスタイルを定義しておいて class を割り当てる方法もあるが、現状図の中で CSS を定義する方法がないので Markdown の中とかで記述する場合は利用できない
    • 近々対応するみたいな感じのことがドキュメントには書かれている

    • Due to limitations with existing markup for class diagrams, it is not currently possible to define css classes within the diagram itself. Coming soon!

  • スタイル定義で指定可能な項目について、ドキュメントを見ても特に言及がなかったので上記以外に指定可能なものがあるのかどうかは不明
    • fill: クラスの背景色
    • stroke: 枠線の色
    • stroke-width: 枠線の太さ
    • stroke-dasharray: 枠線を点線にする場合の間隔
    • color: 文字の色
  • 色に関してはカラーコードか色名を指定できるっぽい
    • color に関してはカラーコードしか指定できなかったりで、なんか動きが安定していない印象

◆シーケンス図

Sequence diagrams | Mermaid

  • シーケンス図を記述できる

基本

sequenceDiagram

hoge ->> fuga: hi
  • ->> で同期メッセージを記述できる
  • メッセージ送信先のライフラインの後に : <テキスト> と続けることで、メッセージのテキストを記述できる
    • メッセージのテキストは必須
  • -->> でリプライメッセージを記述できる

非同期メッセージ

sequenceDiagram

hoge -) fuga: hello
  • -) で非同期メッセージを記述できる

ライフラインの順序を指定する

sequenceDiagram

participant hoge
participant fuga
participant piyo

piyo ->> hoge: hello
hoge ->> fuga: hello
  • 何も指定していない場合、ライフラインは登場した順番で左から並べられる
  • participant <ライフライン名> という形でライフラインをあらかじめ定義しておけば、その順番でライフラインを並べることができる

ライフラインのアイコンをアクターにする

sequenceDiagram

actor hoge
actor fuga

hoge ->> fuga: hello
  • actor <ライフライン名> で、ライフラインのアイコンをアクターにできる

ライフラインのラベルを変更する

sequenceDiagram

participant hogefuga as hoge fuga
participant foobar as foo bar

hogefuga ->> foobar: hello
  • participant <ID> as <ラベル> と記述することで、ライフラインのラベルを変更できる

ライフラインの生成と破棄

sequenceDiagram

participant hoge

create participant fuga
hoge ->> fuga: create

destroy fuga
fuga -->> hoge: reply
  • create participant <ライフライン名> を生成するメッセージの直前に記述することで、ライフラインの生成ができる
    • 生成するライフラインは create のタイミングで初めて記述される必要がある
    • したがって、あらかじめ participant で宣言して順序を定義しておくことはできない
  • destroy <ライフライン名> を破棄するメッセージの直前に記述することで、ライフラインの破棄ができる

ライフラインの活性化(アクティベーション)

sequenceDiagram

hoge ->> fuga: hello
activate fuga
fuga -->> hoge: hello

hoge ->> fuga: hi
fuga -->> hoge: hi
deactivate fuga
  • activate <ライフライン名> で、ライフラインを活性化(アクティベーション)できる
  • deactivate <ライフライン名> で、ライフラインを非活性化できる
  • 活性化と非活性化は必ずセットで記述する必要がある

省略記法

sequenceDiagram

hoge ->> +fuga: hello
fuga -->> hoge: hello

hoge ->> fuga: hi
fuga -->> -hoge: hi
  • 活性化させるライフライン名の前に +, - をつけることでも、活性化を制御できる
  • 活性化を開始するタイミングで + を記述し、非活性化させるタイミングで - をつける

ノート

sequenceDiagram

hoge ->> fuga: hello

note right of hoge: right of hoge
note left of hoge : left of hoge

note over hoge: over hoge
note over hoge,fuga: over<br>hoge fuga
  • note <right of | left of | over> <ライフライン名>: <テキスト> で、ライフラインに対してノートをつけることができる
  • over の場合は、カンマ区切りで複数のライフライン名を並べることで、複数のライフラインにまたがったノートをつけられる
  • 改行は <br> と記述する

ループ

sequenceDiagram

loop condition
    hoge ->> fuga: hello
end
  • loop <条件> ... end でループを記述できる

条件分岐

sequenceDiagram

alt condition
    foo ->> bar: hoge
else condition
    foo ->> bar: fuga
else
    foo ->> bar: piyo
end
  • alt <条件> ... else <条件> ... end で条件分岐を記述できる

メッセージに番号をつける

sequenceDiagram
autonumber

hoge ->> fuga: hi
fuga ->> piyo: hi
piyo -->> fuga: hi
fuga -->> hoge: hi
  • autonumber と指定することで、メッセージに番号がふられる

◆ブロック図

Block Diagram Syntax | Mermaid

  • システムのアーキテクチャを説明したりするような図を描ける

ブロックの定義

block-beta

hoge fuga piyo
foo bar
fizz buzz
  • 任意のテキストを記述すると、個々のテキストがブロックとして定義される
  • デフォルトでは、ブロックは単純に左から順番に一行で並べられる

ブロックのラベル

block-beta

hoge["Hoge"]
  • ブロック名の後ろに ["ラベル"] と記述することで、ブロックのラベルを変更できる

カラム数を指定する

block-beta

columns 3
hoge fuga piyo
foo bar
fizz buzz
  • columns <カラム数> と記述することで、ブロックを並べる列数を指定できる
  • カラム数を越えたブロックは自動的に次の行にずれる

空のブロックを差し込む

block-beta

columns 3
hoge fuga piyo
foo bar space
fizz space buzz
  • space は特殊なブロックで、空のブロックを差し込むことができる

ブロックのカラム数を指定する

block-beta

columns 3

hoge fuga piyo
foo:2 bar
fizz space:2
buzz["BUZZ"]:3
  • ブロック名の後ろに :<カラム数> と続けることでブロックが占有するカラム数を指定できる
    • ラベルを付けている場合は、その後ろに続ける
  • space もカラム数を指定できる

グループ

block-beta

columns 3

hoge fuga piyo

block
    foo bar
end

block:FizzBuzzGroup:2
    fizz buzz
end
  • block と end で囲うことでグループを定義できる
  • グループは１つのブロックとしてサイズが調整される
  • block:<グループの識別子>:<カラムサイズ> と記述することでカラムサイズを指定できる

グループの入れ子

block-beta

columns 3

hoge fuga piyo

block:group:3
    foo bar
    block
        fizz buzz
    end
end
  • グループは入れ子にできる

矢印でつなげる

block-beta

columns 5
hoge space fuga space piyo
space:5
foo bar

hoge --> fuga
piyo --> fuga

hoge --> foo
foo --> hoge

piyo --> bar
  • ブロックの名前通しを --> で繋げることで、ブロック間に矢印を引くことができる
  • ブロックの間にスペースがないと矢印が潰れるので space でうまく間をあける必要がある
  • 矢印は右向きの --> しか記述できず、 <-- や <--> といった記述はできない
    • したがって、双方向の矢印を書きたい場合は二行に分けて記述が必要

グループ間に矢印を引く

block-beta

columns 2
hoge fuga
space:2
block:FooBar:2
    foo bar
end
space:2
block:FizzBuzz:2
    fizz buzz
end

hoge --> FooBar
fuga --> bar
FooBar --> FizzBuzz
foo --> fizz
  • グループ同士、グループとブロック、いずれも矢印で繋げることができる

矢印にテキストを追加する

block-beta

hoge space:2 fuga

hoge -- "テキスト" --> fuga
  • 矢印を -- "テキスト" --> のように記述することで、任意のテキストを追加できる

ブロックの形状を変更する

ブロックの形状はデフォルトの四角以外にも様々な形に変更できる。

角丸四角

block-beta

hoge("Hoge")
  • ラベルを丸括弧 () で囲むことで、角が丸いブロックにできる

スタジアムブロック

block-beta

hoge(["Hogeeeeeeeeee"])
  • ラベルを丸括弧と角括弧 ([]) で囲むことで、左右が丸いブロックにできる

サブルーチン

block-beta

hoge[["Hoge"]]
  • ラベルを二重の角括弧 [[]] で囲むことで、サブルーチンを表すブロックにできる

円筒

block-beta

hoge[("Hoge")]
  • ラベルを角括弧と丸括弧 [()] で囲むことで、円筒形のブロックにできる

円

block-beta

hoge(("Hoge"))
  • ラベルを二重の丸括弧 (()) で囲むことで、ブロックを円にできる

非対称形

block-beta

hoge>"Hoge"]
  • ラベルを >] で囲むことで、ブロックを非対称な形にできる

ひし形

block-beta

hoge{"Hoge"}
  • ラベルを波括弧 {} で囲むことで、ブロックをひし形にできる

六角形

block-beta

hoge{{"Hoge"}}
  • ラベルを二重の波括弧 {{}} で囲むことで、ブロックを六角形にできる

平行四辺形

block-beta

hoge[/"Hoge"/]
fuga[\"Fuga"\]
  • ラベルを角括弧と、スラッシュ [//] またはバックスラッシュ [\\] で囲うことで、ブロックを平行四辺形にできる

台形

block-beta

hoge[/"Hoge"\]
fuga[\"Fuga"/]
  • ラベルを角括弧とスラッシュおよびバックスラッシュ [/\], [\/] で囲うことで、ブロックを台形にできる

二重円

block-beta

hoge((("Hoge")))
  • ラベルを三重の丸括弧 ((())) で囲うことで、ブロックを二重円にできる

ブロック矢印

block-beta

arrow1<["Right"]>(right)
arrow2<["Left"]>(left)
arrow3<["Up"]>(up)
arrow4<["Down"]>(down)
arrow5<["LeftRight"]>(x)
arrow6<["UpDown"]>(y)
  • ラベルを <[]> で囲い、その後ろに (向き) を付けることで、ブロックを矢印にできる
  • 向き には以下を指定できる
    • right: 右向き
    • left: 左向き
    • up: 上向き
    • down: 下向き
    • x: 左右双方向
    • y: 上下双方向

ブロックのスタイル調整

個別に指定する

block-beta

hoge fuga piyo

style hoge fill:lightgreen
style fuga fill:pink,stroke:red,color:blue,stroke-width:3px,stroke-dasharray:4
  • style <ブロック名> <スタイル定義> と記述することで、個々のブロックに直接任意のスタイルを指定できる

クラスを定義する

block-beta

hoge fuga piyo

classDef danger fill:pink,stroke:red
classDef disabled fill:lightgray,stroke:gray
classDef important stroke-width:3px

class hoge danger
class fuga,piyo disabled
class piyo important
  • classDef <クラス名> <スタイル定義> でスタイルのクラスを定義する
  • class <ブロック名,...> <クラス名> で、指定したブロックにスタイルのクラスを適用する
    • ブロックはカンマ区切りで複数指定できる

◆ER図

  • ER図を作成できる

エンティティを定義する

  • 名前を記述すると、それがエンティティになる

ラベルを変更する

erDiagram

HOGE["HOGEテーブル"]
  • エンティティ名の後ろに ["ラベル"] と続けることで、エンティティのラベルを変更できる

エンティティの属性を定義する

erDiagram

HOGE {
    int ID
    string NAME
}
  • エンティティ名の後の {} ブロックで属性を定義できる
  • <型名> <属性名> で各属性を記述できる

主キーを定義する

erDiagram

HOGE {
    int ID PK
    string NAME
}
  • 属性名の後ろに PK とつけることで、その属性を主キーにできる

ユニークキーを定義する

erDiagram

HOGE {
    int ID PK
    string code UK
    string name
}
  • 属性名の後ろに UK とつけることで、その属性をユニークキーにできる

外部参照制約を定義する

erDiagram

HOGE {
    int ID PK
    int PIYO_ID FK
}

HOGE_FUGA {
    int HOGE_ID PK, FK
    int FUGA_ID PK, FK
}
  • 属性名の後ろに FK とつけることで、外部参照制約を表現できる
  • PKなどと並べる場合は , でつなげる

属性にコメントをつける

erDiagram

HOGE {
    int ID PK "一意なキー"
    string NAME "名前"
}
  • 属性名の最後にコメントを付けられる
  • コメントはダブルクォーテーションで囲う必要がある

リレーションを定義する

erDiagram

HOGE |o--|{ FUGA : "ラベル"
FOO  ||..o{ BAR  : "ラベル"
  • エンティティ間のリレーションを定義するには <エンティティ名１> <関連> <エンティティ名２> : <ラベル> と記述する
  • ラベルは、日本語を使うならダブルクォーテーションで囲う必要がある
  • 関連は以下の3つのパートに分けられる
    1. エンティティ名１に対するカーディナリティ
    2. 依存・非依存の識別
    3. エンティティ名２に対するカーディナリティ
  • カーディナリティは以下のいずれかで表現する
左側 右側 意味
|o o| ０または１
|| || １
}o o{ ０以上
}| |{ １以上
  • 依存・非依存の識別は、依存なら --、非依存なら .. で記述する

◆XYチャート

XY Chart | Mermaid

  • 2つの軸を持ったグラフ（棒グラフ、折れ線グラフ）を作成できる

基本

xychart-beta

x-axis [hoge, fuga, piyo]
bar [50, 100, 0]
line [50, 100, 0]
  • x-axis でX軸の各カテゴリを定義する
    • ここでは hoge, fuga, piyo という3つのカテゴリを定義している
  • bar および line で各カテゴリの数量を指定する
    • ここでは hoge に 50, fuga に 100, piyo に 0 を割り当てている
  • bar を指定すると棒グラフで表示される
  • line を指定すると折れ線グラフで表示される
  • Y軸のメモリは、デフォルトでは実際のデータから自動的に調整されるようになっている
    • データの最小値から最大値までだけを表示する

Y軸の範囲を指定する

xychart-beta

x-axis [hoge, fuga, piyo]
y-axis 0 --> 100
line [50, 80, 30]
  • y-axis <最小値> --> <最大値> と記述することで、Y軸の最小値と最大値を指定できる

グラフのタイトルを指定する

xychart-beta

title "タイトル"
x-axis [hoge, fuga, piyo]
bar [50, 100, 0]
  • title "..." でグラフのタイトルを記述できる
  • スペースなしのアルファベット記号のみならダブルクォーテーションなしでも記述できる

x,y軸のタイトル

xychart-beta

x-axis "X軸タイトル" [hoge, fuga, piyo]
y-axis "Y軸タイトル"
bar [50, 100, 0]
  • x-axis "タイトル", y-axis "タイトル" とすることで各軸のタイトルを設定できる

横向きにする

xychart-beta horizontal

x-axis [hoge, fuga, piyo]
bar [50, 100, 0]
line [50, 100, 0]
  • xychart-beta の後に horizontal とつけることでグラフを横向きにできる

◆円グラフ

Pie chart diagrams | Mermaid

  • 円グラフを記述できる

基本

pie

title "タイトル"
"hoge": 10.11
"fuga": 20
"piyo": 14.5
  • "ラベル": <値> という記述を並べることで、自動的に値から割合を算出して円グラフにしてくれる
  • title "タイトル" でタイトルを記述できる

◆クアドラントチャート

Quadrant Chart | Mermaid

  • 4つの象限に分けて各データの配置を確認できるクアドラントチャートを作成できる

基本

quadrantChart

x-axis "foo" --> "bar"
y-axis "fizz" --> "buzz"

hoge: [0, 0]
fuga: [1, 1]
piyo: [0.5, 0.5]
  • x-axis "..." -> "..." でX軸方向の象限の説明を記述する
  • y-axis "..." -> "..." でY軸方向の象限の説明を記述する
  • <ラベル>: [座標] で各データを指定した座標に配置する
    • 座標は左下の端が [0, 0]、右上の端が [1, 1]、中央が [0.5, 0.5] となっている

各象限にラベルをつける

quadrantChart

quadrant-1 "第一象限"
quadrant-2 "第二象限"
quadrant-3 "第三象限"
quadrant-4 "第四象限"
  • quadrant-N "ラベル" で、各象限にラベルを設定できる
    • N には 1 ～ 4 の象限の値を指定する

◆Gitグラフ

Gitgraph Diagrams | Mermaid

  • Gitのブランチやコミットを表現する図を描ける

コミットを追加する

gitGraph

commit
commit
commit
  • commit と記述すると、コミットが追加される
  • デフォルトでは main ブランチにコミットが追加される
  • コミットハッシュはランダムに設定される

デフォルトブランチ名を変更する

---
config:
  gitGraph:
    mainBranchName: master
---
gitGraph

commit

image.png

  • mainBranchName でデフォルトブランチ名を変更できる

コミットハッシュを変更する

gitGraph

commit id: "hoge"
commit id: "fuga"
commit id: "piyo"
  • commit のあとに id: "ハッシュ値" と続けることで、任意の値をコミットハッシュに設定できる

コミットの種類を変更する

gitGraph

commit type: NORMAL
commit type: REVERSE
commit id: "hoge" type: HIGHLIGHT
  • commit のあとに type: <種別> と指定することで、コミットの種類を変更できる
  • <種別> には以下のいずれかを指定できる
    • NORMAL: デフォルトの種別
    • REVERSE: 打ち消しコミットを表す種別
    • HIGHLIGHT: 強調用の種別

タグを追加する

gitGraph

commit tag: "v1.0.0"
commit
commit id: "hoge" tag: "v2.0.0"
  • commit のあとに tag: "タグ名" と指定することで、コミットにタグをつけることができる

ブランチを作成する

gitGraph

commit
commit
branch develop
commit
commit
commit
  • branch <ブランチ名> で、新たにブランチを作成できる
  • ブランチを作成すると、自動的にそのブランチに移動する

ブランチを切り替える

gitGraph

commit
commit
branch develop
commit
commit
checkout main
commit
commit
  • checkout <ブランチ名> で、現在のブランチを切り替えることができる

ブランチをマージする

gitGraph

commit
commit
branch develop
commit
commit
checkout main
commit
merge develop
commit
  • merge <ブランチ名> で、現在のブランチに指定したブランチをマージできる
    • ここでは main ブランチに移動してから develop ブランチをマージしている

マージコミットを装飾する

gitGraph

commit
branch develop
commit
checkout main
merge develop id: "hoge" tag: "v1.0.0" type: HIGHLIGHT
  • commit と同様の方法でマージコミットもタグ付けなどの装飾ができる

cherry-pick

gitGraph

commit
branch develop
commit
checkout main
commit id: "target"
commit
checkout develop
cherry-pick id: "target"
  • cherry-pick id: "対象のID" で指定したIDのコミットを cherry-pick できる

マージコミットを cherry-pick する

gitGraph

commit id: "1"
branch develop
commit id: "2"
branch foo
commit id: "3"
checkout main
merge develop id: "target"
checkout foo
cherry-pick id: "target" parent: "1"
  • マージコミットを cherry-pick する場合は、 parent: "親のID" を指定する
    • 親のID とは、そのマージコミットの本線となるブランチの1つ前のコミットを指す
    • ここでは main ブランチに対して develop をマージしたときのマージコミットを cherry-pick しているので、本線のブランチ(main ブランチ)の１つ前のコミットは 1 になる

ブランチの順序を指定する

gitGraph

commit
branch a order: 3
branch b order: 2
branch c order: 1
  • branch コマンドの後ろに order: <順序> を指定することで、そのブランチの順序を指定できる
  • ブランチの順序は 0 以上の整数を指定する
  • デフォルトブランチ(main) はデフォルトの順序が 0 なので、他のブランチは 1 以上の値を指定する

デフォルトブランチの位置を指定する

---
config:
    gitGraph:
        mainBranchOrder: 2
---
gitGraph

commit
branch a order: 3
branch b order: 1
branch c order: 0

image.png

  • mainBranchOrder でデフォルトブランチの順序を指定できる

縦向きにする

gitGraph TB:

commit
commit
branch develop
commit
commit
  • gitGraph TB: と指定することで、グラフの向きを縦にできる

パラレルコミット

---
config:
    gitGraph:
        parallelCommits: true
---
gitGraph

commit
commit
branch develop
commit
commit
checkout main
commit
merge develop

image.png

image.png

  • デフォルトでは、各コミットはブランチが異なっていても時間軸に対してシーケンシャルに並ぶ
  • parallelCommits を true にすると、異なるブランチのコミットが時間軸に対して横並びになる

◆フローチャート

Flowcharts Syntax | Mermaid

  • フローチャートを記述できる

ノードを作成する

flowchart

hoge
  • 任意の文字列を記述すると、それがノードになる
  • この文字列は、ノードの識別子(ID)となる

ノードのテキストを設定する

flowchart

hoge[Hoge text]
fuga[Fuga
text]
  • ノードの宣言の後に [テキスト] と続けることで、ノードのテキストを指定できる
  • 改行はそのまま反映される

Markdown で記述する

flowchart

hoge["`**bold** _itaric_
new line`"]
  • テキストの [] の中を "``" で囲うことで Markdown でテキストを記述できる
  • 利用できるのは太字やイタリックなどの一部のものだけ
  • 改行はそのままテキストに反映される(末尾の半角スペース2つは不要)

ノードの形状を変更する

ノードの形はブロック図と同じ要領で変更できる。
詳しくは ブロックの形状を変更する を参照。

ノード間のリンク

直線

flowchart

hoge --- fuga
foo -- text --- bar
fizz --- |text| buzz
  • --- で、ノードを直線で繋げることができる
  • -- ラベル --- または --- |ラベル| で、ラベルをつけられる

矢印

flowchart

hoge --> fuga
foo -- text --> bar
fizz --> |text| buzz
alice <--> bob
alpha <--> |text| beta
  • --> で、ノードを矢印で繋げることができる
  • -- ラベル --> または --> |ラベル| で、ラベルをつけられる
  • <--> で双方向になる
  • 双方向の場合は <--> |ラベル| でラベルをつけられる

破線

flowchart

hoge -.- fuga
foo -. text .- bar
fizz -.- |text| buzz
  • -.- で、ノードを破線矢印で繋げることができる
  • -. ラベル .- または -.- |ラベル| で、ラベルをつけられる

破線矢印

flowchart

hoge -.-> fuga
foo -. text .-> bar
fizz -.-> |text| buzz
alice <-.-> bob
alpha <-.-> |text| beta
  • -.-> で、ノードを破線矢印で繋げることができる
  • -. ラベル .-> または -.-> |ラベル| で、ラベルをつけられる
  • <-.-> で双方向になる
  • 双方向の場合は <-.-> |ラベル| でラベルをつけられる

太線

flowchart

hoge === fuga
foo == text === bar
fizz === |text| buzz
  • === で、ノードを太線で繋げることができる
  • == ラベル === または === |ラベル| で、ラベルをつけられる

太線矢印

flowchart

hoge ==> fuga
foo == text ==> bar
fizz ==> |text| buzz
alice <==> bob
alpha <==> |text| beta
  • ==> で、ノードを太線矢印で繋げることができる
  • == ラベル ==> または ==> |ラベル| で、ラベルをつけられる
  • <==> で双方向になる
  • 双方向の場合は <==> |ラベル| でラベルをつけられる

非表示線

flowchart

hoge ~~~ fuga
foo ~~ text ~~~ bar
fizz ~~~ |text| buzz
  • ~~~ で、ノードを非表示の線で繋げることができる
  • これはノードの位置を調整したい場合に利用できる(らしい)

丸エッジ線

flowchart

hoge --o fuga
foo -- text --o bar
fizz --o |text| buzz
alice o--o bob
alpha o--o |text| beta
  • --o で、ノードを端が丸の線で繋げることができる
  • -- ラベル --o または --o |ラベル| で、ラベルをつけられる
  • o--o で双方向になる
  • 双方向の場合は o--o |ラベル| でラベルをつけられる

×エッジ線

flowchart

hoge --x fuga
foo -- text --x bar
fizz --x |text| buzz
alice x--x bob
alpha x--x |text| beta
  • --x で、ノードを端が×の線で繋げることができる
  • -- ラベル --x または --x |ラベル| で、ラベルをつけられる
  • x--x で双方向になる
  • 双方向の場合は x--x |ラベル| でラベルをつけられる

リンクの連鎖

flowchart

hoge --> fuga --> piyo
  • ノード間のリンクは、1行にまとめて書くことができる

複数のノードをまとめてリンクさせる

flowchart

hoge --> foo & bar --> fuga
  • & でノードをつなげることで複数のノードにまとめてリンクをつなげることができる
  • ただし、やりすぎると読みづらくなるらしいので注意が必要

線の長さを調整する

flowchart

start --> hoge --> foo --> bar
start ---> fuga
start ----> piyo
  • ---> のように線の部分を伸ばすことで、矢印の長さを任意に調整できる
  • 他の線の伸ばし方は下記を参照
長さ 1 2 3
実線 --- ---- -----
矢印 --> ---> ---->
太線 === ==== =====
太線矢印 ==> ===> ====>
破線 -.- -..- -...-
破線矢印 -.-> -..-> -...->

向きの指定

flowchart LR

hoge --> fuga
  • flowchart <向き> と記述することで、フローチャート全体の向きを指定できる
  • 向き には、以下のいずれかを指定できる
向き 説明
TB 上から下(デフォルト)
TD 上から下
BT 下から上
RL 右から左
LR 左から右

サブグラフ

flowchart

subgraph sub1
    foo --> bar
end

bar --> hoge
  • subgraph <ID> ... end でサブグラフを定義できる

サブグラフのラベルを変更する

flowchart

subgraph sub1 [Sub A]
    foo --> bar
end

bar --> hoge
  • subgraph <ID> [<ラベル>] とすることで、サブグラフのラベルを変更できる

リンクをつなげる

flowchart

subgraph sub1
    foo --> bar
end

subgraph sub2
    fizz --> buzz
end

subgraph sub3
    hoge --> fuga
end

sub1 --> sub2
buzz --> fuga
  • サブグラフ同士、サブグラフとノード、いずれもリンクをつなげることができる

サブグラフを入れ子にする

flowchart

subgraph sub1
    foo --> bar
    subgraph sub2
        fizz --> buzz
    end
end
  • サブグラフは入れ子にできる

サブグラフごとに向きを指定する

flowchart LR

subgraph sub1
    hoge --> fuga
end

subgraph sub2
    direction LR

    subgraph sub3
        fizz --> buzz
    end
    subgraph sub4
        direction RL
        alice --> bob
    end

    foo --> sub3
    sub3 --> sub4
end

sub1 --> sub2
  • direction <向き> と記述することで、サブグラフごとに向きを指定できる
  • 未指定の場合は、デフォルトは TB (上から下)になる
    • 親の向きが継承されるとかではない

向き指定の限界

flowchart LR

subgraph sub1
    direction TB
    foo --> bar
end
subgraph sub2
    direction TB
    fizz --> buzz
end

hoge --> sub1
hoge --> fizz
  • サブグラフ内のノードに外部からリンクがつながっている場合、 direction の指定は無視される
    • この場合、親の向きが適用される
  • 上の例では、 sub2 は direction TB (上から下) を指定しているが、 fizz ノードが外部からリンクされているため親の向きである LR (左から右) になっている

スタイル指定

flowchart

hoge

style hoge fill:pink,color:red,stroke:green,stroke-width:3px,stroke-dasharray: 5
  • style <ノードID> <スタイル定義> で、ノードのスタイルを調整できる

クラス定義

flowchart

hoge --> fuga

classDef warn fill:yellow
classDef dotted stroke-dasharray: 5
class hoge warn
class hoge,fuga dotted
  • classDef <クラス名> <スタイル定義> で、スタイルのクラスを定義できる
  • class <ノードID> <クラス名> で、ノードに対してスタイルのクラスを割り当てられる
    • ノードID はカンマ区切りで複数指定できる

FontAwesome を使用する

flowchart

hoge["fa:fa-file-lines Hoge"] --> fuga["fa:fa-keyboard Fuga"]

image.png

  • ラベルの中で fa:クラス名 と指定することで FontAwesome のアイコンを利用できる
    • 使えるのは無償版だけっぽい？
  • Qiita では利用できないっぽい

◆ガントチャート

Gantt diagrams | Mermaid

  • ガントチャートを記述できる

基本

gantt

dateFormat YYYY-MM-DD
tickInterval 1day

task1: 2023-03-20, 1d
task2: 2d
task3: 3d
  • <タスク名> : <メタデータ> の書式で各タスクを記述する
  • メタデータには、そのタスクの開始・終了などを記述する
  • いくつか書式があるが、ここでは開始日と期間を指定しているもの(task1)と期間だけを指定しているもの(task2, task3)を記載している
    • 開始を指定していない場合は、1つ前のタスクの終了がそのまま次のタスクの開始になる

はまりポイント

gantt

tickInterval 1day

task1: 2023-03-20, 1d
  • dateFormat YYYY-MM-DD を指定していないと、開始や終了がなんだか中途半端なところになる
  • この理由は、ガントチャートを時刻まで表示させるとわかる
gantt

tickInterval 3hour
axisFormat %m/%d %H

task1: 2023-03-20, 1d
  • １日の長さは、9:00が起点になっている
  • dateFormat YYYY-MM-DD を指定すると、起点が 00:00 になって日付の線と一致するようになる
gantt

dateFormat YYYY-MM-DD
tickInterval 1day

task1: 2023-03-20, 1d
  • ドキュメントには dateFormat のデフォルトは YYYY-MM-DD と書かれている
  • なので指定しなくても良いだろと思って未指定にしていると、上記のように１日の起点が 09:00 になって少しずれたガントチャートになってしまう

メタデータの指定

メタデータ部分は以下のような構文となっている。

  • 大きく tag, taskID, startDate, endDate から成る
  • endDate 以外は省略が可能
    • ただし startDate が省略できるのは、そのタスクの開始が自動的に定まる場合のみ
    • 例えば1つ前のタスクが存在すれば startDate は省略できる
      • 1つ前のタスクの終了が、そのまま次のタスクの開始になるため

開始の指定

gantt

dateFormat YYYY-MM-DD

%% 開始を日付で指定
task1: 2024-01-01, 1d

%% 開始を省略
task2: 2d

%% 開始を他のタスクで指定
task3: after task1, 3d
  • task1 は開始を日付(date)で指定している
  • task2 は開始を省略している
    • この場合、 task2 の開始は task1 (1つ前のタスク)の終了になる
    • 1つ前のタスクが定まらない場合、開始は省略できない
  • task3 は after task1 (task1 の後) という形で相対的な指定をしている

終了の指定

gantt

dateFormat YYYY-MM-DD

%% 終了を期間で指定
task1: 2024-01-01, 1d

%% 終了を日付で指定
task2: 2024-01-02, 2024-01-05

%% 終了を他のタスクで指定
task3: 2024-01-01, until task2
  • task1 は、そのタスクの期間を指定することで相対的な終了を指定している
  • task2 は、日付で絶対的な終了を指定している
  • task3 は、他のタスクを指定することで終了を指定している
    • 他のタスクの開始が、このタスクの終了になる

期間の指定方法

  • 公式ガイドでは、期間の指定書式について明確な説明は見つけられなかった
  • 1d, 1h のように、期間の量と単位をつなげて記述するもよう
  • 1d1h のように、異なる単位をつなげて記述することはできない
  • 量は、1.1のように小数点も指定可能
  • 単位については、たぶん以下が指定可能
文字 単位
y 年
M 月
d 日
w 週
h 時
m 分
s 秒

タスクのID

gantt

dateFormat YYYY-MM-DD
tickInterval 1day

task1: t1, 2024-01-01, 1d
task2: t2, after t1, 2d
  • taskID を指定することで、タスクのIDを定義できる
  • 定義したIDは、 after taskID や until taskID などで指定できる

タグ

gantt

dateFormat YYYY-MM-DD
tickInterval 1day

normal task: 2024-01-01, 1d
active task: active, 1d
done task: done, 1d
crti task: crit, 1d
m1: milestone, 2024-01-05, 1d
  • タグには以下のいずれかを指定できる
タグ 説明
active アクティブ
done 完了済み
crit クリティカル
milestone マイルストーン

マイルストーンのマーク位置

  • マイルストーンのマークは、開始と終了の中央のところに表示されるので注意が必要
  • 日付の線の上にマークを乗せたい場合は、期間を短くするなどの調整が必要
gantt

dateFormat YYYY-MM-DD
tickInterval 1day

m1: milestone, 2024-01-05, 1d
m2: milestone, 2024-01-05, 1s

セクション

gantt

dateFormat YYYY-MM-DD
tickInterval 1day

section A
task1: 2024-01-01, 1d
task2: 1d

section B
task3: 1d

section C
task4: 1d
  • section <名前> で、タスクをセクションに分けることができる

開始・終了の日付フォーマット

gantt

dateFormat HH:mm
axisFormat %H:%M

task1: 00:00, 3h
task2: 07:00, 15:30
  • dateFormat <フォーマット> で、開始・終了に指定する日時のフォーマットを指定できる
  • フォーマットに指定できる文字の一部を以下に記載
文字 例 説明
YYYY 2014 4桁の年
MM 01..12 月
DD 01..31 日
HH 00..23 時間
mm 00..59 分
ss 00..59 秒
SSS 000..999 ミリ秒

軸の日付フォーマット

gantt

dateFormat YYYY-MM-DD
axisFormat %m-%d %H:%M

task1: 2024-01-01, 1d
task2: 1d
  • axisFormat <フォーマット> で、横に表示される日付のフォーマットを指定できる
  • フォーマットに指定できる文字の一部を以下に記載
フォーマット 説明
%Y 西暦(4桁)
%y 西暦(2桁)
%m 月
%d 日
%a 曜日(省略形)
%H 時間(24時間表記)
%M 分
%S 秒
%L ミリ秒

軸の間隔を指定する

gantt

dateFormat YYYY-MM-DD
axisFormat %H:%M
tickInterval 30minute

task1: 2024-01-01, 1.5h
task2: 90m
  • tickInterval <間隔> で、時間軸の間隔を指定できる
  • 間隔 は 30minute のように間隔の量と単位で指定する
  • 単位には以下が指定できる
単位 説明
month 月
week 週
day 日
hour 時
minute 分
second 秒
millisecond ミリ秒

日付に関するフォーマットが全然統一されてなくてヤバイ

今日のマーカーを削除する

gantt

dateFormat YYYY-MM-DD

task1: 2024-03-25, 2d
task2: 3d

image.png

  • デフォルトではシステム日時の場所に赤い線が表示される
  • これを非表示にしたい場合は、以下のように設定する
gantt

todayMarker off
dateFormat YYYY-MM-DD

task1: 2024-03-25, 2d
task2: 3d

image.png

  • todayMarker off とすれば、線が表示されなくなる

非稼働日を設定する

gantt

dateFormat YYYY-MM-DD
axisFormat %m/%d(%a)
tickInterval 1day
excludes weekends, 2024-03-20

task1: 2024-03-14, 3d
task2: 2d
  • excludes <非稼働日> と指定することで、特定の日を非稼働日にできる
  • 非稼働日は除外した形でタスクの線が引かれるようになる
  • weekends と指定すると、すべての土日が非稼働日になる
  • カンマ (,) 区切りで複数の非稼働日を指定できる
  • YYYY-MM-DD 書式で特定の日を非稼働日にすることもできる
  • monday のように曜日指定もできる

◆マインドマップ

Mindmap | Mermaid

image.png

  • マインドマップを記述できる
  • Qiita ではうまく動作しないもよう

基本

mindmap
root
    hoge
        foo
        bar
    fuga
        fizz
        buzz
    piyo

image.png

  • 各ノードをインデントの高さで分類していく形で記述する
  • 最初にルートノードを記述し、その下にインデントを下げて一段目のノードを並べる
    • mindmap とルートノードの間に空行があるとパースエラーになるので注意

ラベルを変更する

mindmap
root
    hoge[foo bar]
    fuga[
        fizz
        buzz
    ]

image.png

  • ノード名の後ろに [テキスト] と続けることで、ノードのラベルを変更できる
  • 改行はそのまま反映される（前後はトリムされるもよう）

ノードの形状を変える

mindmap
root
    a["[長方形]"]
    b("(角丸長方形)")
    c(("((円))"))
    d))"))爆発(("((
    e)")雲("(
    f{{"{{六角形}}"}}
    デフォルト

image.png

  • 角括弧 [] で長方形
  • 丸括弧 () で角丸長方形
  • 丸括弧2つ (()) で円
  • 丸括弧2つを逆向き ))(( で爆発
  • 丸括弧を逆向き )( で雲
  • 波括弧2つ {{}} で六角形

PlantUML との比較

※個人的な感想です
※同じ図がPlantUMLに無い場合は、用途が近いっぽい図と比較(その場合は括弧でPlantUML側の図を記載→「ブロック図(コンポーネント図)」など)

図 Mermaid PlantUML 備考
クラス図 △ ○ PlantUMLのほうがJava実装ぽくかけたりするのが嬉しい(継承や実現の定義が楽にできるので)
シーケンス図 ○ ○ ライフラインの生成を使うと順序の宣言が冒頭にまとめられないのがちょっと微妙。それ以外は必要十分な機能を備えている？
ER図 △ ○ Mermaidのほうは属性の必須を表現できないのが致命的な気がする(コメントで表現するしかない？)。
XYチャート ○ -
Pieチャート ○ -
ブロック図(コンポーネント図) ○ △ Mermaidのほうがシンプルなのと、配置の制御がグリッドシステム？なのが調整しやすそうな気がして個人的に好み
Git Graph ○ -
ガントチャート ○ ○ PlantUMLのほうが高機能そうだが、簡単なものをサクっと作りたい場合はMermaidも良いかも
フローチャート(アクティビティ図) ○ △ PlantUMLのアクティビティ図は文法に癖があると個人的に感じる。Mermaidのフローチャートの方が柔軟に書けそうな気がする
マインドマップ ○ ○ PlantUMLの方が高機能だが最低限の機能はあるので軽く書く分にはMermaidでも十分そう

UMLの記述に関しては、さすが名前にUMLを冠しているだけあってPlantUMLの方が便利な印象。
クラス図・シーケンス図（あとER図）については、今後もPlantUMLで良いかなと感じた。

それ以外でMermaidとPlantUMLの両方でサポートされている図に関しては、PlantUMLの方が機能は豊富で細かい調整がきくようになっている印象。
ただし、高機能な分覚えることが多くて学習コストや調整コストは高くなりそう。
Mermaidの方は、機能はPlantUMLに比べて少ないかもしれないが、その分覚えることは少なくなっていて手早く覚えてサクッと書きたい場合に有用そうな印象。

XYチャートやGitGraphなど、PlantUMLに無くて便利そうなものはMermaidを活用していくのがよさそう。

参考

78
59
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
Sign upLogin
78
59

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?