Obsidian-TikZJax 導入してちょっとしたテスト

最近 Obsidian というMarkdown を使ったメモツールを利用しています。
もともとは TiddlyWIki というローカル & スタンドアロンのwikiソフトを使用していましたが、ブラウザの制約が厳しくなった結果、導入当初のような手軽な運用が難しくなったこともあり、いろいろ代替品を物色していたところでこのツールに出会い、TiddyWiki の記事の移植から、新規記事の作成、便利な使い方を模索している段階です。

なぜObsidian?

Obsidian そのものに関しては、ここにも、外部のサイトにも詳しい記事がありますし、自分も早く環境を構築したくて、適当に導入を急いだ為、基礎的なところはすっ飛ばしがちだった為、うろ覚えですので、紹介記事は書きません(書けません)。
ただ、他の方の選定の参考になるかもしれませんので、数あるメモツールの中からObsidianを選定した理由だけ書いておきます。

• スタンドアロンツール: TiddlyWikiを愛用していた理由が、個人的なメモなので、外部サービスに依存しないことは最重要の要件。
• markdown記法で書ける: 仕事で使用することも多い、何より新しい記法を覚える必要がないので手っ取り早い。また１つの記事は１つの .mdファイルなので、最悪Obsidianが使えなくなったとしても記事そのものの情報が失われることはない ←ここは切実。単純にＭarkdown を表示するだけなら選択肢は十分にあるし、テイストエディタでも読める。
• 記事間リンク管理を行ってくれる: Markdownエディタの機能に加え、"vault" に設定したディレクトリ以下のファイルの管理やリンク付け、リンク先のサジェスチョンも行ってくれる。
• プラグインによる拡張が可能: 最近のソフトウェアなら当たり前かもしれないが、Atomライクな見た目とプラグインによる拡張機能が備わっている。ただし、あまり独自の構文を使うものだと、万が一の時に困るので、最低限にとどめている。
• スマホでも使用できる Android, iOS対応。Android版を使用しているが、アプリを増やしたくない派の自分にとっては、スマホ側に設定した vault に、PC版の vaultの中身を放り込めば良いだけなので楽。画面の解像度の違い、インターフェースの違い、スマホ版未サポートのプラグインなどの問題もある為、最初期を除いては記事だけコピーしてスマホで利用している。基本スマホは見るだけなので、PC → スマホの一方通行にしてコンフリクトを避けている。
• Mermaidダイアグラムが使える: 活用できているとは言っていない。あれば便利だが、現実問題テーマを変更したりすると、激しく見た目が変わるので、あまり複雑な図には適さない(ように思える)。
• LaTexが使用できる Obsidian 移行後に数学に触れる機会が増えたので、何気に綺麗な数式が書けるのが便利。でも記法がまだまだ覚えきれなくて、毎回つまづく。

TikZJax プラグイン

Obsidian にある LaTex で数式をメモできるだけでも満足していますが、どうせなら、苦労して書いたLaTexの数式をもっと活用できないかな、できればLaTexの数式でグラフの描画できたら嬉しいな。というのが最大の導入理由です。

環境

導入環境は以下の通り(スマホ検証はまだです)

• OS: Windows 10 Professional
• Obsidian: v 1.0.3
• TikZJax: v 0.5.1

導入方法は省略。コミュニティープラグインの閲覧画面で、"TikZJax"と入力すればピンポイントでヒットします。

サンプル

システム生物学で遭遇した、減少ヒル関数で試す。
どこぞの動画のメモ書きを参考にサンプル作っただけなので、細かいツッコみは無しでお願いします。
もう一度復習するつもりで、変数の意味とかまでメモってませんした。

f(X)=\frac{\beta}{1+(\frac{X}{k})^n}

f(X)=\frac{\beta}{1+(\frac{X}{k})^n}

これをうまく再利用して TikZJax でグラフにしたい。
そもそもサンプル以外にまとまったドキュメントが見つからなかったので、試行錯誤の末たどり着いたのが以下のソースです。

