マークダウンでいろいろな図を書けるmermaidというJSライブラリをつかって、いろいろな図を書いてみようと思います。
mermaidに対応した、エディタや環境はいろいろありますが、以下試してみました。
# 環境
# HackMD
https://hackmd.io/
無料で使えるWEBサービス。
メモ作成に非常に便利!
# Visual Studio Code
https://github.com/hackmdio/vscode-hackmd
HackMDとほぼ同じフォーマットでマークダウンのプレビューができる機能拡張。
# VuePress
こちらもプラグインを入れることで、利用可能。
https://github.com/eFrane/vuepress-plugin-mermaidjs
# GitLab
標準でmermaid.jsが入っているようで、マークダウンのプレビューで図が表示されます。
GitLab Markdown | GitLab
※ただし、状態遷移図と円グラフは表示されませんでした。
# mermaidの書き方
コードブロックの言語指定にmermaid
を指定することで、いろいろな図を描くことができます。
# フローチャート
```mermaid
graph TD
1(開始) --> 2{A or B or C?}
2 --> A
2 --> B
2 --> C
C -.->|振り出しに戻る| 1
```
Flowchartの詳しい書き方は、こちら
https://mermaid-js.github.io/mermaid/#/flowchart?id=flowcharts-basic-syntax
# シーケンス図
```mermaid
sequenceDiagram
会社A->> 元受け: 見積りしてください
元受け->> 下請け: 見積りしてください
下請け-->>元受け: 要件ください
元受け->> 下請け: 多分こんな感じ
下請け-->>元受け: 分かった!見積りつくります!
会社A->> 元受け: 要件はこれです!
元受け->> 下請け: やっぱり要件はこれで!
Note right of 下請け: マジか!!!
下請け-->>元受け: 見積りです
Note over 元受け: ちょっと上乗せして
元受け-->>会社A: 見積りです
```
Sequence diagramsの詳しい書き方
https://mermaid-js.github.io/mermaid/#/sequenceDiagram?id=sequence-diagrams
# ガントチャート
```mermaid
gantt
dateFormat MM/DD
title ガントチャートサンプル
section Aセクション
終わったタスク :done, des1, 01/06,01/08
今やってるタスク :active, des2, 01/09, 3d
これからやる作業 : des3, after des2, 5d
これからやる作業 2 : des4, after des3, 5d
section クリティカルタスク
終わった :crit, done, 01/06,24h
仕様作成 :crit, done, after des1, 2d
テスト仕様作成 :crit, active, 3d
今後のクリティカル作業:crit, 5d
テスト実施 :2d
その他 :1d
```
Gantt diagramsの詳しい書き方
https://mermaid-js.github.io/mermaid/#/gantt?id=gantt-diagrams
# クラス図
```mermaid
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()
}
```
Class diagramsの詳しい書き方
https://mermaid-js.github.io/mermaid/#/classDiagram?id=class-diagrams
# 状態遷移図
```mermaid
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```
State diagramsの詳しい書き方
https://mermaid-js.github.io/mermaid/#/stateDiagram?id=state-diagrams
# 円グラフ
```mermaid
pie
title ボランティアが飼ったペット
"犬" : 386
"猫" : 85
"ねずみ" : 15
```
Pie chart diagramsの詳しい書き方
https://mermaid-js.github.io/mermaid/#/pie?id=pie-chart-diagrams