日ごろ、原稿以外のすべてのテキストをMarkdownフォーマットで書くようになってしまっているのですが、数式はLaTeXコマンドで書いています。数式があると、棒グラフや折れ線グラフも書きたくなるケースは多いと思います。「どうやって書くんだろう？」とググりまくってみて、なかなか解決策がヒットしなかったので、同じように時間を無駄にしないように、ここで情報提供しておきます（※自分が書き方とかを見返すための忘備録でもありますが）。
Markdown Preview Enhanced拡張機能と数式（LaTeX）
そもそも、数式のLaTeXコマンドは$＜数式のLaTeXコマンド＞$ の形で自然に書いていたのですが、これは、
という拡張機能のおかげでした。。例えば、
のように書くと（※一見、難しそうなコマンドに見えますが、いったん覚えると書き方の法則はシンプルで難しくないです）、Markdown Preview EnhancedによるそのMarkdownプレビューは、
のような表示になります（※なお、背景が黒いのは、自分が黒いスタイルシートを設定しているためです）。
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"}
}
}
```
次のように描画されます。
"mark": "line",の部分を、"mark": "bar",や"mark": "point",に書き換えてみてください。グラフの種類も簡単に書き換わります。目的に応じて以下のサイトも見てください。
- どんなグラフが書けるか？ → Example Gallery | Vega-Lite
- グラフの描画を試したい → Vega-Lite Editor
ちなみに、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 ```
シーケンス図
```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!
```
mermaidを利用したフローチャートやシーケンス図
```mermaid sequenceDiagram A-->B: Works! ```
GraphVizを利用した各種の図
```dot
digraph G{
A ->B;
B ->C;
C ->A;
}
```
ditaaを利用した各種の図
```ditaa {cmd=true args=["-E"]}
+--------+ +-------+ +-------+
| | --+ ditaa +--> | |
| Text | +-------+ |diagram|
|Document| |!magic!| | |
| {d}| | | | |
+---+----+ +-------+ +-------+
: ^
| Lots of work |
+-------------------------+
```
詳しくはDiagrams - Markdown Preview Enhancedを参照してください。
Markdown Preview Enhanced拡張機能って、ホントに便利ですね。
