MarmaidでFlowchartを作成しPDF化する

2022.03.31

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化しました。

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