Obsidian：表から折れ線グラフを作成する

グラフに数値を入れるのが面倒です。 表形式で書いて変換したい。

mermaid

mermaidでグラフの書き方がわかったから応用したい。 こういうのこそTemplaterスクリプトで楽するところです。

いっちょ作ってみましょう。

xychart.md

TemplaterのHotkeyに登録してください。

<%*
const editor = app.workspace.activeLeaf.view.editor
const cursorPosition = editor.getCursor()
const lineNumber = cursorPosition.line
const lines = editor.getValue().split('\n')

// テーブルの開始行と終了行を見つける
let tableStartLine = -1
let tableEndLine = -1
for (let i = lineNumber - 1; i >= 0; i--) {
  if (lines[i].trim().startsWith('|')) {
    tableStartLine = i
  } else {
    break
  }
}
for (let i = lineNumber; i < lines.length; i++) {
  if (lines[i].trim().startsWith('|')) {
    tableEndLine = i
  } else {
    break
  }
}

if (tableStartLine === -1 || tableEndLine === -1) {
  new Notice("表内で実行してください。")
  return
}

// テーブルデータを解析する
const header = lines[tableStartLine].trim().substring(1).substring(0, lines[tableStartLine].trim().length - 2).split('|').map(item => item.trim())
const data = []
for (let i = tableStartLine + 1; i <= tableEndLine; i++) {
  const row = lines[i].trim().substring(1).substring(0, lines[i].trim().length - 2).split('|').map(item => item.trim())
  data.push(row)
}

// Mermaid xychart用の文字列を作成する
let mermaidCode = '```mermaid\nxychart-beta\ntitle "タイトル"\n\n'
mermaidCode += 'x-axis ["' + header.join('","') + '"]\n'
for (let i = 1; i < data.length; i++) {
  mermaidCode += 'line [' + data[i].join(',') + ']\n'
}
mermaidCode += "```\n"
new Notice("クリップボードに保存しました")

// グラフを挿入する
navigator.clipboard.writeText(mermaidCode)
%>

使い方

カーソルを表内に置いてxychartスクリプトを実行してください。

コードがクリップボードに保存されるので貼り付けると：

折れ線グラフが描かれます。

ソースのlineをbarにすると棒グラフになります。

Templaterスクリプトの作り方

今回のスクリプト作成にCopilotを使いました。

まず下記のような「要望書」をノートに書きます。

Templaterスクリプトで  
カーソル行の上がMarkdownの表であるとき  
1行目をx-axisの項目とみなし  
2行目以降を数値と解釈して  
mermaidのxychartで折れ線グラフにしたい  
 
そんなTemplaterスクリプトを作ってください  

そしてCopilotのチャット欄で下記プロンプトを実行。

{activeNote}の条件でtemplaterスクリプトを組んでください

これでスクリプトの雛形が出来上がります。

ただ、そのままでは走りませんでした。 「カーソル行の上」を「カーソルが表の中にある場合」と解釈したようです。 そういうわけでそれを「仕様」とする。 あと表に上書きする方法になっていたので、 クリップボードに保存するように書き換えました。

なので5分ほどの手直しで完成。 これは量産できる！

まとめ

折れ線グラフは、数値が複数行になっても対応しますね。 どの線が何かのラベルを表示できないけど。 ということはラベルの書式が次のバージョンで追加になるかな。