UMLツール「Mermaid」をVSCodeで使う方法

今回、Mermaidを使う機会があったのでVSCodeでも使いたく設定方法を記載しました。

イメージ

拡張機能

下記の機能をインストールします。

Markdown Preview Mermaid Support

Mermaid Markdown Syntax Highlighting

実際に書いてみる

UseCase.md

sequenceDiagram
    
    actor  user as ユーザ
    participant  server as サーバ

    user->>server: Hello要求
    alt OK
        server-->user:200
    else error
        server-->user:500
    end
    server->>user: World応答

プレビュー表示

ファイルの上のカーソルを当てて右クリック「Open Preview」を実行すると表示されます。

サイト

Mermaid のテーマ・スタイルの変更方法

マーメイド#8 シーケンス図２

一度は試してほしい！シーケンス図を書くならマーメイド記法

一度は試してほしい！シーケンス図を書くならマーメイド記法

【Mermaid】MermaidでシステムフローをMarkdownで管理してみよう

ER図の作図について、 Draw.io, PlantUML, Mermaid を比較してみる。（VSCode拡張機能など）

ER図の作図について、 Draw.io, PlantUML, Mermaid を比較してみる。（VSCode拡張機能など）

Visual Studio Code で UML を描こう！