Visual Studio Code で Mermaid をプレビューする方法

Visual Studio Code で Mermaid をプレビューする方法

Mermaid Markdown はフローチャートやガントチャート、円グラフなどをMarkdownに描けるオープンソースのライブラリです。

これを使うと、Markdownドキュメントに簡単に図形を書くことができます。。

この記事では、Visual Studio Code で Mermaid をプレビューする方法を紹介します。

1. 拡張機能をインストール

Visual Studio Code で Markdown Preview Mermaid Support をインストールします。

検索すると以下のような画面で見つけることができます。

ちなみに、github.dev の Visual Studio Code にもこの拡張機能をインストールできます。

2. Mermaid Markdown の書き方

まず、Visual Studio Code で .md ファイルを作成します。

その後、以下のようにmermaidをキーワードにしてコードを記述します。

```mermaid
flowchart TD
    Start --> Stop
    subgraph on
    Start --> |text|PointA
    end
    PointA --- Stop
``` 

このコードは上から下へ記述するフローチャートで、この拡張機能でプレビューすると以下のようになります。

画面全体を出すと、こんな感じですね。

Mermaid Markdown は以下にあります。

https://mermaid-js.github.io/mermaid/#/

3. シーケンス図のサンプル

シーケンス図も書けます。

```mermaid
sequenceDiagram
    部下->>上司: 明日、休みをください
    %% this is a comment
    上司-->>部下: 仕事は終わってるのか?
```

4. 円グラフ

円グラフだって描けます。。

```mermaid
pie
    title 一日の時間の使いかた
    "睡眠" : 8
    "仕事" : 8
    "通勤時間" : 1
    "朝食" : 0.5
    "昼食" : 0.5
    "夕食" : 0.5
    "お風呂" :  0.5
    "休憩" :  2
    "勉強" :  3
```

5. Mermaid Markdown で描けるもの

公式ドキュメントによると、以下のものを描けるようです。

  • Flowchart
  • Sequence diagram
  • Class Diagram
  • State Diagram
  • Entity Relationship Diagram
  • User Journey
  • Gantt
  • Pie Chart
  • Requirement Diagram

速攻でメモできる QuickNote リリースしました!

QuickNoteは動作が超軽量でサクサクかけるノートアプリです。一瞬の閃きを逃さずにノートを開き書き始めることができます。 アカウント登録も不要です。お試しあれ!

Excel操作をコマンドで! proBoarderExcel

Excelはマウスで操作するのが基本ですが、マウス操作に疲れてはいませんか? キーボードでExcel操作ができるようになるアプリです。オープンソースで無料です。

積み上げ! Daily Stack リリースしました!

Daily Stack は日々の積み上げを管理するToDoアプリです。過去の積み上げの振り返りだけでなく、ツイート機能もあります。 アカウント登録不要ですぐに使い始めることができます。

ExecNote.app リリースしました!

ExecNoteは、コードが実行できるMarkdownアプリケーションです。Markdownドキュメント内に記載したコードをクリックすると実行ができます。わざわざターミナルを 起動させる必要がありません!無料ですのでもしよければダウンロードをお願いします。

About Me

11年目のシステムエンジニアです。アプリで生活や仕事を改善したい🐱仕事効率化、自動化のアプリ開発が得意です、ご相談ください。 🚀エンタメ系アプリの開発も模索中🐬社内SEや個人アプリ開発者、システムエンジニアになりたい人と繋がりたい🐱