###### tags: `example` `mermaid` `フローチャート` `シーケンス図` `状態遷移図` `クラス図` # mermaidテスト > [time=Fri, Jan 24, 2020 4:15 PM] [name=KentoSawaya] ## はじめに gitで作図ができるmermaid.jsについて調べてみました。Markdownの中にmermaidを埋め込むことで、フローチャートや状態遷移図などが作図できるようです。今後、仕様書をテキストベースで作成し、gitで差分管理する足がかりになればいいなと思いまとめました。 ## 例 ### フローチャート ```mermaid graph TD ST((Start)) --> Operation[Some operation] Operation --> Condition{Some condition} Condition -- yes --> Operation2[Some operation2] Operation2 --> END((End)) Condition -- no --> END ``` ```SHELL= graph TD ST(Start) --> Operation[Some operation] Operation --> Condition{Some condition} Condition -- yes --> Operation2[Some operation2] Operation2 --> END((End)) Condition -- no --> END ``` --- ### 状態遷移図 ```mermaid graph LR ST -- 0 --> ST((Start)) ST -- 1 --> a((A)) a -- 0 --> a a -- 1 --> b((B)) b -- 0 --> b b -- 1 --> ST ``` ```SHELL= graph LR ST -- 0 --> ST((Start)) ST -- 1 --> a((A)) a -- 0 --> a a -- 1 --> b((B)) b -- 0 --> b b -- 1 --> ST ``` --- ### シーケンス図 ```mermaid sequenceDiagram # エイリアス participant cl as クライアント participant sv as サーバー participant db as データベース # データ取得コード cl ->>+ sv : データ取得要求 sv ->>+ db : select発行 db -->>- sv : select結果 sv -->>- cl : データ取得要求結果 alt 正常終了 Note over cl : 取得データ表示 else エラー Note over cl : エラー表示 end ``` ```SHELL= sequenceDiagram # エイリアス participant cl as クライアント participant sv as サーバー participant db as データベース # データ取得コード cl ->>+ sv : データ取得要求 sv ->>+ db : select発行 db -->>- sv : select結果 sv -->>- cl : データ取得要求結果 alt 正常終了 Note over cl : 取得データ表示 else エラー Note over cl : エラー表示 end ``` --- ### ガントチャート ```mermaid gantt title ガントチャートテスト dateFormat YYYY-MM-DD section 製品A開発セクション 設計 : done, task1, 2017-12-11, 2017-12-15 実装 : active, task2, 2017-12-18, 5d 単体テスト : task3, after task2, 5d 結合テスト : task4, after task3, 5d ``` ```SHELL= gantt title ガントチャートテスト dateFormat YYYY-MM-DD section 製品A開発セクション 設計 : done, task1, 2017-12-11, 2017-12-15 実装 : active, task2, 2017-12-18, 5d 単体テスト : task3, after task2, 5d 結合テスト : task4, after task3, 5d ``` --- ### クラス図 ```mermaid classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label ``` ```SHELL= classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label ``` --- ## 注意点 * git branchもmermaidで記述できるようですがHackMDではあまり上手く動きません。**git branchをmermaidで記述するとHackMDがハマってしまってその後一切使用できなくなることもあります。**(2020.01.24現在) ## 参考 [機能紹介（HackMD公式)](https://hackmd.io/s/features-jp) [mermaidを使ってMarkdownでシーケンス図を作成](https://qiita.com/poro1985/items/b23bad93bf721a195f15) [mermaid公式](https://mermaid-js.github.io/mermaid/#/)