ForMeでmermaid(ダイアグラム作成)の使い方

April 17, 2023
ForMe mermaid 操作 ダイアグラム

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

Next Previous

写真つきフォーム機能

May 14, 2024
データ入力 操作 ForMe QC KAIZEN

FormeStudio26.6の機能説明

November 16, 2023
excel Excel for Mac Mac 操作 ForMe FormeStudio

フォームシート追加機能

October 12, 2023
excel FormeStudio 操作