Mermaid.jsでグラフを簡単に描く方法

読書メモを図にしたいとき、簡単なグラフを作成できるツールがあったら便利です。

調べたらいくつか候補がありました。

今回は、手軽に使えて、拡張性もありそうなMermaid.jsを試してみます。

Mermaid.jsとは？
Visual Studio CodeでMermaid.jsを使う方法
Markdown Preview Enhancedの使い方
図の出力
見た目のカスタマイズ
参考

Mermaid.jsとは？

Mermaid.jsは、JavaScriptでグラフやチャート図を描くためのライブラリーです。

（英語の「mermaid」は、日本語で「人魚」という意味）

（公式サイト）

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

mermaid-js.github.io

f:id:jsstudy:20200419184404p:plain

Mermaid.jsは、いろんなところで使われているようです。

（採用例）https://mermaid-js.github.io/mermaid/#/./integrations

The following is a list of different integrations and plugins where mermaid is being used

Editor Plugins

Vs Code

Visual Studio CodeでMermaid.jsを利用するためのプラグインが提供されていました。

Visual Studio CodeでMermaid.jsを使う方法

VSCodeでMermaid.jsを使うためのプラグインがいくつか提供されていました。

marketplace.visualstudio.com

「Markdown Preview Mermaid Support」は、Mermaid.js専用のプラグインです。

Mermaid.jsを使うだけならこれでもOKですが、他の作図ツール（PlantUMLなど）も使いたい場合は、より多機能な「Markdown Preview Enhanced」というプラグインでもOKです。

marketplace.visualstudio.com

「Markdown Preview Enhanced」は、Mermaid.jsにも対応しており、さらに他の作図ツールにも対応しています。

自分が使っているVisual Studio Codeを見たら、以前に「Markdown Preview Enhanced」をインストールしてあったので、そのまま使ってみることにしました。

（…忘れてた😅）

Markdown Preview Enhancedの使い方

まず、マークダウン記法の文書を作るために、Visual Studio Codeで「mermaid_test.md」などという名前のファイルを作成します。

＝拡張子が「md」というファイルですね。

（参考）マークダウンとは？

ja.wikipedia.org

Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつである。

本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。

backlog.com

「mermaid_test.md」に、以下の内容を書いてみます。

```mermaid
graph TB
  a -->
  b & c -->
  d -->
  e -->
  f -->
  d
```

バッククオート記号「`」は、Shiftキーを押しながら「@」を押せば入力できます。

詳しいMermaidの書式（グラフの書き方）は、Mermaidのリファレンスを見てね！

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

mermaid-js.github.io

Visual Studio Codeの右上にあるマークダウンのプレビューボタンをクリックします。

f:id:jsstudy:20200419195258p:plain

すると、Visual Studio Codeの画面右側に、グラフのプレビューが表示されます。

f:id:jsstudy:20200419195736p:plain

あれ？

なんか色が反転していて、黒くなってる！！！

「Markdown Preview Enhanced 色黒い」でGoogle検索したら、解決方法が紹介されていました。

qiita.com

VSCodeで、プラグインの設定を変更したら、色がおかしい状態が解決できます。

プラグインバーを開く
Markdown Preview Enhancedの欄を探し、歯車マークをクリック
「拡張機能の設定」をクリック
Markdown Preview Enhancedの設定が表示されたらスクロールして「Markdown-preview-enhanced:Mermaid Theme」の設定を見つける
プルダウンメニューからdefault以外をお好みで選択する

f:id:jsstudy:20200419201436p:plain

「Markdown Preview Enhanced」で「Mermaid Theme」の設定を変更したら、グラフのプレビューの色が正常になりました。

f:id:jsstudy:20200419201856p:plain

図の出力

VSCodeのプレビュー画面を右クリックすると、図の出力方法のメニューが出てきます。

f:id:jsstudy:20200419205159p:plain

メニューの中から、HTMLとかPNGとかを選べば、図がHTMLファイルやPNG画像などで保存されます。

見た目のカスタマイズ

「Markdown Preview Enhanced」でプレビュー用のCSSを編集すれば、自分好みの表示に変更できるようです。（試してない）

continue-to-challenge.blogspot.com

https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css

To customize css for your markdown file, cmd-shift-p then run Markdown Preview Enhanced: Customize Css command.

VSCodeを開き、キーボードで「Ctrl ＋ Shift ＋ p」を入力して、

「Markdown Preview Enhanced: Customize Css command」と入力（途中まで入力すれば、自動的に候補が出てくるので選択）する。

「Markdown Preview Enhanced」の見た目を決めている「style.css」が表示されたら、

/* Please visit the URL below for more information: */
/* https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */

.markdown-preview.markdown-preview {
// modify your style here
// eg: background-color: blue;
}

上記の赤い部分にCSSを書けばいいみたいです。

【追記】 2020/04/23

見た目（色、線）の変え方は、もっと簡単な方法が用意されていました。

＝Mermaid.jsのマニュアルをよく読めば、ちゃんと説明されていました。

https://mermaid-js.github.io/mermaid/#/flowchart?id=styling-and-classes

各図をCSSで個別に装飾することができます。