これは何？

Obsidianでmermaid.jsを使う際、実はスタイルの指定をcssで行うことができます。
インラインでスタイリングするよりも自由度が高いです。

このスクラップでは実例などをメモとして記録していきます。

SLMNLL 2021/08/13に更新

Obsidian + mermaid.jsでcssを使う (1) ノード編

mermaid.jsのコードを書く際、インラインでスタイルを指定することも可能です。ただ、いちいちスタイルを指定するのは面倒なので、私はcssを使います^[1]。

ノードのラベルのスタイルを変更する

.mermaid g.nodes foreignObject div{
  color:mediumblue;

  /* インラインでは文字サイズは設定できません（従ってzenn上でも反映されません）
     ですが、cssで指定すればObsidian上では反映されます */
  font-size:0.8em;

}

表示例

ノード自体のスタイルを変更する

.mermaid g.nodes rect{
  fill:beige;
  stroke:green;
  stroke-width:2px;
}

表示例

脚注

ObsidianでCSSを使うため場合、カスタムCSSと、CSSスニペットの2通りの方法があります。カスタムCSSについてはこのページ、CSSスニペットについてはこのページが詳しいです。 ↩︎

SLMNLL 2021/08/13に更新

Obsidian + mermaid.jsでcssを使う (2) リンク編

2021/8/13時点のzenn.devでは、mermaidのリンクのスタイルを変更することができないので、表示例はObsidianのスクリーンショットです。

ノード間に表示されるリンクの文字スタイルを変更する

.mermaid g.edgeLabels{
  /* リンクの文字スタイルは、インラインでは指定できないようです */
  color:yellowgreen!important;
  font-style:italic!important;
  font-weight: bold!important;
}

表示例

ノード間に表示されるリンク自体のスタイルを変更する

.mermaid g.edgePaths path.path{
  /* zennではリンクのスタイルは変更できないようです */
  stroke-width: 5px!important; /* リンクの線を太くする */
}

表示例

SLMNLL 2021/08/15に更新

ノード間のラベルは、マージンを作ってあげたほうが可読性が増します。個人的には以下の設定がおすすめ。

.mermaid g.edgeLabels foreignObject div{
  background-color: var(--background-primary);/* 背景色を敷かないと意味がないので注意 */
  padding:0px 6px;
  margin-left:-6px;
}