はてなブログでmermaidの図を描く
はてなブログでmermaidの図を描く
Githubでもサポートされたmermaidをはてなブログでも描けないか試したところ多少なんとかなったのでメモ。
```mermaid graph TB H["Hatenaで"] M["mermaid"] H-->M ```
👇上のmarkdownコードがこうなる
graph TB H["Hatenaで"] M["mermaid"] H-->M
mermaidって何？
GraphvizやPlantUMLのようにコードでフローチャートのような図を描ける。 JSで書かれているのでHTML上にそのままSVG画像として出力できる。
基本図形のみの描画はまだないぽい
サポートしてる図
など
無向グラフは描けるが、Springレイアウトなどはない
オンラインエディタがあるので確認できる。
記事に埋め込むコード
<div class="mermaid"> mermaid code </div> <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> <script>mermaid.initialize({startOnLoad: true});</script>
注意点
はてなブログではテキストがはてなキーワードの自動リンクされる場合がありこのときmermaidのレンダリングはうまくいかない。回避策としてコードブロックで囲めばいい。
```mermaid <mermaidのコード> ```
ただし、この場合はてなブログのコードブロックのCSSスタイルが当てられてしまうのでpre.code.mermaidのときはスタイルが当たらないように修正する必要がある。
例えば、以下のようにすると.mermaidのときだけスタイルをリセットできる。
/*mermaid用*/ .entry-content pre.code.mermaid { background: none; border: none; padding: 0; } .entry-content pre.code.mermaid[data-lang="mermaid"]:before { content: none; }
Example
有向グラフが描けるので次のような論証図が描ける。
flowchart TB
subgraph P["前提"]
direction LR
subgraph A["(1)形而上学的認識は、経験的判断ではない"]
direction LR
A1["(1) 形而上学的認識"]
A2["経験的判断ではない"]
A1 --> A2
end
subgraph B["(2)その認識がア・プリオリでないならば、その認識は経験的判断である"]
direction LR
B1["(2)その認識がア・プリオリでない"]
B2["その認識は経験的判断である"]
B1 --> B2
end
subgraph C["(3)純粋性に基づく認識のみが、ア・プリオリである"]
direction LR
C1["(3)その認識がア・プリオリである"]
C2["純粋性に基づく認識である"]
C1 --> C2
end
end
subgraph A_c["(1)対偶：それが経験的判断であるならば、それは形而上学的認識でない"]
direction LR
A_c1["(1)対偶：それが経験的判断である"]
A_c2["それは形而上学的認識でない"]
A_c1 --> A_c2
end
A<-. "対偶" .->A_c
subgraph C_c["(3)対偶：純粋性に基づく認識でないならばア・プリオリでない"]
direction LR
C_c1["(3)対偶：純粋理性に基づく認識でない"]
C_c2["その認識はア・プリオリでない"]
C_c1 --> C_c2
end
C<-. "対偶" .->C_c
C_c2 -..-> B1
B2 -..-> A_c1
subgraph Con["結論"]
direction LR
Con1["純粋理性に基づく認識でない"]
Con2["それは形而上学的認識でない"]
Con1---->Con2
end
C_c1-..->Con1
A_c2-..->Con2
```mermaid flowchart TB subgraph P["前提"] direction LR subgraph A["(1)形而上学的認識は、経験的判断ではない"] direction LR A1["(1) 形而上学的認識"] A2["経験的判断ではない"] A1 --> A2 end subgraph B["(2)その認識がア・プリオリでないならば、その認識は経験的判断である"] direction LR B1["(2)その認識がア・プリオリでない"] B2["その認識は経験的判断である"] B1 --> B2 end subgraph C["(3)純粋性に基づく認識のみが、ア・プリオリである"] direction LR C1["(3)その認識がア・プリオリである"] C2["純粋性に基づく認識である"] C1 --> C2 end end subgraph A_c["(1)対偶：それが経験的判断であるならば、それは形而上学的認識でない"] direction LR A_c1["(1)対偶：それが経験的判断である"] A_c2["それは形而上学的認識でない"] A_c1 --> A_c2 end A<-. "対偶" .->A_c subgraph C_c["(3)対偶：純粋性に基づく認識でないならばア・プリオリでない"] direction LR C_c1["(3)対偶：純粋理性に基づく認識でない"] C_c2["その認識はア・プリオリでない"] C_c1 --> C_c2 end C<-. "対偶" .->C_c C_c2 -..-> B1 B2 -..-> A_c1 subgraph Con["結論"] direction LR Con1["純粋理性に基づく認識でない"] Con2["それは形而上学的認識でない"] Con1---->Con2 end C_c1-..->Con1 A_c2-..->Con2 ```
Online FlowChart & Diagrams Editor - Mermaid Live Editor