```tikz
\begin{document}
  \begin{tikzpicture}[domain=0:4]
    \draw[very thin] (-0.4, -0.4) grid(4.2,4.2);
    %%horizonal axis
    \draw[->] (-1.2,0) -- (4.4,0) node[right] {$X$};
    \draw[dotted] (4.2,2) -- (-0.4,2) node {$\frac{\beta}{2}$};
    %% virtical axis
    \draw[->] (0,-1.2) -- (0,4.5) node[above] {$\beta$};
    \draw[dotted] (2,4.2) -- (2,-0.2) node {$k$};

    %% graph plot(\x, \x) は小文字の x じゃないとダメっぽい
    \draw[color=red] plot (\x,{4/(1+(\x/2)^1)}) node[right] {$\beta=4;k=2;n=1$};
    \draw[color=purple] plot (\x,{4/(1+(\x/2)^2)}) node[right] {$\beta=4;k=2;n=2$};
    \draw[color=blue] plot (\x,{4/(1+(\x/2)^4)}) node[right] {$\beta=4;k=2;n=4$};
    \draw[color=green] plot (\x,{4/(1+(\x/2)^14)}) node[right] {$\beta=4;k=2;n=14$};
  \end{tikzpicture}
\end{document}

【Obsidian の描画結果1】

1変数以上の描画方法は調べる時間がなかったので、$\beta$, $k$ を適当な定数に設定して、何とか収まる範囲に調整。
$n$ を変化させたときのグラフの変化を表すグラフにしてみた。

落とし穴(自分専用)

• グラフの変数 "\x" は小文字しか入れられない？ 水平軸の表記は大文字の"X"なので、微妙な感じ。
• plot (\x, {...}) の数式部分にLaTexそのまま埋め込んで描画されないという罠。複雑なLaTexの数式を、plotに渡せる数式にするのは大変そう。
• 私の環境では、$n=15$ 以上にすると、おそらく計算精度の問題で描画に失敗する。ほかの関数グラフでも気を付けないとあり得る。指数関数の怖さを垣間見た。
• \draw[dotted] (4.2,2) -- (-0.4,2) node {$\frac{\beta}{2}$}; で $\beta=\frac{\beta}{2}$ の補助線を引いているが、node[left] としても補助線の左側(β軸のところ)にラベルが出てくれない。線の描画方向を逆(右→左方向)にすることで、β軸の所にラベルを出している。(ただの認識違いの可能性大)

サンプル2

描画できて調子に乗って。もう1個書いてみた。

```tikz
\begin{document}
  \begin{tikzpicture}[domain=0:6]
    \draw[very thin] (-0.4, -0.4) grid(6.2,4.2);
    %%horizonal axis
    \draw[->] (-1.2,0) -- (8.4,0) node[right] {$X$};
    \draw (6.2,2) -- (-0.4,2) node {$\frac{\beta}{2}$};
    %% virtical axis
    \draw[->] (0,-1.2) -- (0,4.5) node[above] {$\beta$};
    \draw[color=blue] (2,4.2) -- (2,-0.2) node {$k=2$};
    \draw[color=green] (3,4.2) -- (3,-0.2) node {$k=3$};
    \draw[color=lime] (4,4.2) -- (4,-0.2) node {$k=4$};

    \draw[color=blue] plot (\x,{4/(1+(\x/2)^2)}) node[right] {$\beta=4;k=2;n=4$};
    \draw[color=green] plot (\x,{4/(1+(\x/3)^2)}) node[right] {$\beta=4;k=3;n=4$};
    \draw[color=lime] plot (\x,{4/(1+(\x/4)^2)}) node[right] {$\beta=4;k=4;n=4$};

  \end{tikzpicture}
\end{document}

【Obsidian の描画結果2】

今度は $\beta$, $n$ を固定して $k$ を3パターンに変化させたグラフ。
X = 2, 3, 4 ($k$の値に一致) の時に $\frac{\beta}{2}$ を上から下に超えるので、グラフの描画色に合わせた補助線を入れてみた。

まとめ

思いつき導入のプラグインということと、まだObsidian + TikZ の記事がなかったので、深堀りなしの勢いだけで書いてみました。
気になる点としては、ライブビューモードでソースを書いていると、たびたびグラフの再描画がかかるところでしょうか。Obsidian 本体が遅くなるわけではないですが、ソース書いてる視界の端っこで再描画中のアニメーションが映るところは、気が散る方もいるかもしれません。

昔だと、Excel で表を作って、それをグラフ描画させて、スクリーンショット取って...といった手間とか、グラフの画像が欲しいだけなのにExcelファイルまで管理しなきゃならない、という手間を考えると Obsidian の内部だけで完結する TikZJax は便利なプラグインだと思います。

TikZ で探すと Qiitaにも記事がありましたので、ちょっと参考に頑張ってみたいと思います。Obsidianプラグインがどこまで対応しているか、検証段階なので未知数ではありますが。