Tech
ObsidianCanvasを使ってフローチャートからTRPGシナリオを書く(2)
2025年2月28日
00 min
ObsidianCanvasを使ってフローチャートからTRPGシナリオを書く(2)
type
date
slug
summary
category
tags
icon
password
URL
status
頒布
システム
シナリオタイプ
プレイ人数
時間
推奨技能
タグ
シリーズ
 
前回は、ObsidianCanvasで作ったフローチャートを箇条書きリストへ変換、箇条書きリストからMarkdownへ変換するスクリプトを公開いたしました。 沢山の方に使っていただいて、Obsidianの良さを理解していただけて1ユーザーとしてとても光栄に思います。
 
今回は、「まーーどろっこしいな！作ったフローチャートから直接Markdownファイルにしてくれや！！！！！！！」ということで、直接Markdownファイルに出力していきます。 ついでに、Markdownファイルの見出しをフローチャートに逆コンバートします。 更に、フローチャートをMermaid形式のフローチャートに変換します。これで、シナリオにMermaid形式のフローチャートを簡単にはっつけることができます。
 
前回のリザルト前回公開したスクリプト今回のスクリプト公開同梱ファイルCanvas2Markdown1. グループ処理の特殊ルール2. 階層構造の管理3. Markdownの生成ルールCanvas2mermaid参考ページ主な機能:1. ノードの表示/非表示制御2. エッジの種類による制御3. グループ（サブグラフ）の処理4. ヘッダー処理5. ノードの色付け6. ファイルタイプの特別処理Markdown2card1. 見出しレベルと色の対応付け

前回のリザルト

ObsidianCanvasを使ってフローチャートだけでTRPGシナリオを書く | －273℃/竜原
竜原
ObsidianCanvasを使ってフローチャートだけでTRPGシナリオを書く | －273℃/竜原
https://tthrr.com/article/15d68c8f-2401-81b7-ba0b-cf3c3e228573
ObsidianCanvasを使ってフローチャートだけでTRPGシナリオを書く | －273℃/竜原
ObsidianCanvasを使ってフローチャートだけでTRPGシナリオを書く｜竜原｜pixivFANBOX
A community to support creators' activities: pixivFANBOX
ObsidianCanvasを使ってフローチャートだけでTRPGシナリオを書く｜竜原｜pixivFANBOX
https://tthr.fanbox.cc/posts/9037417
ObsidianCanvasを使ってフローチャートだけでTRPGシナリオを書く｜竜原｜pixivFANBOX
現在、スクリプトはFanbox限定での公開となっています。 ブログ記事は導入するための説明記事になっていますので、こちらを観ながら導入してください。

前回公開したスクリプト

  • Canvas2List
    • Canvasファイルを箇条書きリストに出力します。
    • 箇条書きでプロットを整形する人にオススメ
  • List2markdown
    • 箇条書きリストをMarkdownへ変換します。
    • 箇条書きでプロットを整形したあとMarkdownへ変換
  • Dynalist2here
    • Dynalistで作った箇条書きリストをObsidianへ移動させます。
    • Dynalist側でコピーしたものをObsidian上でスクリプトを発動させたらファイルが出来上がります。

今回のスクリプト公開

tthr.fanbox.cc
https://tthr.fanbox.cc/posts/9458069

同梱ファイル

前回のスターターVaultをダウンロードしてくださった場合、上書きが可能です。 導入方法は前回の記事をみてください。
  • Templateフォルダ
    • Canvas2markdown.md
      • キャンバスファイルから直接Markdownに出力します
    • Canvas2mermaid.md
      • キャンバスファイルからMermaid形式のフローチャートを出力します
    • Markdown2card.md
      • マークダウンの見出しを判定して新規キャンバスにカードを作成します。
 

Canvas2Markdown

notion image
 
キャンバスファイルを直接Markdown形式に変換します。 カードに直接書き込んだ一行目をヘッダーとして処理し、ニ行目からは文章として取り扱います。 また別ファイルをカードとして貼り付けた場合でもその中身を全て出力します。
 

1. グループ処理の特殊ルール

  • 破線のグループは非表示だが、その中身は表示
  • 子要素は親グループの表示状態に影響されない
  • 子要素自身が破線の場合のみ非表示(ノード、グループ共に指定可能)

2. 階層構造の管理

  • メインフロー（実線）とサブフロー（点線）を区別して処理
  • グループの入れ子関係を正確に把握
  • 同Y軸上にあるカードは左から右へ判定されます。
    • 同じ高さのところに2つ以上カードが並んでいる場合、左から右という順番で出力されます。

