では、PlantUMLプラグインをインストールしてダイアグラムを表示させたが、Obsidianには「Mermaid」が内蔵されている。
上のメモと同じ内容をMermaidで、
```mermaid flowchart LR selText([選択テキスト])-- テキスト<ISBN> -->NTS URL([版元ドットコム])-- URL -->NTS Barcode([バーコード読み取り])-- ISBN -->NTS NTS[NDL to SB] NTS-- クエリ -->NDLsAPI NDLsAPI -.->|XML|NTS NTS-- JSON_URL -->NDLweb NDLweb -. JSON .->NTS SHT[[SH to Thesaurus]] NTS-- キーワード -->SHT SHT<-->WNA SHT-. 上位語,下位語,関連語など .->NTS NJ2SN[[NDL JSON to SB note]] NTS-- JSON -->NJ2SN N92L[[NDC9 to Label]] NJ2SN-- NDC9 -->N92L N92L<-->N4D N92L-. 分類項目名 .->NJ2SN NJ2SN-. Scrapbox記法のテキスト .->NTS subgraph 国立国会図書館 NDLsAPI([国立国会図書館サーチ 検索用API]) NDLweb([国立国会図書館Webページ]) WNA([Web NDL Authorities]) NSA([国立国会図書館サーチ 書影API]) end subgraph NDC for Developers N4D([NDC for Developers]) end NTN[[NDL Thumbnail]] NTS-- ISBN -->NTN NTN<-->NSA NTN-. 書影イメージURL .->NTS GTN[[Google Thumbnail]] NTS-- ISBN -->GTN GTN<-->GBA GTN-. 書影イメージURL .->NTS subgraph Google Books API GBA([Google Books API]) end OBN[[OpenBD Thumbnail]] NTS-- ISBN -->OBN OBN<-->OBA OBN-. 書影イメージURL .-> NTS subgraph openBD API OBA([openBD API]) end subgraph Scrapbox SB([Scrapbox]) end NTS -- Scrapbox記法のテキスト --> SB ```
と書くと、
```mermaidと最後の```を消して貼り付けてみると、
PlantUMLの方は分かりやすいけど少し野暮ったい感じだったが、こちらはその逆。
もしかしたらレンダリングは外部サーバーでやっているかもしれないので、外部に公開するとマズいデータには使わない方が良いかもしれない。
Obsidian上の表示幅を画面に収まるようにするには、
obsidianにおいてmermaidの図が横に大きくなりすぎるときはcssに
— あべ🐧 (@sature31) April 26, 2021
.mermaid>svg{ min-width: 400px; max-width: 100%; }
とすれば改善できた
CSSスニペットのフォルダは、<vaultフォルダ>/.obsidian/sunippets。ここに拡張子.cssのファイルを置く。