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点ドット > ファイル名 > テキストエディタで開くを選ぶとプレビュー付きのコードエディタでコードを編集できます。