コード で フローチャート シーケンス図 ガントチャート等 を 描く③ ～mermaidの図を出力する～

# 目的
- mermaidにて作成した図を出力する方法をまとめる

# この記事のターゲット
- mermaidで描いた図を出力して使いたい方
- Markdownファイルにmermaidを記載して`Markdown PDF`でhtml出力したらコマンドブロックがそのまま出力されてしまった方
- どうにかしてmermaidの図をpngなどの形式で図形を画像として見たい方(図によっては出力出来なかったり文字が荒くなったりします)

# サンプルコード
本記事の説明で使用するサンプルコードを記載する。  
※記載方法は別途記事でまとめる予定なので、今回は単純に下記のコードをテンプレートとしてコピーして使ってください。

``` mermaid
graph LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
```
![mermaid_8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/190bdd51-b868-3bd0-ef48-01af57a24ec1.png)

# mermaidの出力(svgファイル)
※完全筆者の妄想ですが、この方法は1度外部サーバにコードを送って出力している気がするので会社の機密的な図は避けた方が無難かもしれないです。
  
- オンラインプレビューサイトのMermaid Live Editorを使用してsvgイメージを出力する。

1. 下記webサイトにアクセスする。下記にリンク先のスクリーンショットを貼る
    [Mermaid Live Editor](https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggTFJcbiAgICBBW0hhcmQgZWRnZV0gLS0-fExpbmsgdGV4dHwgQihSb3VuZCBlZGdlKVxuICAgIEIgLS0-IEN7RGVjaXNpb259XG4gICAgQyAtLT58T25lfCBEW1Jlc3VsdCBvbmVdXG4gICAgQyAtLT58VHdvfCBFW1Jlc3VsdCB0d29dIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0)
    ![mermaid_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/04e99175-4b97-fcbf-4a7c-4ac5192e3250.png)

1. 下記画像の赤枠内のすでに記載されているコードを消し、前述したサンプルコードをコピーして貼り付ける
    ![mermaid_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/7da2e553-845e-7afb-a468-a45ad0e3c955.png)

1. 下記画像のような図がプレビューに表示される
    ![mermaid_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/b5e0127e-a482-150b-e99b-935d838f5090.png)

1. Action内にあるDownload SVG(緑丸部分)をクリックする。
    ![mermaid_9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/349b386e-f88f-e457-c3cd-3c5c84e3492e.png)

1. 自分のPCのダウンロードフォルダに「mermaid-diagram-YYYYMMDDHHMMSS.svg」がダウンロードされる。

#mermaidの出力(png jpeg pdf)
1. mermaidのプレビューと出力を行うプラグイン`Markdown Preview Enhanced`とmermaidのプレビューのみを行う`Markdown Previw Mermaid Support `をインストールする  
※プラグインのインストール方法は下記記事の日本語プラグインのインストール方法を参考にインストールをお願い致します。[Visual Studio Code 導入方法 VSCode ダウンロードから日本語化対応まで～画像付き導入解説～](https://qiita.com/miriwo/items/306769d90d910944e471)  
※ Markdown Preview Enhancedはインストールしただけだとシーケンス図以外うまく表示できない。本現象の回避方法は[こちら]()←※現在リンク先を作成中です。
1. 新規のMarkdownファイルを作成する。
Visual Studio CodeでのMarkdownファイルの作成方法は[こちら](https://qiita.com/miriwo/items/d75eee46d60e2e909b53)
1. 画像の赤矢印部分をクリックしてデフォルトのプレビューをオンにする。
    ![mermaid_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/d62d1958-3838-bd42-691e-05b228072e0e.png)

1. コマンドブロックを作成する。
Markdown記法の基本は[こちら](https://qiita.com/miriwo/items/28d80f46c857de49f34b)
1. コマンドブロック内に記載するコードを`mermaid`として設定する。
    ![mermaid_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/46c217c6-4e54-a922-e700-26c978f71f63.png)

1. コマンドブロック内に、前述したサンプルコードをコピーして貼り付ける。
    ![mermaid_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/496391c0-0dfe-522d-159a-f594cc06b3a2.png)

1. 下記画像のような図がプレビューに表示されればOK
    ![mermaid_6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/f9fa094f-f22e-3e48-6210-c9e46c9f29cb.png)

1. 画像の赤矢印部分をクリックして`Markdown Preview Enhanced`のプレビューを表示させる。
    ![mermaid_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/f9416a43-a4e8-8c17-2ba0-98d1bc273f7a.png)

1. 下記画像のような図がプレビューに表示されればOK
    ![mermaid_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/aa538aed-58af-6522-b4e8-3d819065caa0.png)

1. `Markdown Preview Enhanced`のプレビュー画面(白い背景のプレビュー画面内)を右クリックする。
    ![mermaid_14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/206537f4-afcb-a0d7-5bd9-6682b29d2ce6.png)

1. Chrome(Puppeteer)をクリックして出力形式をクリックする。
    ![mermaid_15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/3fab76be-96ea-b94e-023c-358224d4fa0a.png)

1. mermaidを記載しているMarkdownファイルと同じフォルダ内に選択した出力形式でファイルが出力される。
※筆者はすべての形式で出力してみた
    ![mermaid_16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/a67e59db-be0f-dd46-0c69-702f6611efc4.png)


# まとめ
- 図をsvgファイルとして出力したいなら[Mermaid Live Editor](https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbkFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuQiAtLT4gQ3tMZXQgbWUgdGhpbmt9XG5DIC0tPnxPbmV8IERbTGFwdG9wXVxuQyAtLT58VHdvfCBFW2lQaG9uZV1cbkMgLS0-fFRocmVlfCBGW2ZhOmZhLWNhciBDYXJdXG4iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ)を利用する。
- 図をpng jpeg pdfで出力したいなら`Markdown Preview Enhanced`を利用する。
- `Markdown Preview Enhanced`はそのままの設定だと表示できないことがある。解決方法は[こちら]()←※現在リンク先を作成中です。