MermaidでFlowchartを作成しPDF化する

Notion Mermaidで提供されている様々な構文を試し、Flowchartを作成してみました。

はじめに

こちらの記事を参考に、Mermaidの概要を掴みます。

グラフを生成可能なマークダウン構文「Mermaid」がNotionで利用出来るようになりました #notion

NotionのMermaid使って業務整理してみた。

Flowchartで使用できる構文の確認は、こちらのリファレンスを参考にします。
https://mermaid-js.github.io/mermaid/#/flowchart

コード

flowchart LR

a1([必須サービスの有効化])
a2([Lorem ipsum dolor sit amet])
a3([consectetur adipiscing elit])
a4([sed do eiusmod tempor incididunt ut])
a5([labore et dolore magna aliqua])
a6([Ut enim ad minim veniam,])

click a3 "/gafasfaj9988"
click a4 "/c11f1fcc3c00"

s1([quis nostrud])
s2([exercitation])
s3([ullamco])
s4([laboris])

click s1 "https://dev.classmethod.jp/articles/"　_blank

s1 --> a2
a2 --> a3
a2 --> a4
a2 --> a5
a2 --> a6

subgraph id1 ["優先度:高"]
　　　　style id1 fill:#ff0000,fill-opacity:0.3;
　　　　a1 --> s1:::s1c
　　　　　　　　classDef s1c fill:#f9f,stroke:#333,stroke-width:4px,fill-opacity:0.5;
    subgraph 優先度:高高
　　　　　　　　　　　　s1 
　　　　　　　　end
　　　　a1 --> s2
　　　　a1 --> s3
　　　　a1 --> s4
end

Styleで使えるプロパティは、SVG要素にあるもの

フローチャートに色付けなど行いたい場合、恐らく扱えるプロパティはSVG属性に存在するもののみです。　　 SVG 属性リファレンス

PDF化する

Notionに提供されているエクスポートでPDF化した場合、フローチャートの画像が表示されなかったため、VisualStudioCodeの拡張機能を利用します。
手順としては、Notionでマークダウン形式でエクスポートしたファイルをVSCodeに読み込ませてPDF化しました。

• Markdown PDF
• Markdown Preview Enhanced

参考にさせていただいた記事

• https://zenn.dev/okazuki/articles/learning-mermaid
• https://zenn.dev/junkawa/articles/zenn-mermaidjs-theme-config
• https://anteku.jp/blog/develop/mermaid-js%E3%81%8C%E8%A8%98%E8%BC%89%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8Bmarkdown%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92pdf%E3%81%A7%E5%87%BA%E5%8A%9B%E3%81%99%E3%82%8B/