【VSCode】mermaidで作成した図をPNG出力する方法
みなさんこんにちは。
VSCodeの拡張機能であるMermaidはテキスト形式で記述した内容を
グラフ化したり、フローチャート化することが可能です。
ただし、Mermaidで作成したフローチャートをMarkdownPDFなどの機能を使用して出力する際は、
PNG形式に変換して画像として取り込む必要があります。
今回はMermaidで作成したフローチャートをPNG形式に出力する方法についてご紹介したいと思います。
Mermaidの記述自体をマスターすると修正も手軽にできて、
文書作成の時短に大きく貢献しますし、開発現場でもよく使用する機会があり
覚えておくととてもためになるので、スキルアップのきっかけになればと思います。
VSCodeに関する過去の記事
VSCodeに関する小ワザやテクニックなどの参考記事については、過去にご紹介しておりますのでそちらもどうぞ。
前提条件
以下のような記述でシーケンス図を含む文書をPDF出力すると、
Mermaid記述がテキスト表期のままになります。
コード
## mermaid記述サンプル
### 見出し
- テキスト記述部分_1
- テキスト記述部分_2
- テキスト記述部分_1_1
- テキスト記述部分_1_2
```mermaid
sequenceDiagram
actor Alice
actor Bob
actor TestActor
participant TestTask
Alice->>Bob: 実線のアロー
Bob-->>Alice: 点線のアロー
Bob->>TestTask:アクターからタスクへのアロー
```
出力結果
Mermaid.js（マーメイド・ジェイエス）を使用する
作成したmermaid記述の内容をPNGに変換するためには、Mermaid.jsを使用する必要があります。
手順
1. Mermaid.jsにアクセスします。https://mermaid.js.org/
2. 「Try Edit」をクリックします。
3. Open Sourceの「Start free」をクリックします。
4. エディター画面が表示されます。
5. 左ペインのエディター部分にコードを入力します。
6. シーケンス図が表示されます。
7. 「Actions」をクリックします。
8. 「PNG」をクリックします。
9. しばらくするとPNG画像がエクスポートされます。
10. PNGファイルが作成されました。
11. いったんリネームします。
※「mermaid_test_img.png」いうファイル名に変更します。
12. PNGの準備は完了です。
コード
以下のような記述で作成したシーケンス図をPNGファイルとして読み込みます。
## mermaid記述サンプル
### 見出し
- テキスト記述部分_1
- テキスト記述部分_2
- テキスト記述部分_1_1
- テキスト記述部分_1_2
<p>
<img src="./img/mermaid_test_img.png" height="450">
</p>
出力結果
無事にシーケンス図を表示してPDF出力できました。
最後に
いかがでしたでしょうか。
フローチャートを作成する際は、パワポや専用のWebアプリ、描画ツールで作成しがちですが、直感的にテキストで記述できるようになると、
かなりの時間短縮になるかと思います。
構文を覚えるのに多少のタイムコストは必要ですが、
しっかりマスターして基本を抑えながらと実装できると業務効率も格段に向上するかと思います。
そのきっかけとして、少しでも参考になればと思います。
開発依頼について
ココナラでWebスクレイピング開発サービスを出品しております。
自分で開発をしようと思ったけど、VBAでのネット記事が少なく困っている方も多いかと思います。
そんな方はいつでもお気軽にご相談ください。
また、本ブログからご依頼いただいた方については割引特典がございますので、
ご不明点と合わせてメッセージをいただけると幸いです。
Excelにてブラウザ操作自動化ツールを作成します その作業、webスクレイピングを使って自動化しましょう！
Webスクレイピング以外にもWebアプリの開発サービスも出品しております。
こちらについても、本ブログからご依頼いただいた方については割引特典がございますので、
お気軽にご相談ください。
スモールスケールのWebアプリ開発します 先ずはスモールスケールのWebアプリから始めませんか？
