Mermaid入門
テキストでフローチャートなどを書くことができるツールがMermaidです。
最も簡単に試す方法としてはVSCodeの拡張機能があります。
私はMarkdown Preview Enhancedを使っています。
目次
フローチャート
```mermaid
flowchart
a-->b[長方形]
b-->c(角丸の図形)
c-->d([両端が丸い図形])
d-->e{ひし形}
```
flowchart
a-->b[長方形]
b-->c(角丸の図形)
c-->d([両端が丸い図形])
d-->e{ひし形}
```
```mermaid
flowchart
a-->b
a---c
a-->|線の注釈|d
b==>|太線|e
b.->|点線|f
b--o|丸矢印|g
b--x|X矢印|h
d<-->|双方向|i
```
flowchart
a-->b
a---c
a-->|線の注釈|d
b==>|太線|e
b.->|点線|f
b--o|丸矢印|g
b--x|X矢印|h
d<-->|双方向|i
```
```mermaid
flowchart
subgraph 日本ハム
栗山==>新庄
end
栗山.->中田
subgraph 巨人
原-->中田
end
```
flowchart
subgraph 日本ハム
栗山==>新庄
end
栗山.->中田
subgraph 巨人
原-->中田
end
```
ガントチャート
```mermaid
gantt
title 仕事
dateFormat YYYY-MM-DD
axisFormat %m/%d
section 準備
検討: a1, 2022-02-22, 1d
方針決定: a2, after a1, 3d
section 資料作成
検討: b1, after a2, 1d
資料作成: b2, after b1, 3d
検証: b3, after b2, 1d
```
gantt
title 仕事
dateFormat YYYY-MM-DD
axisFormat %m/%d
section 準備
検討: a1, 2022-02-22, 1d
方針決定: a2, after a1, 3d
section 資料作成
検討: b1, after a2, 1d
資料作成: b2, after b1, 3d
検証: b3, after b2, 1d
```
シーケンス
```mermaid
sequenceDiagram
花子->太郎: 矢印なし
花子-->太郎: 点線矢印なし
花子->>太郎: 矢印あり
花子-)太郎: 矢印あり
```
sequenceDiagram
花子->太郎: 矢印なし
花子-->太郎: 点線矢印なし
花子->>太郎: 矢印あり
花子-)太郎: 矢印あり
```
円グラフ
```mermaid
pie title 果物と野菜
"りんご": 777
"バナナ": 555
"人参": 333
```
pie title 果物と野菜
"りんご": 777
"バナナ": 555
"人参": 333
```
[ 2022年2月22日 | カテゴリー: デジタル | タグ: Markdown Preview Enhanced , Mermaid , VSCode , 入門 ]
« 大和市小1児童死亡事件とほら吹き男爵 | かけそばの食塩相当量 »
コメントを残す