やってみた
2022年2月17日
ダイアグラム作成ツール Mermaid を試してみました
nakagawayoshiki
こんにちは中川です。
先日、 GitHub のMarkdownファイルで Mermaid がサポートされ ると案内されました。
https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/
私は、今までは図といえば、PlantUMLで書くことが多かったのですが、今後は世の中の流れ的には Mermaid が主流になるような気もしますので、ちょっと試してみました。
VSCode Extension
普段使っているVScodeで編集したいため、エクステンションを探してみたところ以下のものが見つかりました。
プレビューに関しては、PlantUML時代から元々使っていた「Markdown Preview Enhanced」が Mermaid にも対応していました。
- ※ Markdown Preview Mermaid Support (VSCode標準のマークダウンプレビューを利用する場合)
Mermaid
https://mermaid-js.github.io/mermaid/
サポートされている図
- Flowchart
- Sequence diagram
- Class Diagram
- State Diagram
- Entity Relationship Diagram
- User Journey
- Gantt
- Pie Chart
- Requirement Diagram
それでは、以下、公式ドキュメントにあった簡単なサンプルで試してみたいと思います。
Mermaid + VSCode
Flowchart
```mermaid
%%{init:{'theme':'neutral'}}%%
flowchart TD
A[Start] --> B{Is it?};
B -->|Yes| C[OK];
C --> D[Rethink];
D --> B;
B ---->|No| E[End];
```※↑無難そうな neutral テーマに変更してみました。
Sequence diagram
```mermaid
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```最後に
今回は、 Mermaid を試してみました。私が普段作るような図であれば、PlantUMLと比べても特に問題なさそうで、書き心地もよくシンプルに書けるような感じを受けました。
今までは PlantUMLを使っていましたが、今後は Mermaid を使う機会が増えるのかなと思いました。
