はしくれエンジニアもどきのメモ

情報系技術・哲学・デザインなどの勉強メモ・備忘録です。

はてなブログで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画像として出力できる。

mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.

基本図形のみの描画はまだないぽい

サポートしてる図

など

無向グラフは描けるが、Springレイアウトなどはない

オンラインエディタがあるので確認できる。

mermaid.live

記事に埋め込むコード

  1. 次のmermaidのCDNを読み込む
  2. class=mermaidタグの中にmermaidのコードを書くと自動でレンダリングされる
<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

野矢茂樹, 「論理トレーニング」, p.112 例題4