MermaidでFlowchartを作成しPDF化する

shiraishi

2022.03.31

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

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