コード で フローチャート シーケンス図 ガントチャート等 を 描く③ ~mermaidの図を出力する~
目的
- mermaidにて作成した図を出力する方法をまとめる
この記事のターゲット
- mermaidで描いた図を出力して使いたい方
- Markdownファイルにmermaidを記載して
Markdown PDF
でhtml出力したらコマンドブロックがそのまま出力されてしまった方
- どうにかしてmermaidの図をpngなどの形式で図形を画像として見たい方(図によっては出力出来なかったり文字が荒くなったりします)
サンプルコード
- mermaidで描いた図を出力して使いたい方
- Markdownファイルにmermaidを記載して
Markdown PDF
でhtml出力したらコマンドブロックがそのまま出力されてしまった方 - どうにかしてmermaidの図をpngなどの形式で図形を画像として見たい方(図によっては出力出来なかったり文字が荒くなったりします)
サンプルコード
本記事の説明で使用するサンプルコードを記載する。
※記載方法は別途記事でまとめる予定なので、今回は単純に下記のコードをテンプレートとしてコピーして使ってください。
graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
mermaidの出力(svgファイル)
※完全筆者の妄想ですが、この方法は1度外部サーバにコードを送って出力している気がするので会社の機密的な図は避けた方が無難かもしれないです。
- オンラインプレビューサイトのMermaid Live Editorを使用してsvgイメージを出力する。
下記webサイトにアクセスする。下記にリンク先のスクリーンショットを貼る
Mermaid Live Editor
自分のPCのダウンロードフォルダに「mermaid-diagram-YYYYMMDDHHMMSS.svg」がダウンロードされる。
mermaidの出力(png jpeg pdf)
- mermaidのプレビューと出力を行うプラグイン
Markdown Preview Enhanced
とmermaidのプレビューのみを行うMarkdown Previw Mermaid Support
をインストールする
※プラグインのインストール方法は下記記事の日本語プラグインのインストール方法を参考にインストールをお願い致します。Visual Studio Code 導入方法 VSCode ダウンロードから日本語化対応まで~画像付き導入解説~
※ Markdown Preview Enhancedはインストールしただけだとシーケンス図以外うまく表示できない。本現象の回避方法はこちら←※現在リンク先を作成中です。
- 新規のMarkdownファイルを作成する。
Visual Studio CodeでのMarkdownファイルの作成方法はこちら
コマンドブロックを作成する。
Markdown記法の基本はこちら
mermaidを記載しているMarkdownファイルと同じフォルダ内に選択した出力形式でファイルが出力される。
※筆者はすべての形式で出力してみた
まとめ
- 図をsvgファイルとして出力したいならMermaid Live Editorを利用する。
- 図をpng jpeg pdfで出力したいなら
Markdown Preview Enhanced
を利用する。
-
Markdown Preview Enhanced
はそのままの設定だと表示できないことがある。解決方法はこちら←※現在リンク先を作成中です。
Markdown Preview Enhanced
とmermaidのプレビューのみを行うMarkdown Previw Mermaid Support
をインストールする※プラグインのインストール方法は下記記事の日本語プラグインのインストール方法を参考にインストールをお願い致します。Visual Studio Code 導入方法 VSCode ダウンロードから日本語化対応まで~画像付き導入解説~
※ Markdown Preview Enhancedはインストールしただけだとシーケンス図以外うまく表示できない。本現象の回避方法はこちら←※現在リンク先を作成中です。
コマンドブロックを作成する。
Markdown記法の基本はこちら
mermaidを記載しているMarkdownファイルと同じフォルダ内に選択した出力形式でファイルが出力される。
※筆者はすべての形式で出力してみた
- 図をsvgファイルとして出力したいならMermaid Live Editorを利用する。
- 図をpng jpeg pdfで出力したいなら
Markdown Preview Enhanced
を利用する。 -
Markdown Preview Enhanced
はそのままの設定だと表示できないことがある。解決方法はこちら←※現在リンク先を作成中です。
Author And Source
この問題について(コード で フローチャート シーケンス図 ガントチャート等 を 描く③ ~mermaidの図を出力する~), 我々は、より多くの情報をここで見つけました https://qiita.com/miriwo/items/223443768f545c39298c著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .