いっしきまさひこBLOG

AI・機械学習関連、Web制作関連、プログラミング関連、旅行記録などなど。一色政彦。

Visual Studio Code+Markdownでチャート/グラフ/図を描画するには?

日ごろ、原稿以外のすべてのテキストをMarkdownフォーマットで書くようになってしまっているのですが、数式はLaTeXコマンドで書いています。数式があると、棒グラフや折れ線グラフも書きたくなるケースは多いと思います。「どうやって書くんだろう?」とググりまくってみて、なかなか解決策がヒットしなかったので、同じように時間を無駄にしないように、ここで情報提供しておきます(※自分が書き方とかを見返すための忘備録でもありますが)。

Markdown Preview Enhanced拡張機能と数式(LaTeX)

そもそも、数式のLaTeXコマンドは$<数式のLaTeXコマンド>$ の形で自然に書いていたのですが、これは、

という拡張機能のおかげでした。。例えば、

f:id:misshiki:20190816152900p:plain
LaTexコマンドによる数式の例

のように書くと(※一見、難しそうなコマンドに見えますが、いったん覚えると書き方の法則はシンプルで難しくないです)、Markdown Preview EnhancedによるそのMarkdownプレビューは、

f:id:misshiki:20190816153049p:plain
LaTeXで数式を書いた場合のMarkdowプレビューの例

のような表示になります(※なお、背景が黒いのは、自分が黒いスタイルシートを設定しているためです)。

Markdown Preview Enhanced拡張機能によるグラフ描画

このMarkdown Preview Enhanced拡張機能で図も書けることは何となく知っていましたが、折れ線グラフのようなチャートもデフォルトのままで書けます。それを紹介します。

Vega-lite(もしくはVega)を利用したグラフ

Markdownのコードブロックは```で記載しますが、これにvega-liteを付けて、例えば以下のように書くことで、

```vega-lite
{
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
      {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
      {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
    ]
  },
  "mark": "line",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"}
  }
}
```

次のように描画されます。

f:id:misshiki:20190816154502p:plain
Vega-Liteによるグラフ描画の例

"mark": "line",の部分を、"mark": "bar","mark": "point",に書き換えてみてください。グラフの種類も簡単に書き換わります。目的に応じて以下のサイトも見てください。

ちなみに、Vega-Liteは「Lite」とあるように、Vegaのシンプル版です。コードブロックにvegaを指定することでVegaも使えます。

その他の図の描画

他にどんな図が描画できるのか。手元で試して問題なく実行できたもののみを紹介します。

フローチャート

```flow
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...
para=>parallel: parallel tasks

st->op1->cond
cond(yes)->io->e
cond(no)->para
para(path1, bottom)->sub1(right)->op1
para(path2, top)->op1
```

f:id:misshiki:20190816160017p:plain
フローチャート

シーケンス図

```sequence {theme=hand}
Andrew->China: Says Hello
Note right of China: China thinks\nabout it
China-->Andrew: How are you?
Andrew->>China: I am good thanks!
```

f:id:misshiki:20190816160032p:plain
シーケンス図

mermaidを利用したフローチャートやシーケンス図

```mermaid
sequenceDiagram
  A-->B: Works!
```

f:id:misshiki:20190816160057p:plain
mermaidを利用したフローチャートやシーケンス図

GraphVizを利用した各種の図

```dot
digraph G{
  A ->B;
  B ->C;
  C ->A;
}
```

f:id:misshiki:20190816160122p:plain
GraphVizを利用した各種の図

ditaaを利用した各種の図

```ditaa {cmd=true args=["-E"]}
  +--------+   +-------+    +-------+
  |        | --+ ditaa +--> |       |
  |  Text  |   +-------+    |diagram|
  |Document|   |!magic!|    |       |
  |     {d}|   |       |    |       |
  +---+----+   +-------+    +-------+
      :                         ^
      |       Lots of work      |
      +-------------------------+
```

f:id:misshiki:20190816160139p:plain
ditaaを利用した各種の図

詳しくはDiagrams - Markdown Preview Enhancedを参照してください。

Markdown Preview Enhanced拡張機能って、ホントに便利ですね。