困った時の自分用メモ

読んだ本を考察してメモったり、自分でいじった物の感想をメモったりする場。週1更新を目指します。

VSCodeの話~Mermaidでフローチャート作成をしてみる~

ここの所、エンジニアさんに作業指示を出す仕事が増えてきており、作業指示をする際に文章では伝わらない事も多いので、フローチャートを書いて渡していた。

今は、

GitMind

gitmind.com



というサービスを使用しており、フローチャートを作るだけなら特に不自由はしていないのだが、
フローチャートの設計から、他のデータ出力が必要になりそうだったので、言語からフローチャートが作成できないか調べていた所、
どうやら、VSCode上からMermaidが使用できるという事だったので、試してみた。

〇Mermaidって?

mermaid-js.github.io
〇導入方法

1.VSCodeのインストール

2.VSCodeの日本語化

2-1、コマンドパレット選択

f:id:mochimoffu:20211210173050p:plain

2-2、Configure Display Languageを入力

f:id:mochimoffu:20211210173053p:plain

 

2-3、追加言語のインストールを選択f:id:mochimoffu:20211210173055p:plain

2-4、Japanese Language Pack ~~をインストールして、再起動

f:id:mochimoffu:20211210173057p:plain


3、Mermaid使えるようにする拡張機能を入れる
3-1、表示→拡張機能を開く

f:id:mochimoffu:20211210173357p:plain

3-2、拡張機能に「Markdown Preview Enhanced」を入力して、インストール

f:id:mochimoffu:20211210173359p:plain

 

4、こんな感じ

```

# 題名
## 小題
```mermaid
flowchart TD
    A[Start] --> B{Is it?};
    B -- Yes --> C[OK];
    C --> D[Rethink];
    D --> B;
    B -- No ----> E[End];
```

## 小題2
```mermaid
flowchart TD
    A[Start] --> B{Is it?};
    B -- Yes --> C[OK];
    C --> D[Rethink];
    D --> B;
    B -- No ----> E[End];
```


```