ForMeでmermaid(ダイアグラム作成)の使い方
ForMeでは代表的なダイアグラム作成コードであるmermaidを利用することができます。また作成したダイアグラムのプレビューからファイル共有、細かく編集したい場合にはSVGファイルとしてプレビュー付きのコードエディタで開くこともできます。
主なダイアグラムの種類
graph
```mermaid
graph
A --> B
A --> 1
1 --> 2
1 --> 3
1 --> 4
3 --> 5
5 --> 6
B --> C
C --> D
C --> E
```
graphLR
```mermaid
graph LR
A[a]
B{b}
C[c]
A --> B
B -- YES --> C
B -- NO --> C
```
gantt
```mermaid
gantt
title
TITLE
section A
term1: done,2022-05-23,2022-10-01
term2: crit,2022-10-02,2022-12-15
```
classdiagram
```mermaid
classDiagram
class A{
-int b
-c()
}
class D{
-e()
}
class F{
-int g
-h()
}
A <|-- D
A --|> F
F --|> D
```
stateDiagram
```mermaid
stateDiagram
[*] --> A
A --> B
B --> C
C --> A
C --> [*]
```
sequenceDiagram
```mermaid
sequenceDiagram
autonumber
participant A as a
participant B as b
A ->> B:cdef
```
画像ファイルとして共有
コードエディタのプレビュー画面をダブルタップすることで共有メニューが表示されます。このとき共有を選ぶとSVGとしてエクスポートされます。任意のフォルダに保存後、3点ドット > ファイル名 > テキストエディタで開くを選ぶとプレビュー付きのコードエディタでコードを編集できます。
本家のMermaidのサイトを覗いてみると表現豊かにダイアグラムが作成できることがわかります。試しに使ってみてください。