3. Markdownの生成ルール

  • ファイルノード：リンクされたファイルの内容を展開
  • テキストノード：そのままテキストとして出力
  • グループノード：見出しとして処理
  • ヘッダーレベルの自動調整
 
使用方法：
  1. キャンバスファイルを開いた状態でコマンドパレットを開き（Ctrl+Pを押す)「Create Canvas2Markdown」スクリプトを実行
  1. 自動的に「[元のファイル名]_Document.md」という名前で出力
 
 

Canvas2mermaid

notion image
Canvasで作ったフローチャートをMermaid | Diagramming and charting tool形式のコードに書き換えます。Markdown記法でコードブロックを作り、コードブロックを「Mermaid」に指定すると本文中にフローチャートを表示することができます。
 

参考ページ

Typoraでシーケンス図、フローチャート、ガントチャートを描くための書き方まとめ - Qiita
はじめにMarkdownでUMLを扱うとき、VSCodeでPlantUMLを使う方が多いかと思います。参考記事 : Visual Studio Code で UML を描こう！ですが、Typo…
Typoraでシーケンス図、フローチャート、ガントチャートを描くための書き方まとめ - Qiita
https://qiita.com/snova301/items/037ebb66658b181e659c
Typoraでシーケンス図、フローチャート、ガントチャートを描くための書き方まとめ - Qiita
VSCodeにMermaid書ける環境を整える - Qiita
はじめに前回記事でMermaidについて触れて、WEBで動くエディタのお話も書いたのですが、実際Markdownで資料作成するとなるとMarkdownを書いているエディタでそのままMermaid記…
VSCodeにMermaid書ける環境を整える - Qiita
https://qiita.com/fu-a-sak/items/f49e75503c5d4557275c
VSCodeにMermaid書ける環境を整える - Qiita
Obsidian×Mermaid入門：テキストベース図解がもたらす思考革命｜Mekann
はじめに Obsidianは、Markdownベースのノート管理ツールとして人気を博しているアプリケーションです。シンプルかつ強力なリンク機能によって、個人のナレッジベースや学習リソースを俯瞰しやすくしてくれます。しかし、文章や箇条書きで書き溜めた情報をより体系的に視覚化したいと感じたことはないでしょうか？ そんな時に活躍するのがMermaidです。 Mermaidはテキストベースで多彩なダイアグラムを生成することができる非常に便利なツールであり、Obsidianでは標準機能としてサポートされています。本記事では、初心者にもわかりやすいステップで解説しつつ、やや高度な機能やコツも織
Obsidian×Mermaid入門：テキストベース図解がもたらす思考革命｜Mekann
https://note.com/mekann/n/ne29c93a1cad9
Obsidian×Mermaid入門：テキストベース図解がもたらす思考革命｜Mekann

主な機能:

1. ノードの表示/非表示制御

  • ノードの縁が「Dashed」が設定されているノードやグループはMermaid出力をしない。

2. エッジの種類による制御

  • 「Dotted」のエッジを使い、サブフローチャートとして作られた新たなフローチャートを、別のMermaidコードとして出力。これにより、メインフローとサブフローを分けて表示可能

3. グループ（サブグラフ）の処理

  • キャンバス上のグループは、Mermaidのsubgraphとして出力
  • グループ内のノードは適切にインデントされて表示
  • グループ内のファイル、テキスト、その他のノードタイプを区別して処理

4. ヘッダー処理

  • テキストノードの先頭に#がある場合（Markdownのヘッダー）、それを除去
  • 例：# 導入 → 導入として出力

5. ノードの色付け

  • キャンバス上で設定された色をMermaidでも再現
  • 6色のカラーパレット（red, orange, yellow, green, blue, purple）をサポート
  • classDefを使用して色付けを実装

6. ファイルタイプの特別処理

  • .mdファイルリンクの場合、ファイル名のみを表示
  • パス情報は除去され、より簡潔な表示に
  • 例：Sample/路地裏.md → 路地裏として出力
 
使用方法：
  1. キャンバスファイルを開いた状態でコマンドパレットを開き（Ctrl+Pを押す)「Create Canvas2mermaid」スクリプトを実行
  1. 自動的に「[元のファイル名]_mermaid.md」という名前で出力
 

Markdown2card

notion image
Markdownの見出しをCanvasファイルのノードに変換します。 採用する見出しを変換前に選択することができます。

1. 見出しレベルと色の対応付け

notion image
  • 見出しレベル（H1～H5）と色を対応付け
  • 視覚的な階層構造を色で表現
  • 見出しレベルの選択が可能
 
使用方法：
  1. キャンバスファイルを開いた状態でコマンドパレットを開き（Ctrl+Pを押す)「Create Markdown2card」スクリプトを実行
 
目次