Markdownで図は書けるのか
Markdownを使っていると、少し図を入れたいなどと思うことがあります。
ありものの図であれば画像ファイル化して埋め込めばいいのですが、自分で作る図となるとそうはいきません。
ちなみに、図といってもフローチャートとかなので「お絵描き」ではありません。
Mermaid
Markdownでは残念ながら図を描くことはできませんが、Mermaidを使えばかけます。
「おいおい。結局Markdownでは書けないのかよ。」と思うかもしれませんが、MermaidはMarkdownの中に記載することができます。
Markdownの中にMermaid？
訳が分からなくなってきていると思いますので、実際の例をお見せしましょう。
Markdownでこんな感じに書いてみます。
```mermaid
flowchart LR
id((開始)) --> 処理1
処理1 --> id2{分岐}
id2{分岐} -- yes --> 処理2
id2 --no--> 処理3
処理2 --> 処理3
処理3 --> id3((終了))
```
これでこんな感じの図が書けます。
何が起きているのか
Mermaidのページでは以下のように説明されています。
Diagramming and charting tool
JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
引用：Mermaid | Diagramming and charting tool
機械翻訳：
作図およびチャート作成ツールMarkdown に着想を得たテキスト定義をレンダリングしてダイアグラムを動的に作成および変更する、JavaScript ベースのダイアグラム作成およびチャート作成ツール。
Mermaid事前に定義されている書式をもとに、文字で記載された情報をJavaScriptを使って図にしています。
つまり、決まった形で記載することでいろいろな図が作れるフォーマットなのです。
Mermaidのフォーマット
Mermaidの書き方は以下のページで確認できます。
この記事を書いている時点で、以下のフォーマットが用意されています。
- Flowchart（フローチャート）
- Sequence Diagram（シーケンス図）
- Class Diagram（クラス図）
- State Diagram（状態図）
- Entity Relationship Diagram（エンティティ関係図）
- User Journey（カスターマージャーニー）
- Gantt（ガント）
- Pie Chart（円グラフ）
- Requirement Diagram（要件図）
- Gitgraph (Git) Diagram（Gitgraph(Git)ダイアグラム）
- C4C Diatram (Context)（C4モデル）
- Mindmaps（マインドマップ）
- Timeline（タイムライン）
具体的な使い方は次回以降で記事にしていこうと思います。
Visual Studio Code（VSCode）のプレビューで出てこない
「Markdownの中にMermaid？」で書いたサンプルをVSCodeに張り付けて、プレビューを表示してみましょう。
プレビュー表示の仕方などは以下の記事を参照してください。
プレビューで図が表示された方は「Mermaid」についてご存じか、一度チャレンジしたことがある方ですね。具体的な書き方は別の記事になるので、そちらをご参照さい。
見事に文字が出た方は、VSCodeに拡張機能を追加する必要があります。
VSCodeは標準状態でMarkdownを解読してきれいに表示することができても、「Mermaid」については標準状態では変換方法を知りません。
そのため、ただのコードとして表示してしまいます。
ここでは「Markdown Preview Mermaid Support」という拡張機能を紹介します。
拡張機能のインストール方法がわからない場合は「Markdown PDF」などと同じなので、過去記事を参照してください。
拡張機能追加後に再度プレビューをするときれいに表示されるはずです。
Markdown PDFを使うとMermaidが表示されない
Markdown PDFを使ってPDFに変換した場合、図がうまく表示されない場合があります。
大体は「インターネットに接続されていない」か「バグ対応を行っていない」のいずれかです。
インターネットに接続されていない
Mermaidの変換にはJavaScriptが使われます。
このJavaScriptは「Markdown PDF」拡張機能の追加でインストールされるわけではなく、インターネット上のMermaid公式のJavaScriptを作成時に参照しています。
「Markdown PDF」では一度HTMLに変換したデータをPDF化しています。
そのため、インターネットに接続されていない状態でPDFに変換しようとしても、JavaScriptが取得できないため、変換が行われません。
なお、どうしてもインターネットに接続できない環境であれば、このJavaScriptをダウンロードしておいて、無理やり埋め込む方法もあります。
バグ対応を行っていない
「Markdown PDF」の設定でMermaidのサーバーを指定していますが、標準状態では昔のサーバーが指定されており、そのURLは現在無効です。
そのため、設定で現在アクセス可能なMermaidサーバーを指定します。
"markdown-pdf.mermaidServer": "https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js",
詳細は以下の記事を参照してください。
バグ情報はこちら。
次回以降でMermaidの具体的な書き方と意味を記事にしたいと思います。
コメント