Obsidian Mermaid連携！思考を可視化する図解作成ガイド

Obsidianを使っていると、テキストだけでは表現しきれないアイデアや構造をMermaid記法で図解したいと思う瞬間がありますよね。でも実際にやってみると、フローチャートの構文が覚えられなかったり、ガントチャートやマインドマップを思い通りに描けなかったりして挫折しそうになることも多いかもしれません。さらに、CSSを使ってデザインをカスタマイズしたり、便利なプラグインを活用して入力を効率化したりしたいというニーズも尽きないものです。この記事では、ObsidianとMermaidを連携させて、あなたの思考をスムーズに視覚化するためのテクニックを余すところなくお伝えします。

• Mermaidの基本的な構文とObsidianでの具体的な記述方法
• ガントチャートやマインドマップを使ったタスクとアイデアの整理術
• CSSやプラグインを活用して見た目と機能を拡張するテクニック
• モバイル版での表示エラーやツールごとの使い分けに関する実践的知識

ObsidianとMermaidの基本構文と書き方

ObsidianにはMermaidが標準で組み込まれているため、特別なインストールなしですぐに使い始めることができます。ここでは、日常的によく使うダイアグラムの書き方から、少し凝った表現まで、コピペで使える実例を交えて解説していきますね。

初心者も安心なフローチャートの書き方

フローチャートは、Mermaidの中で最も基本的でありながら、応用範囲が無限大の図解ツールです。業務フローの整理、アルゴリズムの可視化、あるいは意思決定プロセスの確認など、あらゆる「流れ」を表現するのに適しています。Obsidianでこれを使いこなせるようになると、テキストでダラダラと説明を書くよりも、圧倒的に直感的で分かりやすいノートが作れるようになります。

