以下の内容はhttps://sorashima.hatenablog.com/entry/MermaidImplemetedInObsidianより取得しました。


2021-11-10 Obsidian内蔵のMermaid

では、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
 ```

と書くと、

f:id:sorashima:20211110220233p:plain:w990
エディタモード

f:id:sorashima:20211110213631p:plain:w990
プレビューモード
となる。画面上に収まりきらないので、 に最初の```mermaidと最後の```を消して貼り付けてみると、
f:id:sorashima:20211110184122j:plain

PlantUMLの方は分かりやすいけど少し野暮ったい感じだったが、こちらはその逆。


もしかしたらレンダリングは外部サーバーでやっているかもしれないので、外部に公開するとマズいデータには使わない方が良いかもしれない。


Obsidian上の表示幅を画面に収まるようにするには、

を参考にCSSスニペットを書く。

CSSスニペットのフォルダは、<vaultフォルダ>/.obsidian/sunippets。ここに拡張子.cssのファイルを置く。

iPhoneiPadでのCSSスニペットの管理については、 を参照。




以上の内容はhttps://sorashima.hatenablog.com/entry/MermaidImplemetedInObsidianより取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14