やってみた

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

こんにちは中川です。

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

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

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

VSCode Extension

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

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

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

author img for Yoshiki Nakagawa
Yoshiki Nakagawa

Web業界の発展を期に、Web開発、特にPHPに目覚めアシアルに入社。 アシアル入社後は、PHP/JavaScriptによるWebシステム開発および、Cordova/Monacaを利用したモバイルアプリの開発に従事。 プロジェクトマネージャー兼プログラマとして、受託開発チームで様々なシステム開発に携わっている。 現在はJavaScriptでのフロントエンド開発及び、Go言語でのバックエンド開発に興味がある。

記事一覧

前の記事へ

次の記事へ

一覧へ戻る

「やってみた」カテゴリの最新記事

PAGE TOP