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のサイトを覗いてみると表現豊かにダイアグラムが作成できることがわかります。試しに使ってみてください。