ダイアグラム作成ツール Mermaid を試してみました

こんにちは中川です。

先日、 GitHub のMarkdownファイルで Mermaid がサポートされると案内されました。

https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/

私は、今までは図といえば、PlantUMLで書くことが多かったのですが、今後は世の中の流れ的には Mermaid が主流になるような気もしますので、ちょっと試してみました。

普段使っているVScodeで編集したいため、エクステンションを探してみたところ以下のものが見つかりました。

プレビューに関しては、PlantUML時代から元々使っていた「Markdown Preview Enhanced」が Mermaid にも対応していました。

• Markdown Preview Enhanced

• Mermaid Markdown Syntax Highlighting

• ※ Markdown Preview Mermaid Support (VSCode標準のマークダウンプレビューを利用する場合)

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 を使う機会が増えるのかなと思いました。