書き方の基本は非常にシンプルです。まず、コードブロックの開始として ```mermaid と宣言します。その直後にグラフの方向を指定するのですが、ここが最初のポイントです。一般的には graph TD（Top-Down：上から下へ）や graph LR（Left-Right：左から右へ）を使います。Obsidianのプレビュー画面は縦長になることが多いので、基本はTDがおすすめですが、Canvas機能を使って横に広い画面で見る場合や、時系列を意識したい場合はLRが見やすいでしょう。

次にノード（要素）とエッジ（線）の定義ですが、ここでは「形」に意味を持たせることが重要です。単なる四角形ばかりでは単調になりがちですが、Mermaidには多様な形状が用意されています。

さらに、ノード同士を繋ぐ「矢印」にもこだわりましょう。A --> B と書けば標準的な矢印になりますが、A --- B なら矢印なしの実線、A -.-> B なら点線の矢印になります。これらを使い分けることで、「必須のフロー」と「オプションのフロー」を視覚的に区別できます。

少し高度なテクニックとして、「サブグラフ（Subgraph）」によるグループ化もぜひ覚えておいてください。複雑なシステム図を描く際、関連するノードを枠で囲んでグルーピングできます。subgraph グループ名 で開始し、end で閉じるだけです。これにより、図全体が整理され、見る人にとっての認知的負荷を大幅に下げることができます。

ただし、Obsidianの一部のバージョン（Mermaid v11系を含む環境など）では、矢印なしの線を指定しても強制的に矢印が付いてしまうというレンダリングバグが報告されることがあります。こうした場合も、後述するCSSカスタマイズで回避可能ですが、まずは基本的な構文で「論理構造を正しく記述する」ことに集中するのが上達の近道です。

ガントチャートでプロジェクト管理をする

プロジェクトの進捗管理において、ガントチャートは全体像を把握するための最強のツールです。Excelや専用の管理ツールを使うのも良いですが、Obsidian上でガントチャートを作成できれば、日々のタスクメモや議事録とダイレクトにリンクした状態でスケジュール管理が可能になります。これは、個人のナレッジマネジメント（PKM）において非常に強力な武器となります。

Mermaidでガントチャートを書く際は、まず gantt と宣言し、その後にタイトルや日付のフォーマット設定を行います。特に重要なのが dateFormat です。入力する日付データの形式を YYYY-MM-DD などと指定しておかないと、正しくパースされずにエラーになります。また、表示形式を制御する axisFormat を使えば、軸のラベルを「1月1日」のように日本向けに見やすく調整することも可能です。

さらに、土日や祝日を稼働日から除外する excludes weekends という設定も実務的です。これをヘッダー部分に追加するだけで、工数計算から週末を除外してバーを描画してくれます。

しかし、Obsidianでガントチャートを使う際には一つ大きな課題があります。それは「表示サイズ」の問題です。数ヶ月にわたる長期プロジェクトを表示しようとすると、Obsidianのプレビュー画面の幅に合わせて全体が縮小され、文字が豆粒のように小さくなって読めなくなることがあります。これを防ぐためには、表示期間を月ごとに分割するか、あるいはCSSを使って横スクロールを有効にするなどの工夫が必要です。デフォルトの状態では「短期〜中期のプロジェクト」や「フェーズごとの詳細スケジュール」を可視化するのに向いていると言えるでしょう。

また、ガントチャートの各バーをクリックして該当のノートを開くといったインタラクティブな機能は、フローチャートに比べて実装が難しく、標準機能ではサポートされていない点にも注意が必要です。あくまで「スケジュールの俯瞰」に特化した用途で使うのがストレスのない運用法かなと思います。

マインドマップで思考を整理する技術

Obsidian v1.4以降でMermaidのアップデートに伴い本格的にサポートされた「マインドマップ」機能は、個人的に最も革命的だと感じている機能の一つです。これまでは外部ツールで作った画像を貼り付けたり、専用のマインドマッププラグインを導入したりする必要がありましたが、今では標準のMermaid記法だけで、サクサクと思考のツリーを展開できます。

マインドマップの最大の利点は、その「記述のシンプルさ」にあります。フローチャートのように複雑な矢印の定義やIDの指定は一切不要です。基本的にはMarkdownのリスト記法と同じ感覚で、インデント（行頭のスペース）を下げていくだけで、自動的に枝が伸びていきます。この「書くスピードを止めない」という特性は、ブレインストーミングやアイデア出しの局面で非常に重要です。

mindmap Root((メインテーマ)) アイデア1 詳細A 詳細B アイデア2 ::icon(fa fa-book) 関連書籍 アイデア3(重要な気づき)

上記の例のように、mindmap と宣言した後、ルートとなるテーマを書きます。ノードの形状もフローチャートと同様に、() や [] で囲むことで変化させることが可能です。また、特筆すべき機能として「アイコンの挿入」があります。::icon(fa fa-book) のように記述すると、FontAwesomeなどのアイコンをノード内に表示できる場合があります（ただし、Obsidianがロードしているフォントセットに依存するため、すべてのアイコンが表示されるわけではありません）。

非常に便利なマインドマップ機能ですが、Obsidianユーザーを悩ませる頻出トラブルがあります。それは「ダークモード時の可読性問題」です。Obsidianをダークテーマで使用している場合、マインドマップの枝の色はカラフルに自動設定されるのですが、ノード内のテキスト色がデフォルトの「黒」のままになってしまい、暗い背景に黒い文字が沈んでしまって全く読めないという現象が多発します。

「せっかく書いたのに見えない！」と焦る必要はありません。これはMermaid自体のデフォルトスタイルとObsidianのテーマ設定の相性問題であり、後述するCSSスニペットを利用して、文字色を強制的に「白」などに指定することで簡単に解決できます。このCSS調整を行うまでは、一時的にライトモードに切り替えて内容を確認するのが現実的な対処法となるでしょう。

シーケンス図で処理の流れを可視化

システム開発の設計書や、複雑な業務フローのやり取りを記述する際、「時系列」と「アクター（当事者）」の関係を整理するのにシーケンス図（Sequence Diagram）は最適です。「誰が」「誰に」「いつ」「どんな情報を」送ったのかが一目瞭然になるため、要件定義の漏れを防ぐ効果も期待できます。

シーケンス図の書き出しは sequenceDiagram です。その後に participant（参加者）や actor（人型のアイコンで表示される参加者）を定義します。定義した順に左から右へと並びます。メッセージのやり取りは Alice->>Bob: こんにちは のように記述します。この矢印の書き方一つで、通信の性質を表現できるのがMermaidの奥深いところです。

• -> : 矢印なしの実線。単純なフローの移動。
• ->> : 矢印ありの実線。同期リクエスト（相手の反応を待つ通信）によく使われます。
• --> : 点線の矢印なし。
• -->> : 点線の矢印あり。レスポンス（返答）や非同期通信を表すのに適しています。
• -x : 末尾が×になる線。通信の失敗や損失を表現できます。

さらに、プロセスの実行期間を示す「活性化バー（Activation Bar）」も重要です。メッセージを送る際に Alice->>+Bob: リクエスト とプラス記号を付けると、Bobのライン上に棒が表示され「処理中」であることが分かります。処理が終わったら Bob-->>-Alice: レスポンス とマイナス記号を付けてバーを閉じます。これがあるだけで、図の専門性がグッと高まります。

また、複雑なロジックを表現するための「ループ（loop）」や「条件分岐（alt/opt）」といったブロック構文もサポートされています。例えば、alt 成功時 ... else 失敗時 ... end と書くことで、処理の分岐を枠付きで表現できます。ノート（メモ）を配置する機能もあり、Note right of Bob: 補足説明 と書けば、図の中に注釈を入れることも可能です。

これらの機能を使えば、単なるメモ書きレベルを超えた、エンジニアリングレベルの仕様書をObsidian内で完結させることができます。テキストベースなのでGit等での差分管理もしやすく、チーム開発のドキュメントとしても非常に優秀です。

クラス図の作成とダークモードの注意点

オブジェクト指向プログラミングの設計や、データベースのER図（実体関連図）に近い構造を描きたい場合、クラス図（Class Diagram）が役立ちます。データの「型」や「関係性」を定義することで、システム全体の静的な構造を俯瞰することができます。

classDiagram で開始し、クラス同士の関係を記述します。例えば、継承関係なら Animal <|-- Dog、コンポジション（強い全体-部分関係）なら Car *-- Tire のように、直感的な記号で関係性を定義できます。クラス内部のメソッドやプロパティも記述可能で、+publicAttribute や -privateMethod() のように、可視性（アクセシビリティ）をプラスやマイナスで表現できる点は、UML（統一モデリング言語）の標準に準拠しています。

しかし、クラス図においてもマインドマップと同様、あるいはそれ以上に深刻な「ダークモード問題」が存在します。多くのObsidianテーマにおいて、クラス図の「クラスボックス（箱）」の背景色が白や明るいグレーに設定されている一方で、文字色もデフォルトでスタイル固定されている場合があり、ダークモード環境下ではコントラスト比がおかしくなることが頻繁にあります。

ObsidianとMermaidの高度な活用術と設定

基本的な図が描けるようになったら、次は「もっと自分好みに使いやすくしたい」「Obsidianならではの連携機能を使いたい」という欲求が出てくるはずです。ここでは、単なる作図ツールの枠を超えて、あなたの「第二の脳」として機能させるための高度なカスタマイズと設定について深掘りします。

CSSで見やすいデザインにカスタマイズ

Mermaidが生成する図はSVG（スケーラブル・ベクター・グラフィックス）形式でレンダリングされるため、Web制作と同じようにCSS（Cascading Style Sheets）を使って詳細なデザイン変更が可能です。「デフォルトの配色が気に入らない」「もっと目に優しい色にしたい」といった悩みは、CSSスニペットを作ることで解消できます。

ObsidianでCSSカスタマイズを行うには、設定フォルダ内の snippets フォルダに .css ファイルを作成し、設定画面からそれを有効化します。Mermaidの要素をターゲットにするための「セレクタ」を知っているかどうかが鍵となります。

例えば、先ほど問題になった「マインドマップのダークモード文字色問題」を解決するには、以下のようなCSSコードを記述します。

/* ダークモード時のマインドマップ文字色を白にする / .theme-dark .mermaid .nodeLabel { color: #ffffff !important; } / 線の色も見やすく調整 */ .theme-dark .mermaid .edgePath .path { stroke: #aaaaaa !important; } 

また、巨大なフローチャートが画面からはみ出したり、逆に小さくなりすぎたりする問題に対しては、ホバー時のみ拡大表示してスクロール可能にするCSSテクニックも有効です。.mermaid:hover { overflow: auto; } といった指定を加えることで、普段はコンパクトに、必要な時だけ詳細を確認できるインタラクティブな図に変身します。

ノートを繋ぐ内部リンクの実装方法

「Obsidian Mermaid」で検索する多くのユーザーが求めている機能、それは「図の中の要素をクリックしたら、関連するノートへジャンプする」という機能ではないでしょうか。これが実現できれば、フローチャートを目次（MOC: Map of Content）として使い、視覚的なナビゲーションシステムを構築できます。

実は、フローチャート（Graph）においては、Obsidian開発チームによって実装された internal-link クラスを使用することでこれを実現できます。やり方は少し特殊的ですが、慣れれば簡単です。

まず、フローチャートを描き、リンクさせたいノードに対して class ノードID internal-link; という構文を追加します。このクラスが付与されたノードは、Obsidianによって特別な処理を受けます。「ノード内に書かれたテキスト」と「同じ名前のノート」が存在する場合、そのノードはクリッカブル（クリック可能）になり、押すとそのノートが開きます。

graph TD A[プロジェクトA] --> B[要件定義書] class A internal-link; class B internal-link;

ただし、この機能には制約があります。「表示テキスト」と「リンク先ノート名」が一致している必要があります。「表示は『A』と短くしたいけど、リンク先は『Project Alpha - 2024』にしたい」といった場合、標準の internal-link クラスだけでは対応できません。エイリアス機能などを駆使するか、あるいはノード名を長くして改行（
）を入れるなどの工夫が必要です。

また、残念ながらガントチャートやシーケンス図など、フローチャート以外の図ではこの internal-link クラスが機能しない、またはサポートされていないケースがほとんどです。これらは今後のアップデートに期待するか、DataviewJSなどのスクリプトを駆使して動的にHTMLを生成するなどの高度なハックが必要になります。

便利なプラグインと入力支援ツール

「Mermaid便利そうだけど、毎回コードを手打ちするのは面倒くさい…」そう思うのは当然です。プログラマーでない限り、構文を暗記するのはハードルが高いものです。そこで活躍するのが、Obsidianのコミュニティプラグインです。

特におすすめなのが「Mermaid Tools」です。このプラグインをインストールすると、サイドバーやコマンドパレットからMermaid用のツールバーを呼び出せるようになります。「フローチャートを挿入」「条件分岐ノードを追加」「矢印を変更」といった操作をボタンクリックだけで行えるため、スペルミスや括弧の閉じ忘れといった構文エラーから解放されます。初心者の方は、まずこれを入れてコードの構造を学ぶのが一番の近道です。

他にも、見た目を手軽に変えたい場合は「Mermaid Themes」というプラグインもあります。CSSを自分で書かなくても、設定画面から「Forest」「Dark」「Neutral」といったプリセットテーマを選ぶだけで、図全体の雰囲気をガラリと変えることができます。手軽に気分転換したい時に便利ですね。

さらに、作成した図を画像として保存したい場合は「Export Graph View」や、Obsidian標準のエクスポート機能を活用できます。SVGやPNG形式で書き出せば、プレゼン資料やWebサイトにもそのまま貼り付けることが可能です。

ExcalidrawやCanvasとの使い分け

Obsidianのエコシステムには、Mermaid以外にも強力な視覚化ツールが存在します。特に「Obsidian Canvas」と「Excalidraw」プラグインは非常に人気があり、Mermaidと機能が被る部分もあります。これらをどう使い分けるかが、快適なPKM環境構築の鍵となります。

私は以下のような基準でツールを使い分けています。

Mermaidの最大の強みは「テキストであること」です。つまり、Gitでバージョン管理した時に差分（Diff）が読めるのです。「ここが変わった」という履歴を明確に残したい設計図などはMermaid一択です。また、ChatGPTなどのAIに「このコードの続きを書いて」「この図を修正して」と指示を出しやすいのもMermaidの利点です。

一方で、直感的に付箋をペタペタ貼るような作業はCanvasが圧倒的に優れていますし、手書きでイラストを交えて思考を広げたい時はExcalidrawに勝るものはありません。一つのツールに固執せず、目的に応じてこれらをシームレスに行き来するのが、Obsidian上級者へのステップアップと言えるでしょう。

モバイル版での表示エラーと対策

「PCで作ったMermaid図が、iPhoneやiPadで開くと真っ白になる…」。これは多くのユーザーが直面するトラブルです。Obsidianはクロスプラットフォームで動作しますが、その裏で動いているレンダリングエンジンには違いがあります。

PC版（デスクトップアプリ）はChromiumベースのElectronで動作していますが、iOS版などはAppleのWebkitエンジンを使用しています。この違いにより、Mermaidの特定の機能（特に新しいチャートタイプや複雑なフィルタ処理）がモバイル版では正しく動作しないことがあります。また、モバイルデバイスはPCに比べて利用できるメモリ量が厳しく制限されているため、数百のノードを持つような巨大な図を描画しようとすると、メモリ不足でプロセスが強制終了され、結果として図が表示されない（空白になる）現象が起きます。

また、Quadrant Chart（象限チャート）などの比較的新しい図法は、モバイル版でのバグ報告が特に多いので、出先で確認する必要があるノートには、安定しているFlowchartやGantt Chartを中心に使うのが無難です。

まとめ：ObsidianとMermaidで思考を加速

ObsidianとMermaidを組み合わせることは、単に「図が描ける」以上の価値をもたらします。それは、あなたの脳内にあるモヤモヤとした抽象的なイメージを、構造化された「コード」として書き出し、永続的で再利用可能な「資産」へと変換するプロセスです。

最初は構文を覚えるのが少し大変かもしれませんが、プラグインやCSSを活用しながら少しずつ慣れていけば、マウスを一切使わずにキーボードだけで複雑なシステム図や美しいマインドマップを描けるようになります。そのスピード感と没入感は、一度味わうと病みつきになるはずです。

さらに詳しくMermaidの仕様を知りたい方は、公式のドキュメント（出典：Mermaid | Diagramming and charting tool）も参照してみてください。あなたのObsidianライフが、Mermaidによ